Lesson 2

Structuring an HTML Document

What You’ll Learn in This Lesson:

  • Image How to create a simple web page in HTML

  • Image How to include all the HTML tags that every web page must have

  • Image How to organize a page with paragraphs and line breaks

  • Image How to organize your content with headings

  • Image How to use the semantic elements of HTML5

  • Image How to use semantic tags to indicate header and footer content

  • Image How to use semantic tags to indicate navigational and secondary content

  • Image How to use semantic tags to better structure body content

In the first lesson, you got a basic idea of the process behind creating web content and viewing it online (or locally, if you do not yet have a web hosting provider). In this lesson, we get down to the business of explaining the various elements that must appear in an HTML file so that it is displayed appropriately in your web browser.

In general, this lesson provides a summary of HTML basics and gives some practical tips to help you make the most of your time as a web page developer. You’ll begin to dive a bit deeper into the theory behind it all as you learn about the HTML5 elements that enable you to enhance the semantics—the meaning—of the information that you provide in your marked-up text. You’ll take a closer look at six elements that are fundamental to solid semantic structuring of your documents: <header>, <section>, <article>, <nav>, <aside>, and <footer>.

Throughout the remainder of these lessons, you will see these tags used appropriately in the code samples, so this lesson makes sure that you have a good grasp of their meaning before you continue.

Getting Prepared

Here’s a review of what you need to do before you’re ready to move on in this lesson:

  1. Get a computer. We used a Mac computer to test the sample web content and capture the figures shown in these lessons, but you can use any Windows, Mac, or Linux/UNIX machine to create and view your web content. You can even use a tablet or smartphone, but that is more difficult. For the purposes of these lessons, it’s best to get a computer or laptop.

  2. Get a connection to the Internet. Whether you have a dial-up, wireless, or broadband connection doesn’t matter for the creation and viewing of your web content, but the faster the connection, the better for the overall experience. The Internet service provider (ISP), school, or business that provides your Internet connection can help you with the details of setting it up properly. In addition, many public spaces such as coffee shops, bookstores, and libraries offer free wireless Internet service that you can use if you have a laptop computer with Wi-Fi network support.

  3. Get web browser software. This is the software your computer needs in order to retrieve and display web content. As you learned in the first lesson, the most popular browsers (in alphabetical order) are Apple Safari, Google Chrome, Microsoft Edge, Mozilla Firefox, and Opera. It’s a good idea to install several of these browsers so that you can experiment and make sure your content looks consistent across them all; you can’t make assumptions about the browsers other people are using.

  4. Explore! Use a web browser to look around the Internet for websites that are similar in content or appearance to those you’d like to create. Note what frustrates you about some pages, what attracts you and keeps you reading others, and what makes you come back to some pages over and over again. If a particular topic interests you, consider searching for it using a popular search engine such as Google (www.google.com) or Bing (www.bing.com).

Caution

Although all web browsers process and handle information in the same general way, some specific differences among them mean that things do not always look the same in different browsers. Be sure to check your web pages in multiple browsers to make sure they look reasonably consistent.

This is doubly true for mobile devices. More and more people use mobile devices such as phones and tablets to access web pages, and the browsers on those devices can display your pages in surprising ways. Always test your pages in as many different devices and screen sizes as possible, along with the different web browsers.

Note

As discussed in the first lesson, if you plan to put your web content on the Internet (as opposed to publishing it on CD-ROM or a local intranet), you need to transfer it to a computer that is connected to the Internet 24 hours a day. The same company or school that provides you with Internet access might also provide web space; if not, you might need to pay a hosting provider for the service.

Getting Started with a Simple Web Page

In the first lesson, you learned that a web page is just a text file that is marked up by (or surrounded by) HTML codes that tell the browser how to display the text. To create these text files, use a text editor such as Notepad (on Windows), TextEdit (on a Mac), or any of the other suggested editors; do not use WordPad, Microsoft Word, or other full-featured word-processing software because those create different sorts of files from the plain-text files we use for web content.

Caution

We reiterate this point because it is very important to both the outcome and the learning process itself: Do not create your first HTML file with Microsoft Word or any other HTML-compatible word processor; most of these programs attempt to rewrite your HTML for you in strange ways, potentially leaving you totally confused. The same holds true when you use Microsoft Word and “Save As” HTML: You are likely to get a verbose and noncompliant file full of HTML that will not validate and will cause you headaches to edit.

In addition, we recommend that you not use a graphical, what-you-see-is-what-you-get (WYSIWYG) editor, such Adobe Dreamweaver. You’ll likely find it easier and more educational to start with a simple text editor while you’re starting to learn HTML.

Note

As mentioned in the first lesson, most professional web developers use a web page editor designed specifically for building web pages and web applications. We prefer to use Coda (for Mac) but Komodo Edit (https://www.activestate.com/komodo-edit) is a free editor that has a lot of useful features for writing HTML, CSS, and JavaScript. And it’s available for Windows, Mac, and Linux/UNIX. These are both text editors and do not have the drawbacks of WYSIWYG editors that are mentioned in the previous Caution.

Before you begin working, you should start with some text that you want to put on a web page:

  1. Find (or write) a few paragraphs of text about yourself, your family, your company, your softball team, or some other subject in which you’re interested.

  2. Save this text as plain, standard ASCII text. Notepad (on Windows) and most other simple text editors automatically save files as plain text, but if you’re using another program, you might need to choose this file type as an option (after selecting File, Save As).

Caution

If you’ve chosen to use TextEdit on a Mac computer, you need to go into the Preferences dialog box and choose Plain Text in the New Document pane. It’s also a good idea to turn off smart copy/paste, smart quotes, and smart dashes so that your web page files are written correctly.

As you go through this lesson, you will add HTML markup (called tags) to the text file, thus making it into web content.

When you save files containing HTML tags, always give them a name ending in .html. This is important; if you forget to type the .html at the end of the filename when you save the file, most text editors will give it some other extension (such as .txt). If that happens, you might not be able to find the file when you try to look at it with a web browser; if you find it, it certainly won’t display properly. In other words, web browsers expect a web page file to have the file extension .html and to be in plain-text format.

When visiting websites, you might also encounter pages with the file extension .htm, which is an acceptable file extension to use. You might find other file extensions used on the Web, such as .jsp (Java Server Pages), .asp (Microsoft Active Server Pages), or .php (PHP: Hypertext Preprocessor), but these file types use server-side technologies that are beyond the scope of HTML and these lessons. However, those files also contain HTML in addition to the programming language. The programming code in those files is compiled on the server side, and all you would see if you viewed the source in a web browser would be the HTML output. If you looked at the source files, you would likely see some intricate weaving of programming and markup codes.

Listing 2.1 shows an example of text you can type and save to create a simple HTML page. If you opened this file with Chrome, you would see the page shown in Figure 2.1. Every web page you create must include a <!doctype> declaration, as well as <html></html>, <head></head>, <title></title>, and <body></body> tag pairs.

A screenshot shows a browser window titled "The first web page," with a body of the text.
Figure 2.1 When you save the text in Listing 2.1 as an HTML file and view it with a web browser, only the actual title and body text are displayed.

Listing 2.1 The <html>, <head>, <title>, and <body> Tags

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title> The First Web Page </title>
  </head>
  <body>
    <p>
      In the beginning, Tim created the HyperText Markup Language.
      The Internet was without form and void, and text was upon the
      face of the monitor and the Hands of Tim were moving over the
      face of the keyboard. And Tim said, Let there be links; and
      there were links. And Tim saw that the links were good; and
      Tim separated the links from the text. Tim called the links
      Anchors, and the text He called Other Stuff. And the whole
      thing together was the first Web Page.
    </p>
  </body>
</html>

In Listing 2.1, as in every HTML page, the words starting with < and ending with > are actually coded commands. These coded commands are called HTML tags because they “tag” pieces of text and tell the web browser what kind of text it is. This allows the web browser to display the text appropriately. HTML tags can be written in uppercase, lowercase, or a combination of both. But best practices say you should use all lowercase letters for your tags.

The first line in the document is the document type declaration; you are declaring that it is html (specifically, HTML5) because html is the value used to declare a document as HTML5 in the <!doctype> tag. We have written this tag in all lowercase, but many people write it <!DOCTYPE> to differentiate it from the actual HTML in the document.

If you have obtained a web hosting account, you could use FTP at this point to transfer the firstpage.html file to the web server. In fact, from this lesson forward, the instructions assume that you have a hosting provider and are comfortable sending files back and forth via FTP; if that is not the case, you should review the first lesson before moving on. Alternatively, if you are consciously choosing to work with files locally (without a web host), be prepared to adjust the instructions to suit your particular needs (such as ignoring the instructions “transfer the files” and “type in the URL”).

Note

You don’t need to be connected to the Internet to view a web page stored on your own computer. By default, your web browser tries to connect to the Internet every time you start it, which makes sense most of the time. However, this can be a hassle if you’re developing pages locally on your hard drive (offline), and you keep getting errors about a page not being found. If you have a full-time web connection via a LAN, a cable modem, Wi-Fi, or DSL, this is a moot point because the browser will never complain about being offline. Otherwise, the appropriate action depends on your breed of browser; check the options under your browser’s Tools menu.

HTML Tags Every Web Page Must Have

The time has come for the secret language of HTML tags to be revealed to you. When you understand this language, you will have creative powers far beyond those of other humans. Don’t tell the other humans, but it’s really pretty easy.

The first line of code is the document type declaration; in HTML5, this is simply

<!doctype html>

This declaration identifies the document as being HTML5, which then ensures that web browsers know what to expect and prepare in order to render content in HTML5.

Many HTML tags have two parts: an opening tag, which indicates where a piece of text begins, and a closing tag, which indicates where the piece of text ends. A closing tag starts with a / (forward slash) just after the < symbol.

Another type of tag is the empty tag, which is different in that it doesn’t include a pair of matching opening and closing tags. Instead, an empty tag consists of a single tag that starts with < and can end with / just before the > symbol. Although the ending slash is no longer explicitly required in HTML5, it does aid in compatibility with XHTML: If you have a pile of old XHTML in your website, it will not break while you’re in the process of upgrading it. In these lessons, we will be leaving the / out of empty tags unless there is an explicit need for it.

Following is a quick summary of these three tags, just to make sure you understand the role each plays:

  • Image An opening tag is an HTML tag that indicates the start of an HTML command; the text affected by the command appears after the opening tag. Opening tags always begin with < and end with >, as in <html>.

  • Image A closing tag is an HTML tag that indicates the end of an HTML command; the text affected by the command appears before the closing tag. Closing tags always begin with </ and end with >, as in </html>.

  • Image An empty tag is an HTML tag that issues an HTML command without enclosing any text in the page. Empty tags always begin with < and end with > and have no closing tag, as in <meta>. Some designers add a closing /> to empty tags, as in <meta />, but this is not required in HTML5.

Note

You no doubt noticed in Listing 2.1 that there is some extra code associated with the <html> tag. This code consists of the language attribute (lang), which is used to specify additional information related to the tag. In this case, it specifies that the language of the text within the HTML is English. If you are writing in a different language, replace the en (for English) with the language identifier relevant to you. The <meta> tag also has an attribute (charset) with a value (utf-8).

For example, the <body> tag in Listing 2.1 tells the web browser where the actual body content of the page begins, and </body> indicates where it ends. Everything between the <body> and </body> tags appears in the main display area of the web browser window, as shown in Figure 2.1.

The very top of the browser window (refer to Figure 2.1) shows title text, which is any text that is located between <title> and </title>. The title text also identifies the page on the browser’s Bookmarks or Favorites menu, depending on which browser you use. It’s important to provide titles for your pages so that visitors to the page can properly bookmark them for future reference; search engines also use titles to provide links to search results.

You define the character set used by the page with the tag <meta charset="utf-8">. This tag defines the character set the page will be written in—in this case UTF-8. This tag should always come right after the opening <head> tag in your HTML documents. Without it, your pages could become vulnerable to hackers. Most of the web pages you will create in these lessons would be secure without this line, but it’s a good habit to always include it. Then when you start creating web applications that could be vulnerable, you won’t forget it.

You will use the <body> and <title> tag pairs in every HTML page you create because every web page needs a title and body text. You will also use the <html> and <head> tag pairs, which are the other two tags shown in Listing 2.1. Putting <html> at the very beginning of a document simply indicates that the document is a web page. The </html> at the end indicates the end of the web page.

Note

Most web browsers attempt to display anything that appears after the opening <body> tag—even if it comes after the closing </html> tag. Don’t assume that you can hide content by placing it outside the <html> tag pair. You will learn how to hide content from being displayed in later lessons.

Within a page, there is a head section and a body section. Each section is identified by <head> and <body> tags. The idea is that information in the head of the page somehow describes the page but isn’t actually displayed by a web browser. Information placed in the body, however, is displayed by a web browser. The <head> tag always appears near the beginning of the HTML code for a page, just after the opening <html> tag.

Note

You might find it convenient to create and save a bare-bones page (also known as a skeleton page, or template) with just the doctype, character set and opening and closing <html>, <head>, <title>, and <body> tags, similar to the document in Listing 2.1. You can then open that document as a starting point whenever you want to make a new web page and save yourself the trouble of typing all those obligatory tags every time.

The <title> tag pair used to identify the title of a page appears within the head of the page, which means it is placed after the opening <head> tag and before the closing </head> tag. In the upcoming lessons, you’ll learn about some other advanced header information that can go between <head> and </head>, such as style sheet rules for formatting the page.

The <p> tag in Listing 2.1 encloses a paragraph of text. You should enclose your chunks of text in the appropriate container elements whenever possible; you’ll learn more about container elements in future lessons.

Organizing a Page with Paragraphs and Line Breaks

When a web browser displays HTML pages, it pays no attention to line endings or the number of spaces between words. For example, the top version of the poem in Figure 2.2 appears with a single space after each word, even though that’s not how it’s entered in Listing 2.2. This is because extra whitespace in HTML code is automatically reduced to a single space. In addition, when the text reaches the edge of the browser window, it automatically wraps to the next line, no matter where the line breaks were in the original HTML file.

A screenshot shows a browser window titled "The Advertising Agency Song" that displays a paragraph at the top and the same divided into two separate sentences with line breaks and paragraph breaks.
Figure 2.2 When the HTML in Listing 2.2 is viewed as a web page, line and paragraph breaks appear only where there are <br> and <p> tags.

Listing 2.2 HTML Containing Paragraph and Line Breaks

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>The Advertising Agency Song</title>
  </head>
  <body>
    <p>
      When your client's    hopping mad,
      put his picture in the ad.

      If he still should    prove refractory,
      add a picture of his factory.
    </p>
    <hr>
    <p>
      When your client's hopping mad,<br>
      put his picture in the ad.
    </p>
    <p>
      If he still should prove refractory,<br>
      add a picture of his factory.
    </p>
  </body>
</html>

You must use HTML tags if you want to control where line and paragraph breaks actually appear. When text is enclosed within the <p></p> container tags, a line break is assumed after the closing tag. In later lessons, you’ll learn to control the height of the line break by using CSS. The <br> tag forces a line break within a paragraph. Unlike the other tags you’ve seen so far, <br> doesn’t require a closing </br> tag; this is one of those empty tags discussed earlier.

Note

If a closing slash isn’t required for empty elements, you might ask why many people still include it. One reason is that over the years, closing tags went from being not required, to required, to not required (again), and many people are used to using the perfectly valid but no longer required closing slash. Another reason is that because that middle period was relatively long, a lot of code editors, code generators, and templates use the closing slash, so you will see it used more often than not. It doesn’t matter which way you choose to write because both ways are valid; just be sure that whatever coding style you follow, you are consistent in its use.

The poem in Listing 2.2 and Figure 2.2 shows the <br> and <p> tags used to separate the lines and verses of an advertising agency song. You might have also noticed the <hr> tag in the listing, which causes a horizontal line (or “rule,” in design terminology) to appear on the page (refer to Figure 2.2). Inserting a horizontal rule with the <hr> tag also causes a line break, even if you don’t include a <br> tag along with it. Like <br>, the <hr> horizontal rule tag is an empty tag and, therefore, never gets a closing </hr> tag.

Note

In HTML5 it is no longer required to including the closing </p> tag on your paragraphs. The closing tag is assumed based on the appearance of another opening <p> tag or other block-level element. But just as with the closing slash in empty tags, many people prefer to include the closing </p> on their paragraphs. It doesn’t matter which way you choose to write your paragraphs because both ways are valid. In these lessons, we close the paragraphs so that we have a visual reminder in the HTML of where any applied styles should end.

Organizing Your Content with Headings

When you browse web pages on the Internet, you’ll notice that many of them have a heading at the top that appears larger and bolder than the rest of the text. Listing 2.3 is sample code and text for a simple web page containing an example of a heading as compared to normal paragraph text. Any text between the <h1> and </h1> tags will appear as a large heading. In addition, <h2> and <h3> and so on, as far down as <h6>, make progressively smaller headings.

Listing 2.3 Heading Tags

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Widgets</title>
  </head>
  <body>
    <h1>My Widgets</h1>
    <p>My widgets are the best in the land. Continue reading to
    learn more about my widgets.</p>

    <h2>Widget Features</h2>
    <p>If I had any features to discuss,  you can bet I'd do
    it here.</p>

    <h3>Pricing</h3>
    <p>Here, I would talk about my widget pricing.</p>

    <h3>Comparisons</h3>
    <p>Here, I would talk about how my widgets compare to my
    competitor's widgets.</p>
  </body>
</html>

Note

By now, you’ve probably caught on to the fact that HTML code is often indented by its author to reveal the relationships between different parts of the HTML document, as well as for simple ease of reading. This indentation is entirely optional; you could just as easily run all the tags together with no spaces or line breaks, and they would still look fine when viewed in a browser. You will often see this condensed style used on pages that have been optimized for speed. The indentations are for you and other human editors so that you can quickly look at a page full of code and understand how it fits together. Indenting your code is another good web design habit and ultimately makes your pages easier to maintain, both for yourself and for anyone else who might pick up where you leave off.

As you can see in Figure 2.3, the HTML that creates headings couldn’t be simpler. In this example, the phrase “My Widgets” is prominently displayed using the <h1> tag. To create the first (level 1) heading, just put an <h1> tag at the beginning and an </h1> tag at the end of the text you want to use as a heading. For a second-level (level 2) heading—for information that is of lesser importance than the title—use the <h2> and </h2> tags around your text. For content that should appear even less prominently than a level 2 heading, use the <h3> and </h3> tags around your text.

A screenshot shows the usage of levels of headings. The heading at the top is first level, which represents the title of the page. The other three headings in the page are in second level representing they are section headings.
Figure 2.3 Using three levels of headings shows the hierarchy of content on this sample product page.

Note

Most people think of the heading tags in terms of how large or small they are: The level 1 headings are bigger than level 2, which are bigger than level 3, and so on. But it’s better to think of them as you might an outline of a page. The level 1 heading defines the entire page. Level 2 headings define sections within the page. Level 3 headings define areas within the level 2 sections. You can go even deeper with level 4, 5, and 6 headings as well. These use the <h4>, <h5>, and <h6> tags, respectively. By thinking of what the HTML represents, rather than just what it looks like on the page, you will be prepared to make them look however you want with CSS. And you will learn how to use CSS for just this purpose in later lessons.

However, bear in mind that your headings should follow a content hierarchy; use only one level 1 heading, have one (or more) level 2 headings after the level 1 heading, use level 3 headings directly after level 2 headings, and so on. Do not fall into the trap of assigning headings to content just to make that content display a certain way. Instead, ensure that you are categorizing your content appropriately (as a main heading, a secondary heading, and so on), while using display styles to make that text render a particular way in a web browser.

Theoretically, you can also use <h4>, <h5>, and <h6> tags to make progressively less important headings, but these aren’t used very often. Web browsers seldom show a significant difference between these headings and the <h3> headings anyway—although you can control that with your own CSS—and content usually isn’t displayed in such a manner that you’d need six levels of headings to show the content hierarchy.

It’s important to remember the difference between a title and a heading. These two words are often interchangeable in day-to-day English, but when you’re talking HTML, <title> gives the entire page an identifying name that isn’t displayed on the page itself; it’s displayed only on the browser window’s title bar and in bookmarks and sometimes search engine results. The heading tags, on the other hand, are displayed on the page and often have some type of visual emphasis outside CSS. There can be only one <title> per page, and it must appear within the <head> and </head> tags; on the other hand, you can have as many <h1>, <h2>, and <h3> headings as you want, in any order that suits your fancy. However, as we mentioned before, you should use the heading tags to keep tight control over content hierarchy; do not use headings as a way to achieve a particular look because that’s what CSS is for. HTML tags define what the content is rather than how it looks.

Caution

Don’t forget that anything placed in the head of a web page is not intended to be viewed on the page, whereas everything in the body of the page is intended for viewing.

Peeking at Other Designers’ Pages

Given the visual and sometimes audio pizzazz present in many popular web pages, you probably realize that the simple pages described in this lesson are only the tip of the HTML iceberg. Now that you know the basics, you might surprise yourself with how much of the rest you can pick up just by looking at other people’s pages on the Internet. You can see the HTML for any page by right-clicking and selecting View Source in any web browser.

Don’t worry if you aren’t yet able to decipher what some HTML tags do or exactly how to use them yourself. You’ll find out about all those things in future lessons. However, sneaking a preview now will show you the tags that you do know in action and give you a taste of what you’ll soon be able to do with your web pages.

Understanding Semantic Elements

HTML5 includes tags that enable you to describe the semantics—the meaning—of the information that you provide in your marked-up text. Instead of simply using HTML as a presentation language, as was the practice in the very early days when <b> for bold and <i> for italic was the norm, modern HTML has as one of its goals the separation of presentation, meaning, and behavior. While using CSS to provide guidelines for presentation, composers of HTML can provide meaningful names within their markup for individual elements—not only through the use of IDs and class names (which you’ll learn about in subsequent lessons) but also through the use of semantic elements.

Some of the semantic elements available in HTML5 follow:

  • Image <header></header>—This might seem counterintuitive, but you can use multiple <header> tags within a single page. The <header> tag should be used as a container for introductory information, so it might appear only once in your page (likely at the top)—but you also might use it several times if your page content is broken into sections. Any container element can have a <header> element; just make sure that you’re using it to include introductory information about the element it is contained within.

  • Image <footer></footer>—The <footer> tag is used to contain additional information about its containing element (page or section), such as copyright and author information or links to related resources. Just as with the <header> tag, you can define footers in any section of the page, as well as for the page as a whole.

  • Image <nav></nav>—If your site has navigational elements, such as links to other sections within a site or even within the page itself, these links go in a <nav> tag. A <nav> tag typically is found in the first instance of a <header> tag, just because people tend to put navigation at the top and consider it introductory information, but that is not a requirement. You can put your <nav> element anywhere (as long as it includes navigation), and you can have as many on a page as you need.

  • Image <section></section>—The <section> tag contains anything that relates thematically; it can also contain a <header> tag for introductory information and possibly a <footer> tag for other related information. You can think of a <section> as carrying more meaning than a standard <p> (paragraph) or <div> (division) tag, which typically conveys no meaning at all; the use of <section> conveys a relationship between the content elements it contains.

  • Image <article></article>—An <article> tag is like a <section> tag, in that it can contain a <header>, a <footer>, and other container elements such as paragraphs and divisions. But the additional meaning carried with the <article> tag is that it is, well, like an article in a newspaper or some other publication. Use this tag around blog posts, news articles, reviews, and other items that fit this description. One key difference between an <article> and a <section> is that an <article> is a standalone body of work, whereas a <section> is a thematic grouping of information.

  • Image <aside></aside>—Use the <aside> tag to indicate secondary information; if the <aside> tag is within a <section> or an <article>, the relationship will be to those containers; otherwise, the secondary relationship will be to the overall page or site itself. It might make sense to think of the <aside> as a sidebar—either for all the content on the page or for an article or other thematic container of information.

These semantic elements will become clearer as you practice using them. In general, using semantic elements is a good idea because they provide additional meaning for not only you and other designers and programmers reading and working with your markup but also for machines. Web browsers and screen readers will respond to your semantic elements by using these elements to determine the structure of your document; screen readers will report a deeper meaning to users, thus increasing the accessibility of your material. But for the most part, browsers do not change how a semantic element is displayed on a page. As we’ve mentioned previously, this is part of the design and is controlled by CSS.

One of the best ways to understand the HTML5 semantic elements is to see them in action, but that can be a little difficult when the primary purpose of these elements is to provide meaning rather than design. That’s not to say that you can’t add design to these elements; you most certainly can, and you will in later lessons. But the “action” of the semantic elements is to hold content and provide meaning through doing so, as in Figure 2.4, which shows a common use of semantic elements for a basic web page.

A figure shows the semantic elements in a web page.
Figure 2.4 Showing basic semantic elements in a web page.

Initially, you might think, “Of course, that makes total sense, with the header at the top and the footer at the bottom” and feel quite good about yourself for understanding semantic elements at first glance—and you should! A second glance should then raise some questions: What if you want your navigation to be horizontal under your header? Does an aside have to be (literally) on the side? What if you don’t want any asides? What’s with the use of <header> and <footer> again within the main body section? And that’s just to name a few! Another question you might ask is where the <article> element fits in; it isn’t shown in this example but is part of this lesson.

This is the time when conceptualizing the page—and specifically the page you want to create—comes into play. If you understand the content you want to mark up and you understand that you can use any, all, or none of the semantic elements and still create a valid HTML document, then you can begin to organize the content of your page in the way that makes the most sense for it and for you (and, hopefully, for your readers).

Note

Although you do not need to use semantic elements to create a valid HTML document, even a minimal set is recommended so that web browsers and screen readers can determine the structure of your document. Screen readers are capable of reporting a deeper meaning to users, thus increasing the accessibility of your material.

(If this note were marked up in an HTML document, it would use the <aside> element.)

Let’s take a look at the elements used in Figure 2.4 before moving on to a second example and then a deeper exploration of the individual elements themselves. In Figure 2.4, you see a <header> at the top of the page and a <footer> at the bottom—straightforward, as already mentioned. The use of a <nav> element on the left side of the page matches a common display area for navigation, and the <aside> element on the right side of the page matches a common display area for secondary notes, pull quotes, helper text, and “for more information” links about the content. In Figure 2.5, you’ll see some of these elements shifted around, so don’t worry; Figure 2.4 is not some immutable example of semantic markup.

A figure shows the addition of the nested elements.
Figure 2.5 Using nested semantic elements to add more meaning to the content.

Something you might be surprised to see in Figure 2.5 is the <header> and <footer> inside the <section> element. In Figure 2.4, you see a <header> at the top of the page and a <footer> at the bottom—straightforward, as already mentioned. The use of a <nav> element on the left side of the page matches the content that comes after it, and the <header> element itself does not convey any level in a document outline. Therefore, you can use as many <header> elements as you need to mark up your content appropriately; a <header> at the beginning of the page might contain introductory information about the page as a whole, and a <header> element within the <section> element might just as easily and appropriately contain introductory information about the content within it. The same is true for the multiple appearances of the <footer> element in this example.

Let’s move on to Figure 2.5, which shifts around the <nav> element and also introduces use of the <article> element.

In Figure 2.5, the <header> and <nav> elements at the beginning of the page and the <footer> element at the bottom of the page should make perfect sense to you. And, although we haven’t talked about the <article> element yet, if you think about it as a container element that has sections (that use the <section> tag, even!), with each of those sections having its own heading, then the chunk of semantic elements in the middle of the figure should make sense, too.

As you can see, there’s no single way to conceptualize page content; you should, however, be able to conceptualize each individual page’s content.

If you marked up some content in the structure shown in Figure 2.5, it might look like the markup in Listing 2.4.

Listing 2.4 Semantic Markup of Basic Content

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Semantic Example</title>
  </head>
  <body>
    <header>
       <h1>SITE OR PAGE LOGO GOES HERE</h1>
    </header>
    <nav>
       SITE OR PAGE NAVIGATION GOES HERE.
    </nav>
    <article>
       <header>
          <h2>Article Heading</h2>
       </header>
       <section>
          <header>
             <h3>Section 1 Heading</h3>
          </header>
          <p>Section 1 content here.</p>
       </section>
       <section>
          <header>
             <h3>Section 2 Heading</h3>
          </header>
          <p>Section 2 content here.</p>
       </section>
       <footer>
          <p>Article footer goes here.</p>
       </footer>
    </article>
    <footer>
       SITE OR PAGE FOOTER HERE
    </footer>
  </body>
</html>

If you opened this HTML document in your web browser, you would see something like what’s shown in Figure 2.6—a completely unstyled document but one that has semantic meaning (even if no one can “see” it).

A screenshot shows the sample output window.
Figure 2.6 The output of Listing 2.4.

Just because there is no visible styling doesn’t mean the meaning is lost; as noted earlier in this section, machines can interpret the structure of the document as provided for through the semantic elements. You can see the outline of this basic document in Figure 2.7, which shows the output of this file after examination by the HTML5 Outliner tool, available at http://gsnedders.html5.org/outliner/.

A screenshot shows the output rendered after using HTML Outliner tool.
Figure 2.7 The outline of this document follows the semantic markup.

Note

Using the HTML5 Outliner tool is a good way to check that you’ve created your headers, footers, and sections; if you examine your document and see “untitled section” anywhere, and those untitled sections do not match up with a <nav> or an <aside> element (which have more relaxed guidelines about containing headers), then you have some additional work to do.

Now that you’ve seen some examples of conceptualizing the information represented in your documents, you’re better prepared to start marking up those documents. The sections that follow take a look at the semantic elements individually.

Using <header> in Multiple Ways

At the most basic level, the <header> element contains introductory information. That information might take the form of an actual <h1> (or other level) element, or it might simply be a logo image or text contained within a <p> or <div> element. The meaning of the content should be introductory in nature, to warrant its inclusion within a <header></header> tag pair.

Note

Information in the <header> element does not have to come first in the section it is introducing. That is the most common place to see it, but it can be displayed anywhere on your page that makes sense. The display location is defined by the CSS.

As you’ve seen in the examples so far in this lesson, a common placement of a <header> element is at the beginning of a page. When it’s used in this way, containing a logo or an <h1>-level title makes sense, such as here:

<header>
     <img src="acmewidgets.jpg" alt="ACME Widgets LLC">
</header>

Or even this:

<header>
     <img src="acmewidgets.jpg" alt="ACME Widgets LLC">
    <h1>The finest widgets are made here!</h1>
</header>

Both of these snippets are valid uses of <header> because the information contained within them is introductory to the page overall.

As you’ve also seen in this lesson, you are not limited to only one <header>. You can go crazy with <header> elements, as long as they are acting as containers for introductory information. Listing 2.4 showed the use of <header> elements for several <section> elements within an <article>, and this is a perfectly valid use of the element:

<section>
   <header>
      <h3>Section 1 Heading</h3>
   </header>
   <p>Section 1 content here.</p>
</section>
<section>
   <header>
      <h3>Section 2 Heading</h3>
   </header>
   <p>Section 2 content here.</p>
</section>

The <header> element can contain any other element in the flow content category (one of the HTML5 content models) of which it is also a member. This means that a <header> could contain a <section> element, if you wanted, and be perfectly valid markup. However, when you are conceptualizing your content, think about whether that sort of nesting makes sense before you go off and do it.

Note

In general, flow content elements are elements that contain text, images, or other multimedia embedded content; HTML elements fall into multiple categories.

If you want to learn more about the categorization of elements into content models, see http://www.w3.org/TR/2011/WD-html5-20110525/content-models.html.

The only exceptions to the permitted content within <header> are that the <header> element cannot contain other <header> elements, and it cannot contain a <footer> element. Similarly, the <header> element cannot be contained within an <address> or a <footer> element.

Understanding the <section> Element

The <section> element has a simple definition: It is “a generic section of a document” that is also “a thematic grouping of content, typically with a heading.” That sounds pretty simple to us and probably does to you as well. So you might be surprised to find that if you type difference between section and article in HTML5 in your search engine of choice, you’ll find tens of thousands of entries talking about the differences because the definitions trip people up all the time. We first discuss the <section> element and then cover the <article> element—and hopefully avoid any of the misunderstandings that seem to plague new web developers.

In Listing 2.4, you saw a straightforward example of using <section> within an <article> (repeated here); in this example, you can easily imagine that the <section> elements contain a “thematic grouping of content,” which is supported by the fact that they each have a heading:

<article>
    <header>
       <h2>Article Heading</h2>
    </header>
    <section>
       <header>
          <h3>Section 1 Heading</h3>
       </header>
       <p>Section 1 content here.</p>
    </section>
    <section>
       <header>
          <h3>Section 2 Heading</h3>
       </header>
       <p>Section 2 content here.</p>
    </section>
    <footer>
       <p>Article footer goes here.</p>
    </footer>
</article>

But here’s an example of a perfectly valid use of <section> with no <article> element in sight:

<section>
    <header>
       <h1>Super Heading</h1>
    </header>
    <p>Super content!</p>
</section>

So what’s a developer to do? Let’s say you have some generic content that you know you want to divide into sections with their own headings. In that case, use <section>. If you need to only visually delineate chunks of content (such as with paragraph breaks) that do not require additional headings, then <section> isn’t for you; use <p> or <div> instead.

Because the <section> element can contain any other flow content element and can be contained within any other flow content element (except the <address> element), it’s easy to see why, without other limitations and with generic guidelines for use, the <section> element is sometimes misunderstood.

Using <article>

We believe that a lot of the misunderstanding regarding the use of <section> versus <article> has to do with the name of the <article> element. When we think of an article, we think specifically about an article in a newspaper or a magazine. We don’t naturally think “any standalone body of work,” which is how the <article> element is commonly defined. The HTML5 recommended specification defines it as “a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable,” such as “a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.”

In other words, an <article> element could be used to contain the entire page of a website (whether or not it is an article in a publication), an actual article in a publication, a blog post anywhere and everywhere, part of a threaded discussion in a forum, or a comment on a blog post, or it could be used as a container that displays the current weather in your city. It’s no wonder there are tens of thousands of results for a search on “difference between section and article in HTML5.”

A good rule of thumb when you’re trying to figure out when to use <article> and when to use <section> is simply to answer the following question: Does this content make sense on its own? If so, then no matter what the content seems to be to you (for example, a static web page, not an article in the New York Times), start by using the <article> element. If you find yourself breaking it up, do so in <section> elements. And if you find yourself thinking that your “article” is, in fact, part of a greater whole, then change the <article> tags to <section> tags, find the beginning of the document, and surround it from there with the more appropriately placed <article> tag at a higher level.

Implementing the <nav> Element

The <nav> element seems so simple (<nav> implies navigation), and it ultimately is—but it is often used incorrectly. In this section, you’ll learn some basic uses and also some incorrect uses to avoid. If your site has any navigational elements at all, either sitewide or within a long page of content, you have a valid use for the <nav> element.

For that sitewide navigation, you typically find a <nav> element within the primary <header> element. If you want your navigational content to be introductory (and omnipresent in your template), you can easily make a case for your primary <nav> element to appear within the primary <header>, though you are not required to have it there. It is more important that your HTML be valid (as is <nav> outside a <header>) than that your <header> element contain everything allowed in it. A <nav> element can appear within any flow content, and it can also contain any flow content.

The following code snippet shows the main navigational links of a website, placed within a <header> element:

<header>
   <img src="acmewidgets.jpg" alt="ACME Widgets LLC">
   <h1>The finest widgets are made here!</h1>
   <nav>
      <ul>
         <li><a href="#">About Us</a></li>
         <li><a href="#">Products</a></li>
         <li><a href="#">Support</a></li>
         <li><a href="#">Press</a></li>
      </ul>
   </nav>
</header>

You are not limited to a single <nav> element in your documents, which is good for site developers who create templates that include both primary and secondary navigation. For example, you might see horizontal primary navigation at the top of a page (often contained within a <header> element) and then vertical navigation in the left column of a page, representing the secondary pages within the main section. In that case, you simply use a second <nav> element, not contained within the <header>, placed and styled differently to delineate the two types visually in addition to semantically.

Remember that the <nav> element is used for major navigational content; primary and secondary navigation both count, as does the inclusion of tables of contents within a page. For good and useful semantic use of the <nav> element, do not simply apply it to every link that allows a user to navigate anywhere. Note that we said “good and useful” semantic use, not necessarily “valid” use; it’s true that you could apply <nav> to any list of links, and it would be valid according to the HTML specification because links are flow content. But it wouldn’t be particularly useful to surround a list of links to social media sharing tools with the <nav> element as it wouldn’t add accurate or useful meaning.

When to Use <aside>

As you’ll have guessed based on the number of notes and sidebars in these lessons, we’re big fans of the type of content that is most appropriately marked up within the <aside> element. The <aside> element is meant to contain any content that is tangentially related to the content around it—additional explanation, links to related resources, pull quotes, helper text, and so on. You might think of the <aside> element as a sidebar, but be careful not to think of it only as a visual sidebar or a column on the side of a page where you can stick anything and everything you want, whether or not it’s related to the content or site at hand.

In Figure 2.8, you can see how content in an <aside> is used to create a pull quote, or a content excerpt that is specifically set aside to call attention to it. The <aside>, in this case, is used to highlight an important section of the text, but it could also be used to define a term or link to related documents.

A screenshot shows the output of "Pullquote" file. The main body of the page has text presented in three paragraphs. To the right of the third paragraph, a box enclosing a small paragraph of text is shown.
Figure 2.8 Using <aside> to create meaningful pull quotes.

When determining whether to use the <aside> element, think about the content you want to add. Is it related directly to the content in which the <aside> would be contained, but not absolutely critical to understanding the content, such as a definition of terms used in an article or a list of related links for the article? If your answer is an easy yes, that’s great! Use <aside> to your heart’s content. If you’re thinking of including an <aside> outside a containing element that is itself full of content, just make sure that the content of the <aside> is reasonably related to your site overall and that you’re not just using the <aside> element for visual effect.

Using <footer> Effectively

The counterpart to the <header> element, the <footer> element contains additional information about its containing element. The most common use of the <footer> element is to contain copyright information at the bottom of a page, as shown here:

<footer>
   <p>&copy; 2014 Acme Widgets, LLC. All Rights Reserved.</p>
</footer>

Much like the <header> element, the <footer> element can contain any other element in the flow content category of which it is also a member, with the exception of other <footer> or <header> elements. In addition, a <footer> element cannot be contained within an <address> element, but a <footer> element can contain an <address> element; in fact, a <footer> element is a common location for an <address> element to reside.

Placing useful <address> content within a <footer> element is one of the most effective uses of the <footer> element (not to mention the <address> element) because it provides specific contextual information about the page or section of the page to which it refers. The following snippet shows a use of <address> within <footer>:

<footer>
   <p>&copy; 2014-2018 Acme Widgets, LLC. All Rights Reserved.</p>
   <p>Copyright Issues? Contact:</p>
      <address>
      Our Lawyer<br>
      123 Main Street<br>
      Somewhere, CA 95128<br>
      <a href="mailto:[email protected]">[email protected]</a>
      </address>
</footer>

As with the <header> element, you are not limited to only one <footer>, and these elements don’t all have to be displayed below the content they are modifying. You can use as many <footer> elements as you need, as long as they are containers for additional information about the containing element. Listing 2.4 shows the use of <footer> elements for both the page and an <article>, both of which are valid.

Summary

This lesson introduced the basics of what web pages are and how they work. You learned that coded HTML commands are included in a text file, and you saw that typing HTML text yourself is better than using a graphical editor that creates HTML commands for you—especially when you’re learning HTML.

You were introduced to the most basic and important HTML tags. By adding these coded commands to any plain-text document, you can quickly transform it into a bona fide web page. You learned that the first step in creating a web page is to put a few obligatory HTML tags at the beginning and end, including adding a title for the page. You can then mark where paragraphs and lines end and add horizontal rules and headings, if you want them. You also got a taste of some of the semantic tags in HTML5, which are used to provide additional meaning by delineating the types of content your pages contain (not just the content itself). Table 2.1 summarizes all the tags introduced in this lesson.

Table 2.1 HTML Tags Covered in Lesson 2

Tag

Function

<html></html>

Encloses the entire HTML document.

<head></head>

Encloses the head of the HTML document. Used within the <html> tag pair.

<meta charset="utf-8">

Defines the character set for the document as UTF-8. Used within the <head> tag pair, immediately after the opening <head> tag.

<title></title>

Indicates the title of the document. Used within the <head> tag pair.

<body></body>

Encloses the body of the HTML document. Used within the <html> tag pair.

<p></p>

Encloses a paragraph; skips a line between paragraphs.

<br>

Indicates a line break.

<hr>

Displays a horizontal rule.

<h1></h1>

Encloses a first-level heading.

<h2></h2>

Encloses a second-level heading.

<h3></h3>

Encloses a third-level heading.

<h4></h4>

Encloses a fourth-level heading (seldom used).

<h5></h5>

Encloses a fifth-level heading (seldom used).

<h6></h6>

Encloses a sixth-level heading (seldom used).

<header></header>

Contains introductory information.

<footer></footer>

Contains supplementary material for its containing element (commonly a copyright notice or author information).

<nav></nav>

Contains navigational elements.

<section></section>

Contains thematically similar content, such as a chapter of a book or a section of a page.

<article></article>

Contains content that is a standalone body of work, such as a news article.

<aside></aside>

Contains secondary information for its containing element.

<address></address>

Contains address information related to its nearest <article> or <body> element, often contained within a <footer> element.

Q&A

Q. I’ve created a web page, but when I open the file in my web browser, I see all the text, including the HTML tags. Sometimes I even see weird gobbledygook characters at the top of the page. What did I do wrong?

A. You didn’t save the file as plain text. Try saving the file again, being careful to save it as Text Only or ASCII Text. If you can’t quite figure out how to get your word processor to do that, don’t stress. Just type your HTML files in Notepad or TextEdit instead, and everything should work just fine. Also, always make sure that the filename of your web page ends in .html or .htm. Some text editors will add .txt after you save, giving you a filename that is something like filename.html.txt. If this happens, you should rename the file, removing the .txt extension.

Q. Do I have to use semantic markup at all? Didn’t you say throughout this lesson that pages are valid with or without it?

A. True, none of these elements is required for a valid HTML document. You don’t have to use any of them, but I urge you to think beyond the use of markup for visual display only and think about it for semantic meaning as well. Visual display is meaningless to screen readers, but semantic elements convey a ton of information to these applications.

Q. I’m still completely befuddled about when to use <section> and when to use <aside>. Can you make it clearer?

A. We don’t blame you. There’s a resource available at the HTML5 Doctor website that is one of the best we’ve seen to help eliminate the confusion. It’s a flowchart for HTML5 sectioning, found at http://html5doctor.com/downloads/h5d-sectioning-flowchart.png. This flowchart asks the right questions about your content and helps you determine the correct container element to use.

Workshop

The Workshop contains quiz questions and exercises to help you solidify your understanding of the material covered.

Quiz

1. What six tags does every HTML page require?

2. Why is the <meta charset> tag important, and where should it be placed in an HTML document?

3. What HTML tags and text do you use to produce the following body content:

  • Image A heading with the words We are Proud to Present...

  • Image A secondary heading with the one word Orbit

  • Image A heading of lesser importance with the words The Geometric Juggler

4. What code would you use to create a complete HTML web page with the title Foo Bar, a heading at the top that reads Happy Hour at the Foo Bar, and then the words Come on down! in regular type? Try to use some of the semantic elements you just learned.

5. Which of the semantic elements discussed in this lesson is appropriate for containing the definition of a word used in an article?

6. What makes an element semantic?

7. Do you have to use an <h1>, <h2>, <h3>, <h4>, <h5>, or <h6> element within a <header> element?

8. Where must the contents of the <footer> for the document appear on the page?

9. How many different <nav> elements can you have in a single page?

10. What types of things might be enclosed in an <article> element?

Note

Just a reminder for those of you reading these words in the print or e-book edition of this book: If you go to www.informit.com/register and register this book (using ISBN 9780672338083), you can receive free access to an online Web Edition that not only contains the complete text of this book but also features an interactive version of this quiz.

Answers

1. Every HTML page requires <html>, <head>, <title>, and <body> (along with their closing tags, </html>, </head>, </title>, and </body>), plus <!doctype html> on the very first line and <meta charset> after the opening <head> tag. Technically, the <!doctype html> is not a tag, but rather a declaration, so if you said there were only five required tags, you’d be correct.

2. The <meta charset> tag defines the character set that the page uses, and it should always come immediately after the opening <head> tag in your document.

3. The code within the body would look like this:

<h1>We are Proud to Present...</h1>
<h2>Orbit</h2>
<h3>The Geometric Juggler</h3>

4. Your code could look like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Foo Bar</title>
  </head>
  <body>
    <header>
       <h1>Happy Hour at the Foo Bar</h1>
    </header>
    <section>
      <p>Come on Down!</p>
    </section>
  </body>    </html>

5. The <aside> element is appropriate for this.

6. A semantic element is an HTML element that describes the meaning of the information contained in that element.

7. No. The <header> element can contain any other flow content besides another <header> element or a <footer> element. However, a heading element (<h1> through <h6>) is not required in a <header> element.

8. The contents of the <footer> tag can appear wherever it makes sense to have it appear on the page. While most designers place footer content at the end or bottom of the page, there is no requirement that it be displayed there.

9. You can have as many <nav> elements as you need. The trick is to “need” only a few (perhaps for primary and secondary navigation only); otherwise, the meaning is lost.

10. The <article> element encloses any content that is complete or self-contained and is independently distributable or reusable. This could include a blog entry, a magazine or newspaper article, a forum post, a user-submitted comment, an interactive widget, or any other independent item of content.

Exercises

  • Image Even if your main goal in reading these lessons is to create web content for your business, you might want to make a personal web page just for practice. Type a few paragraphs to introduce yourself to the world and use the HTML tags you learned in this lesson to make them into a web page.

  • Image Throughout the lessons, you’ll be following along with the code examples and making pages of your own. Take a moment now to set up a basic document template containing the document type declaration and tags for the core HTML document structure. That way, you can be ready to copy and paste that information whenever you need it.

  • Image Building off a single page template, create a few more related pieces of content. Remember that some of your pages might contain <article> elements with no sections, but others might contain <section> elements with <header> and <footer> elements as well.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.80.155.163