1. Document Structure

These tags form the foundation of every HTML5 page.

<html> – Root Element

The <html> element wraps the entire document. The lang attribute tells browsers and screen readers what language the page is written in.

            <!DOCTYPE html>
            <html lang="en">
                ...the rest of the page...
            </html>

Back to Table of Contents

<head> – Document Head

The <head> element holds information about the page that is not shown on the page itself, such as the title, character set, and other metadata.

            <head>
                <meta charset="UTF-8">
                <title>HTML5 Tag Reference</title>
            </head>

Back to Table of Contents

<meta> – Metadata

The <meta> element is a tag placed inside the head section. It sets the character encoding, mobile viewport behaviour, and a description or author used by search engines. This page uses all four below.

            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta name="description" content="A basic HTML5 reference page...">
            <meta name="author" content="Student">

Back to Table of Contents

<body> – Document Body

The <body> element contains everything visible on the page: text, headings, images, links, lists, and tables. Every example on this page lives inside the body. A page has exactly one body.

            <body>
                <h1>HTML5 Tag Reference</h1>
                <p>Visible content goes here.</p>
            </body>

Back to Table of Contents

2. Headings

HTML has six levels of headings. <h1> is the most important and <h6> the least. Headings should be used to describe the outline of the page, not just to make text bigger.

<h1> – Heading Level 1

Used for the main title of the page. Normally there is only one per page (this page's title, "HTML5 Tag Reference", is an h1).

Example:

This is an h1 heading

<h1>This is an h1 heading</h1>

Back to Table of Contents

<h2> – Heading Level 2

Used for major sections. Each category on this page (such as "Headings") uses an h2.

Example:

This is an h2 heading

<h2>This is an h2 heading</h2>

Back to Table of Contents

<h3> – Heading Level 3

Used for subsections inside an h2 section. Each individual tag entry on this page uses an h3.

Example:

This is an h3 heading

<h3>This is an h3 heading</h3>

Back to Table of Contents

<h4> – Heading Level 4

Used for subsections inside an h3 section.

Example:

This is an h4 heading

<h4>This is an h4 heading</h4>

Back to Table of Contents

<h5> – Heading Level 5

Used for subsections inside an h4 section. By default it is displayed smaller than normal text.

Example:

This is an h5 heading

<h5>This is an h5 heading</h5>

Back to Table of Contents

<h6> – Heading Level 6

The lowest heading level, used for subsections inside an h5 section.

Example:

This is an h6 heading

<h6>This is an h6 heading</h6>

Back to Table of Contents

3. Text and Formatting

These tags organize paragraphs, break lines, and add meaning or emphasis to text.

<p> – Paragraph

The <p> element defines a paragraph. Browsers automatically add space before and after each paragraph.

Example:

This is the first paragraph.

This is the second paragraph. Notice the gap between them.

<p>This is the first paragraph.</p>
<p>This is the second paragraph. Notice the gap between them.</p>

Back to Table of Contents

<br> – Line Break

The <br> element is an empty tag that forces a new line without starting a new paragraph. It is useful for addresses and poems, where line breaks are part of the content.

Example:

University of Windsor
401 Sunset Avenue
Windsor, Ontario

<p>University of Windsor<br>
401 Sunset Avenue<br>
Windsor, Ontario</p>

Back to Table of Contents

<hr> – Thematic Break

The <hr> element is an empty tag representing a change of topic. Browsers display it as a horizontal line.

Example:

First topic ends here.

A new topic begins here.

<p>First topic ends here.</p>
<hr>
<p>A new topic begins here.</p>

Back to Table of Contents

<b> – Bold Text

The <b> element bolds the text it wraps. It is displayed in bold.

Example:

Remember to save your file with the .html extension.

<p>Remember to save your file with the <b>.html</b> extension.</p>

Back to Table of Contents

<i> – Italic Text

The <i> element makes the text italic

Example:

The phrase carpe diem means "seize the day."

<p>The phrase <i>carpe diem</i> means "seize the day."</p>

Back to Table of Contents

<u> – Underline

The <u> Underlines the wrapped text

Example:

The word recieve is spelled incorrectly; the correct spelling is "receive".

<p>The word <u>recieve</u> is spelled incorrectly...</p>

Back to Table of Contents

<blockquote> – Block Quotation

The <blockquote> element holds a longer quotation from another source. Browsers indent it. The optional cite attribute gives the URL of the source.

Example:

The W3C mission is to lead the Web to its full potential.

<blockquote cite="https://www.w3.org/Consortium/mission">
    <p>The W3C mission is to lead the Web to its full potential.</p>
</blockquote>

Back to Table of Contents

4. Grouping and Containers

These generic containers have no meaning of their own. They group content so it can be labelled (with id or class) or styled later.

<div> – Division (Block Container)

The <div> element is a block-level container: it starts on a new line and takes the full width. On this page, every category and every tag entry is wrapped in a div with an id, which is what the table of contents links jump to.

Example:

This paragraph is inside a div.

So is this one. The div groups them together.

<div id="example-div">
    <p>This paragraph is inside a div.</p>
    <p>So is this one. The div groups them together.</p>
</div>

Back to Table of Contents

<span> – Span (Inline Container)

The <span> element is an inline container: it wraps part of a line without breaking it. It changes nothing visually by itself, but it lets you label a piece of text, for example with a title attribute that shows a tooltip when you hover over it.

Example (hover over the word "HTML"):

This page is written in HTML only.

<p>This page is written in <span title="HyperText Markup Language">HTML</span> only.</p>

Back to Table of Contents

5. Links and Embedded Content

These tags connect to other pages and bring outside content, such as images and other web pages, into this one.

<a> – Anchor (Hyperlink)

The <a> element creates a link using the href attribute. It can link to another website, to a spot on the same page (using #id), or to an email address.

Examples:

External link: MDN HTML documentation
External link that opens in a new tab: W3C
Internal link: jump to the <table> entry
Email link: someone@example.com

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">External link</a>
<a href="https://www.w3.org/" target="_blank" rel="noopener">New tab</a>
<a href="table">Internal link</a>
<a href="mailto:someone@example.com">Email link</a>

Back to Table of Contents

<img> – Image

The <img> element is an empty tag that displays an image. The src attribute gives the image location and the alt attribute gives replacement text for screen readers or if the image fails to load. width and height set the size in pixels.

Example:

<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"
     alt="The orange HTML5 logo" width="128" height="128">

Back to Table of Contents

<iframe> – Inline Frame

The <iframe> element embeds another web page inside the current page. The title attribute describes the frame for accessibility. Note that some websites block being shown inside an iframe.

Example:

<iframe src="https://example.com/" title="Example Domain web page"
        width="600" height="300"></iframe>

Back to Table of Contents

6. Lists

Lists group related items. The table of contents at the top of this page is itself an ordered list with unordered lists nested inside it.

<ul> – Unordered List

The <ul> element creates a bulleted list, used when the order of the items does not matter.

Example:

Milk
Bread
Eggs

<ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Eggs</li>
</ul>

Back to Table of Contents

<ol> – Ordered List

The <ol> element creates a numbered list, used when order matters, such as steps. The type attribute can switch to letters or Roman numerals, and start changes the first number.

Example (default numbering):

Open a text editor
Write your HTML
Save the file and open it in a browser

Example (type="A"):

First option
Second option

<ol>
    <li>Open a text editor</li>
    <li>Write your HTML</li>
    <li>Save the file and open it in a browser</li>
</ol>

<ol type="A">
    <li>First option</li>
    <li>Second option</li>
</ol>

Back to Table of Contents

<li> – List Item

The <li> element is a single item in a <ul> or <ol>. A list item can contain another complete list, which creates a nested list.

Example (nested list):

Fruits
1. Apple
2. Banana
Vegetables
1. Carrot
2. Broccoli

<ul>
    <li>Fruits
        <ol>
            <li>Apple</li>
            <li>Banana</li>
        </ol>
    </li>
    <li>Vegetables ... </li>
</ul>

Back to Table of Contents

7. Tables

Tables display data in rows and columns. The single table below is used to demonstrate all five table tags.

Weekly Class Schedule
Day	Course	Time
Monday	Web Development	9:00 AM
Wednesday	Databases	1:00 PM
Friday	No classes

<table> – Table

The <table> element wraps the whole table. Without CSS, browsers draw the table with no cell borders.

<table>
    ...caption and rows...
</table>

Back to Table of Contents

<caption> – Table Caption

The <caption> element gives the table a title ("Weekly Class Schedule" above). It must be the first element inside the table.

<caption>Weekly Class Schedule</caption>

Back to Table of Contents

<tr> – Table Row

The <tr> element defines one row of the table. The table above has four rows: one header row and three data rows.

<tr>
    <td>Monday</td>
    <td>Web Development</td>
    <td>9:00 AM</td>
</tr>

Back to Table of Contents

<th> – Table Header Cell

The <th> element is a heading cell for a column or row. Browsers show it bold and centred. "Day", "Course", and "Time" above are header cells.

<tr>
    <th>Day</th>
    <th>Course</th>
    <th>Time</th>
</tr>

Back to Table of Contents

<td> – Table Data Cell

The <td> element holds a regular data value. The colspan attribute lets a cell stretch across several columns, like "No classes" in the Friday row above.

<td>Friday</td>
<td colspan="2">No classes</td>

Back to Table of Contents