Beginning HTML5 and CSS3 For Dummies
Book image
Explore Book Buy On Amazon

HTML document structure is hierarchical, so an entire document includes a head section. Thus, immediately following the opening element is where you define the head section, starting with an opening element and ending with a closing element.

Meeting the 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 element, which defines the page header, immediately follows the opening element:

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

Handling metadata with

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 elements always appear inside the HTML , 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 element that identifies a charset is required for a web page to validate at validator.w3.org. (as is a </span> element). Don’t leave them out! For more information about the HTML <span class="code"><meta></span> element, for which there are umpty-ump cases and examples, please consult one or more of the following:</p> <ul class="level-one"> <li><p class="first-para"><a href="http://www.w3.org/TR/2011/WD-html5-author-20110705/the-meta-element.html">HTML5: Edition for Web Authors</a> (The meta Element)</p> </li> <li><p class="first-para"><a href="http://www.w3schools.com/tags/tag_meta.asp">HTML <meta> Tag</a> (W3Schools)</p> </li> <li><p class="first-para"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta"><meta></a> (Mozilla Developer Network)</p> </li> </ul> <p>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.</p> <p>If you’d rather skip the text entry work, check out the screenshot in this figure.</p> <img loading="lazy" src="https://www.dummies.com/wp-content/uploads/398542.image0.jpg" width="535" height="155" alt="image0.jpg"/>

About This Article

This article is from the book:

About the book authors:

Ed Tittel is a 30-year veteran of the technology industry with more than 140 computing books to his credit, including the bestselling HTML For Dummies.

Chris Minnick runs Minnick Web Services. He teaches, speaks, and consults on web-related topics and has contributed to numerous books, including WebKit For Dummies.

This article can be found in the category: