Insights Technical Hub How to Understand Basic HTML Tags

How to Understand Basic HTML Tags

Introduction:

HTML tags are used with a simple tree layout. Few tags are required to create functional simple pages. HTML markup is useful, even when expanded upon with further technologies, such as Javascript, JSP, AJAX etc.

Requirements:

A text editor, and web browser.

Procedure:

Create a file, and save the file with the .html file extension after the file name. It should not have .txt as the file extension. Open the file with a text editor. Type this in the file, starting at the first line:

<html>
<body>
</body>
</html>

This creates a blank page with HTML markup. Notice each tag ends with a corresponding tag, preceded with ‘/’. The ‘<html>’ tag is the root of the DOM (Document Object Model) tree. Let’s create some tags in the <body> tag:


<html>
<body>
<div>
<table>
<tr><th>Heading 1</th><th>Heading 2</th></tr>
<tr><td>Row 1 Col. 1</td><td>Row 1 Col. 2</td><</tr>
<tr><td>Row 2 Col. 1</td><td>Row 2 Col. 2</td></tr>
</table>
<br />
<form action=/location/page.html>
<input type=”submit” value=”button name”/>
</form>
</div>
</body>
</html>

This creates a page with a table and a form. Everything is enclosed in the same section, division, or ‘<div>’. The table has a heading row followed by two standard rows. The row element/column value are enclosed by either ‘<th></th>’ or ‘<td></td>’ pairs. The ‘<br />’ tag indicates a line break. Blank lines in the .html file do nothing. A form sends information to the server and can redirect afterwards. This form would redirect to ‘/location/page.html’ if it exists. You can create this directory with the named page. After being redirected, you should see where this directory would be in the address bar. This form has a button named ‘button name’ which can be used to submit information. Lets add a heading, title, and the ‘<head>’ tag.

<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Heading with h1 formatting</h1>
<div>
<table>
<tr><th>Heading 1</th><th>Heading 2</th></tr>
<tr><td>Row 1 Col. 1</td><td>Row 1 Col. 2</td></tr>
<tr><td>Row 2 Col. 1</td><td>Row 2 Col. 2</td></tr>
</table>
<br />
<form action=/location/page.html>
<input type=”submit” value=”button name”/>
</form>
</div>
</body>
</html>

The title goes in the ‘<head>’ section, and the heading has ‘<h1>’ formatting. Default formatting for ‘<h2>’ and ‘<h3>’ are less important, secondary and tertiary headings. The title should show up at the top of the browser or in the browser’s page tab.

Let's make your job easier

Sign up to get insightful content