With a little markup experience under your belt, it should be a no-brainer to add the markup that identifies headings and subheads (h1 and h2), paragraphs (p), and emphasized text (em) to our content, as we’ll do in Exercise 5.1 . However, before we begin, I want to take a moment to talk about what we’re doing and not doing when marking up content with HTML.
The purpose of HTML is to add meaning and structure to the content. It is not intended to provide instructions for how the content should look (its presentation).
Your job when marking up content is to choose the HTML element that provides the most meaningful description of the content at hand. In the biz, we call this semantic markup. For example, the most important heading at the beginning of the document should be marked up as an h1 because it is the most important heading on the page. Don’t worry about what that looks like in the browser…you can easily change that with a style sheet. The important thing is that you choose elements based on what makes the most sense for the content.
Although HTML was intended to be used strictly for meaning and structure since its creation, that mission was somewhat thwarted in the early years of the web. With no style sheet system in place, HTML was extended to give authors ways to change the appearance of fonts, colors, and alignment using markup alone. Those presentational extras are still out there, so you may run across them if you view the source of older sites or a site made with old tools.
Exercise 5-1 | Defining text elements-
1- Open the document index.html in your text editor, if it isn’t open already.
2- The first line of text, “Black Goose Bistro,” is the main heading for the page, so we’ll mark it up as a Heading Level 1 (h1) element. Put the opening tag,
, after it, like this:
3- Our page also has three subheads. Mark them up as Heading Level 2 (h2) elements in a similar manner. I’ll do the first one here; you do the same for “Catering” and “Location and Hours”.
4- Each h2 element is followed by a brief paragraph of text, so let’s mark those up as paragraph (p) elements in a similar manner. Here’s the first one; you do the rest.
The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients.
5- Finally, in the Catering section, I want to emphasize that visitors should just leave the cooking to us. To make text emphasized, mark it up in an emphasis element (em) element, as shown here.
You have fun… we’ll handle the cooking. Black Goose Catering can handle events from snacks for bridge club to elegant corporate fundraisers.
Now the Document looks like the one in Figure 5-1
Now the Document looks like the one in Figure 5-1
6- Now that we’ve marked up the document, let’s save it as we did before, and open (or refresh) the page in the browser. You should see a page that looks much like the one in Figure 5-2. If it doesn’t, check your markup to be sure that you aren’t missing any angle brackets or a slash in a closing tag.
Figure 5-2. The home page after the content has been marked up with HTML elements.
Now we’re getting somewhere. With the elements properly identified, the browser can now display the text in a more meaningful manner. There are a few significant things to note about what’s happening in Figure 5-2.
Although it may seem like stating the obvious, it is worth pointing out that the heading and paragraph elements start on new lines and do not run together as they did before. That is because by default, headings and paragraphs display as block elements. Each block element begins on a new line, and some space is also usually added above and below the entire element by default.
By contrast, look at the text we marked up as emphasized (em). It does not start a new line, but rather stays in the flow of the paragraph. That is because the em element is an inline element. Inline elements do not start new lines; they just go with the flow. In Figure 5-3, the inline em element is outlined in red.
Figure 5-3, the inline em element is outlined in red.
The other thing that you will notice about the marked-up page in Figures 5-2 and 5-3 is that the browser makes an attempt to give the page some visual hierarchy by making the first-level heading the biggest and boldest thing on the page, with the second-level headings slightly smaller, and so on.
How does the browser determine what an h1 should look like? It uses a style sheet! All browsers have their own built-in style sheets (called user agent style sheets in the spec) that describe the default rendering of elements. The default rendering is similar from browser to browser (for example, h1s are always big and bold), but there are some variations (long quotes may or may not be indented).
If you think the h1 is too big and clunky as the browser renders it, just change it with a style sheet rule. Resist the urge to mark up the heading with another element just to get it to look better, for example, using an h3 instead of an h1 so it isn’t as large. In the days before ubiquitous style sheet support, elements were abused in just that way. Now that there are style sheets for controlling the design, you should always choose elements based on how accurately they describe the content, and don’t worry about the browser’s default rendering.
We’ll fix the presentation of the page with style sheets in a moment, but first, let’s add an image to the page in NEXT Tutorial.6