The word “head” takes on various meanings in HTML. For example, as the head of a document, the head of a table, or the heading of a section. There are other uses.
Inside an HTML Tag
Within a tag, head appears—or is implied—in <head>
, <header>
, <thead>
, <th>
, <h1>
, <h2>
, <h3>
, <h4>
, <h5>
, <h6>
, and <hgroup>
, which appeared in HTML5 and is deprecated in HTML5.1.
The <head> Element
At the top of your HTML’s source code, as the first descendant of the <html>
element, is the <head>
element. This is defined as the head section of your source code.
<!DOCTYPE html>
<html>
<head>
<!-- The head section of the source document -->
</head>
<body>
</body>
</html>
The <header> Element
Placed at the top of a section, or, more typically, at the top of the <body>
element, the <header>
element defines a header of a section, which typically contains a heading.
For example:
<section>
<header>
<h1>Heading of Section</h1>
<nav>
<ul>
<li>Thing one</li>
</ul>
</nav>
</header>
</section>
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
</footer>
The <thead> Element
Short for table heading group, the <thead>
element encompasses a block of rows that defines a table’s headings or labels. As such, it’s referred to as the table’s heading. In the following example, First Name and Last Name are in the table’s heading.
<table>
<thead>
<tr>
<th>First Name</th><th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arvo</td><td>Pärt</td>
</tr>
</tbody>
</table>
Note: Placing a table immediately after a heading doesn’t make the heading the table’s heading. Consider the following:
<h1>Composers</h1>
<table>
<thead>
<tr>
<th>First Name</th><th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arvo</td><td>Pärt</td>
</tr>
</tbody>
</table>
Composers is the section’s heading, not the table’s heading. As mentioned before, First Name and Last Name are in the table’s heading.
The <th> Element
Short for table header cell, the <th>
element represents a heading cell, often within a table’s heading section (<thead>
), that defines the heading of a column or a row. Thus, this element represents a column heading or a row heading.
Reconsider the previous example:
<table>
<thead>
<tr>
<th>First Name</th><th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arvo</td><td>Pärt</td>
</tr>
</tbody>
</table>
First Name is a column heading, as is Last Name. Now, consider the following example, where the table is defined vertically, not horizontally:
<table>
<tbody>
<tr>
<th>First Name</th><td>Arvo</td>
</tr>
<tr>
<th>Last Name</th><td>Pärt</td>
</tr>
</tbody>
</table>
First Name and Last Name are now row headings.
As an Attribute
The keyword “head
” also appears within the attribute headers
. See the second and third rows below. (headers
is useful when marking up accessible tables read by screen readers.) Here’s an example:
<table>
<thead>
<tr>
<th colspan="3" id="apples">Apples</th>
<th colspan="3" id="pears">Pears</th>
</tr>
<tr>
<th headers="apples" id="braeburn">Braeburn</th>
<th headers="apples" id="gala" >Gala</th>
<th headers="apples" id="fuji">Fuji</th>
<th headers="pears" id="bosc">Bosc</th>
<th headers="pears" id="starkrimson">Starkrimson</th>
<th headers="pears" id="forelle">Forelle</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="apples braeburn">$4.00</td>
<td headers="apples gala">$3.00</td>
<td headers="apples fuji">$2.00</td>
<td headers="pears bosc">$1.00</td>
<td headers="pears starkrimson">$4.00</td>
<td headers="pears forelle">$3.00</td>
</tr>
</tbody>
</table>
The Outlining Algorithm
In each of the six tags ending in a number (<h1>...<h6>
), the “h” stands for “heading,” with each incrementally larger number representing a deeper element in the outlining algorithm, or outlining structure. An example:
<h1>New York City Neighborhoods</h1>
<h2>Queens</h2>
<h3>Forest Hills</h3>
<h2>Brooklyn</h2>
<h3>Red Hook</h3>
<h2>The Bronx</h2>
<h3>Parkchester</h3>
<h2>Manhattan</h2>
<h2>East Village</h2>
<h2>Staten Island</h2>
<h3>St George</h3>
In closing, here’s a full document combining each of the previous examples.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Template</title>
</head>
<body>
<!-- A header section -->
<header>
<!-- A DEPRECATED heading group -->
<hgroup>
<!-- A level one heading -->
<h1>Headings</h1>
<!-- A level two heading acting as a sub header -->
<h2>All About Them</h2>
</hgroup>
</header>
<table>
<!-- A table heading group -->
<thead>
<tr>
<!-- A table heading cell-->
<th colspan="3" id="apples">Apples</th>
<th colspan="3" id="pears">Pears</th>
</tr>
<tr>
<!-- The headers attributes that map to IDs above -->
<th headers="apples" id="braeburn">Braeburn</th>
<th headers="apples" id="gala" >Gala</th>
<th headers="apples" id="fuji">Fuji</th>
<th headers="pears" id="bosc">Bosc</th>
<th headers="pears" id="starkrimson">Starkrimson</th>
<th headers="pears" id="forelle">Forelle</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="apples braeburn">$4.00</td>
<td headers="apples gala">$3.00</td>
<td headers="apples fuji">$2.00</td>
<td headers="pears bosc">$1.00</td>
<td headers="pears starkrimson">$4.00</td>
<td headers="pears forelle">$3.00</td>
</tr>
</tbody>
</table>=
<section>
<!-- A section header -->
<header>
<h1>Heading of Section</h1>
<nav>
<ul>
<li>Thing one</li>
<li>Thing two</li>
</ul>
</nav>
</header>
</section>
</body>
</html>