Anatomy of an HTML document

Reading

That wraps up the basics of individual HTML elements, but they aren't useful on their own. Now we'll look at how individual elements are combined to form an entire HTML page:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

Here we have:

<!DOCTYPE html>: The doctype. In the mists of time, when HTML was young (about 1991/2), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other helpful things. They used to look something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

However, these days no one cares about them, and they are just historical artifacts that need to be included for everything to work right. <!DOCTYPE html> is the shortest string of characters that counts as a valid doctype; that's all you need to know.
<html></html>: The <html> element. This element wraps all the content on the entire page and is sometimes known as the root element.
<head></head>: The <head> element. This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like page title and a page description that you want to appear in search results, CSS to style our content, character set declarations and more. You'll learn more about this in the next article in the series.
<meta charset="utf-8">: This element sets the character set your document should use to UTF-8, which includes most characters from the vast majority of human written languages. Essentially it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later.
<title></title>: The <title> element. This element sets the title of your page, which is the title that appears in the browser tab the page is loaded in, and is used to describe the page when you bookmark/favorite it.
<body></body>: The <body> element. This element contains all of the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.

All Programs

Anatomy of an HTML document

Reading