Anatomy of the <head> in HTML5
HTML document structure is hierarchical, so an entire document includes a head section. Thus, immediately following the opening <html> element is where you define the head section, starting with an opening <head> element and ending with a closing </head> element.
Meeting the <head> himself
The head is one of two main components in any HTML document; the body is the other main component. The head, or header, provides basic information about the document, including its title and metadata (information about information), such as keywords, character encoding, author information, and a description.
If you want to use an external style sheet within a page, information about that style sheet also goes into the header. Please do likewise — that is, add information to the head — if you want to establish a base for URLs referenced in a document, or call a script.
The <head> element, which defines the page header, immediately follows the <html> opening element:
<!DOCTYPE html> <html> <head> </head> </html>
Handling metadata with <meta>
Literally, metadata means data or information about data. Thus, the meta element is used to provide information about the HTML document inside which it appears. All <meta> elements always appear inside the HTML <head>, and may be used to define the character encoding — that is, the bit level codes used to represent character data — inside an HTML document.
They can also define keywords for search engines, describe document content, identify the document’s author, define a document refresh interval (the interval at which a page automatically reloads itself), and more.
This listing shows all of these things for a hypothetical HTML document.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- defines default HTML character codes → <meta name="keywords" content="HTML, CSS, meta tag examples"> <meta name="author" content="Ed Tittel"> <!-- identifies author → <meta name="description" content="meta element discussion → <meta http-equiv="refresh" content="1800"> <!-- refresh every 30 mins → <title>Lots of head markup, no body</title> </head> <body></body> </html>
A <meta> element that identifies a charset is required for a web page to validate at validator.w3.org. (as is a <title> element). Don’t leave them out! For more information about the HTML <meta> element, for which there are umpty-ump cases and examples, please consult one or more of the following:
HTML5: Edition for Web Authors (The meta Element)
HTML <meta> Tag (W3Schools)
<meta> (Mozilla Developer Network)
If you take the time to enter the HTML markup from the listing, you see a web page with the title “Lots of head markup, no body” but nothing else to show for itself. If you can’t see the full title in the browser tab, hover the mouse cursor over the title, and the whole thing appears in a small text box.
If you’d rather skip the text entry work, check out the screenshot in this figure.