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>