Common HTML Tags

The following are some facts about HTML tags (plus a few facts about XHTML tags too):

DOCTYPE: Defining your version of HTML

Every web page must start with a DOCTYPE declaration. It has to be the very first item on the very first line of your HTML or XHTML code. This tells browsers what version of HTML the web page was coded in, which helps them to know how to process the code. Prior to HTML5, DOCTYPE declarations were long and complex. For example, here's the DOCTYPE declaration for XHTML 1.1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

In HTML5, the DOCTYPE declaration is much simpler:

<!DOCTYPE html>

Understanding the following tables:

Common HTML tags are presented below, organized into four tables based on their purpose. The first table includes tags that control the overall structure of the web page. The second and third tables include tags that mark up the majority of web page content. Container tags (those that contain content) are presented in the second table, and non-container tags (those that stand alone) are presented in the third table. The final table contains tags that are used in markup of HTML tables, which are covered in Module 5 of this unit.

Document Structure

Opening Tag Closing Tag Description
<html> </html> Opens and closes an HTML document
<head> </head> The first of two main sections of an HTML document. The <head> section is used to provide information about the document for use primarily by search engines and browsers.
<title> </title> The title of document. This element is nested inside the <head> section. In HTML5, this is the only required tag other than the DOCTYPE declaration.
<body> </body> The second of two main sections of an HTML document. The <body> section contains all the content of the web page.

Content (Container) Tags

Opening Tag Closing Tag Description
<h1> to <h6> </h1>to</h6> Headings. H1 is the main heading, H2 is secondary, etc.
<p> </p> Paragraph
<div> </div> A container for a block of content
<span> </span> A container for in-line content, such as content inside a paragraph.
<em> </em> Gives the contained text emphasis (usually as italics).
<strong> </strong> Makes the contained text bold.
<a href = "document location"> </a> Link
<ol> </ol> Ordered (numbered) list
<ul> </ul> Unordered (bulleted) list
<li> </li> List item, must be nested inside a list element such as a <ol> or <ul>
<!-- --> Comment. Anything between these tags is not displayed on the screen. This is useful for making notes to yourself or to others who may view the source code of the web page.

HTML5 Semantic Tags

HTML5 introduced several new tags called semantic tags. These tags were designed to communicate the function of blocks of content that were common on many web pages. Prior to HTML5, developers just used <div> tags for all blocks.

Opening Tag Closing Tag Description
<header> </header> Contains introductory content for a page (e.g., a banner), or a section of a page.
<nav> </nav> Contains navigation content, such as a website navigation menu.
<main> </main> Contains the main content of the web page.
<aside> </aside> Contains content that is tangentially related to the main content of the page (often this is presented in a sidebar).
<footer> </footer> Contains the footer of a page, or of a section of a page. Typically the footer contains information about the content, such as the author and a copyright statement.

Empty (Non-Container) Tags

Tag Description
<br /> Line break.
<img src ="image location" alt="alternate text" /> Inserts an image into a web page.

Tables

Opening Tag Closing Tag Sample Attributes Description
<table> </table>   Adds a table
<tr> </tr>   Table row (start & end).
<th> </th> scope="row"
scope="col"
When creating a table to display data, use this tag to differentiate the first row or column of cells as heading cells for all the other cells in the same column or row. Browsers typically display this element bold and centered within the table cell. The scope attribute defines whether this is a row header or column header.
<td> </td>   Table data cell.
    colspan="number" Use with <th> or <td> elements. Spans cells across multiple columns.
    rowspan="number" Use with <th> or <td> elements. Spans cells across multiple rows.