Commonly Used HTML Elements (Coders Reference)

Document Reference: TN200901001 - Rev: 4.34 - Last Update: 28-09-2016 07:59 GMT - Downloaded: 24-Apr-2024 05:43 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 Element`	`Description`
`<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 Element`	`Description`
`<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 Element`	`Description`
`<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 Element`	`Description`
`<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 Element`	`Description`
`<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 Element`	`Description`
`<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 Element Description

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

`HTML Element`	`Description`
`<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>`

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>