Member Login:


Commonly Used HTML Elements

Document Reference: TN200901001 - Rev: 4.33 - Last Update: 25-03-2014 08:36 GMT - Downloaded: 27-May-2019 14:53 GMT

This reference sheet notes some of the most commonly used HTML elements.

The listing below shows a selection of valid HTML4.01 and HTML5 elements.

HTML Document Elements

HTML ElementDescription
<html> ... </html>The <html> start tag defines the document as a web page, or HTML document. This element is the outermost element.
<head> ... </head>This element contains all the head elements, e.g. <title>, <meta>, <script>, <style>, etc. It contains all the information that describes the HTML document.
<title> ... </title>This element defines the title of the HTML document and must be included in the <head> element.
<body> ... </body>This element contains all the content such as text, images, hyperlinks, etc.

See the Basic HTML Web Page practical exercise page for more information on HTML document elements.

HTML Structural Elements

HTML ElementDescription
<div> ... </div>The <div> allows you to create a container (box model) for your content. It is a block level element that can be sized, arranged and styled with CSS.
<h1> ... </h1>
<h2
> ... </h2>
<h3
> ... </h3>
<h4
> ... </h4>
<h5
> ... </h5>
<h6
> ... </h6>
Use these element to create your main content headings. By default, all heading elements are block elements. Beside the highest ranking <h1> heading, <h2> and <h3> are the most commonly used headings. The <h6> element is the lowest ranking heading element.
<p> ... </p>The <p> element groups textual content into paragraphs. It is a block level element that can be arranged and styled with CSS.
<span> ... </span>This element is an inline element that can be used to style a section of text.
<br>Forces a line break. The <br> element is a void (empty) element and does not require a closing tag.
<hr>The <hr> element is a void (empty) element and does not require a closing tag. Creates a horizontal rule (line) in HTML4.01 and earlier versions. HTML5 defines a semantic purpose of representing a 'paragraph-level thematic break'.

HTML Listing Elements

HTML ElementDescription
<ol> ... </ol>Creates an ordered listing. Must contain one or more <li> element(s). It is a block level element that can be arranged and styled with CSS.
<ul> ... </ul>Creates an unordered listing. Must contain one or more <li> element(s). It is a block level element that can be arranged and styled with CSS.
<li> ... </li>One or more <li> element(s) are nested within a <ol> or <ul> element. Each item listed will require one <li> element.

HTML Image Element

HTML ElementDescription
<img src="images/filename.jpg" alt="Alternative Text">Creates an <img> element for images. It is a inline element that can be styled with CSS. The <img> element is a void (empty) element and does not require a closing tag. The alt attribute is required and offers alternative text in case the image is not available for rendering.

HTML Form Elements

HTML ElementDescription
<form action="form-submit.php" method="post"> ... </form>Creates a <form> block level element that can be styled with CSS.
<fieldset> ... </fieldset>Creates a <fieldset> element that can be styled with CSS. One or more <fieldset> elements can be nested within the same <form> element.
<legend> ... </legend>The <legend> element applies a legend to a fieldset and can be styled with CSS. One <legend> element can be nested within one <fieldset> element.
<label for="idattribute"> ... </label>The <label> element can be linked to an element that is nested within a <form> element. It can be styled with CSS. The for attribute should be equal to the id attribute of the element that the label is bound to.
<input type="type" id="idattribute">There are different input type attributes for the <input> element. The <input> element is a void (empty) element and does not require a closing tag. See the HTML4.01 Form Input Control Type practioners reference page for more information on available type attributes.
<textarea id="idattribute" rows="2" cols="20"> ... </textarea>This element creates a multiple line text entry field. It can be styled with CSS. The cols attribute defines the width of the <textarea> element. The rows attribute defines the count of visible rows. A scroll bar will be displayed as soon as the entered text exceeds the available, visible area.
<select id="idattribute" size="1"> ... </select>Creates a <select> element that can be styled with CSS. The size attribute defines the count of rows being displayed.
<optgroup label="grouplabel"> ... </optgroup>This element is optional and is nested within a <select> element. It allows to group <option> elements and displays a label for each group. The label attribute defines the label text.
<option> ... </option>Creates a <option> element that is nested within a <optgroup> element or a <select> element.

HTML table Elements

HTML ElementDescription
<table> ... </table>Creates a <table> block level element that can be styled with CSS.
<thead> ... </thead>Creates a row group for the header data. The optional <thead> element is the first element nested within a <table> element.
<tfoot> ... </tfoot>Creates a row group for the footer data. The optional <tfoot> element is nested within a <table> element and is placed before the <tbody> element.
<tbody> ... </tbody>Creates a row group for the table data. The optional <tbody> element is nested within a <table> element and is placed after the optional <thead> / <tfoot> elements.
<tr> ... </tr>Creates a table row. The <tr> element is nested within the optional <thead> / <tfoot> / <tbody> elements or within a <table> element.
<th> ... </th>Creates a column heading cell. The <th> element is nested within a <tr> element.
<td> ... </td>Creates a table cell, containing the table data. The <td> element is nested within a <tr> element.

HTML Hyperlink Element

HTML ElementDescription
<a href=" ... "> ... </a>Creates an anchor <a> inline element that can be styled with CSS.

Absolute Link Example

<a href="http://www.mycourseresource.com/index.htm" title="Link to mycourseresource.com">Visit My Course Resource!</a>

Relative Link Examples

Link to page located in same directory (folder):

<a href="index.htm" title="Link to Home Page">Home</a>

Link to page located in parent directory (folder):

<a href="../index.htm" title="Link to Home Page">Home</a>

This website uses cookies to give you the best experience on our website, to personalise content and to analyse our website traffic. Some cookies may have been set already. To find out more about our use of cookies you can visit our Privacy Statement. By browsing this website, you agree to our use of cookies.

Hide this message