Basic Content Elements

HTML only represents a fraction of the effort that goes into building an effective web site, because the HTML vocabulary that you usually need is small. Altogether that vocabulary amounts to 24 elements — all of which are easy to remember and use, and nearly half of which are nearly identical in behavior to other elements on the list.

Many of these basic elements define structures that are familiar to users of word processing software; in addition to headings they include lists, paragraphs, and in bold/italic formatting.

There are also two container elements that HTML4.01 makes essential to effective stylesheets. In HTML5 those are supplanted by sectioning elements, which are introduced here and explained in the Advanced Topics.

Review and Related Concepts

Hypertext Links: the a Element

English name Closing tag Required attributes Type Notable Requirements
Anchor Required href (in practice) Phrasing/inline
  • Must not contain interactive elements such as form fields
  • Must only contain inline and image elements (HTML4.01)

It could be said that a is the grandaddy of all HTML elements, because — unlike the others — it does the work the web was meant for: describing human-readable links to other pages.

The contents of a link can amount to almost anything, especially in HTML5.

Attributes

Publishing Effective Links

You should remember two rules when publishing a link: to be effective, it must be recognizable and lead to a meaningful destination.

A properly signaled link usually relies on two visual cues: color and underlining, these days controlled with the CSS color and text-decoration properties. Other links are instead designed to look like buttons, though they don’t often jitter like buttons when followed.

There is also the navigation area common to most sites, which usually appears in an upper corner of the page, or as a row of links underneath the title of the site.

Homepage Links and Self-Links

The title of a site often takes the form of a link back to its homepage. A quick survey of the Google News, NBC News, CNN, Fox News, BBC, and Australian Broadcasting Corporation News sites all demonstrate this behavior, as do popular non-news destinations like Amazon, Wikipedia, and Flickr.

Older pages also contain links to the pages on which they’re published. From time to time you might look at the status bar of your browser and see “go to # on this page” or something similar, especially on sites meant to function well in older browsers, which provide better scripting interfaces for links than for other elements.

div

English name Closing tag Required attributes Type Notable Requirements
Document division Required None, but id or class should usually be present Flow/block None

The div element is generic by design, and does a lot of HTML’s heavy lifting. Unlike paragraphs, divs don’t carry any inherent meaning or default styles, instead relying on their id and class values to offer some kind of clue as to their purpose and appearance.

When browsers render a div off the bat, the result has no margins and stretches horizontally across the entire canvas.

### div and the Style Cascade

In HTML4.01 especially, the purpose of div elements is to serve as containers that can be referenced in stylesheet selectors xref. If you create:

<div id="sidebar">
  <p>The bowl was full of <a href="http://apple.com/">apples</a> and <a 
  href="http://www.orange.com/">oranges</a></p>
</div>

…You can then create a style rule for all of the hyperlinks that might lie inside #sidebar, like the following:

#sidebar a { color: #633; }

…As an alternative to creating a class for all of the links inside of #sidebar.

Sectioning Elements: header, nav, footer, article, section, and aside

[class="html5"]

English names Closing tag Required attributes Type Notable Requirements
Page header, site navigation, page footer, etc. Required None Flow/Block
  • None, but it’s polite to make a habit of putting aside after, or at the end of, article

These elements are functionally identical to div, but they offer something that div doesn’t: just as browsers know what to do with lists and form elements, they will eventually be able to do special things with these elements for which div can’t provide any baked-in cues.

Note that the head and header elements are entirely different.

The “HTML5 Shim”

Older versions (6–8) of Microsoft Internet Explorer don’t define the sectioning elements as parts of HTML, and cannot style them off the bat. To fix this problem, several people have written what are called “HTML5 Shim” utilities with JavaScript. Shim scripts fall into a broader class of scripts called “polyfills” that aid small tasks or cover gaps in browser support.

Two especially popular HTML5 Shim scripts can be found at http://code.google.com/p/html5shim/ and https://github.com/ahume/html5-shim.

Paragraphs

p

English name Closing tag Required attributes Type Notable Requirements
Paragraph Optional None Flow/block
  • Can only contain phrasing/inline elements, images, and HTML5 A/V elements

When we consider the structure of written language, there’s an obvious progression of scope: word, phrase, sentence, paragraph, passage. Because paragraphs are meant to set off discrete ideas, they need to be set off in web documents as in all other kinds… and that place is carved out by the p element.

Print Paragraphs and Web Paragraphs

Web pages scroll while printed pages stand still. This difference explains default paragraph styling in web browsers, where paragraphs are easier to read if they’re clearly set apart.

If you want to attempt a “traditional” look, apply the following CSS rule:

p { margin: 0; text-indent: 1.618em; text-align: justify; }

Introducing Collapsed Margins and Resets

When two HTML elements with non-zero margins lie aside one another, whether in a stack or a row, those margins collapse so that only the larger of the two parallel margins is visible on the rendered page. Since this behavior makes it more difficult to control page layout, professional developers often create what they call reset styles.

This author doesn’t use reset styles, for one reason: they rely on negation, even where consistency is more desirable.

Headings

h1h6

English name Closing tag Required attributes Type Notable Requirements
Heading (level 1–6) Required None Flow/Block (heading)
  • The levels of successive headings within the same parent element should always descend.

Pages need titles, but the same is true of individual document sections, which is where headings come in. Well-composed headings can break up your content to make it both more readable, and more legible. More importantly, they also help the search engine performance of your pages.

h1 elements are most-significant; there should only be one on each page. The h4 element, on the other hand has always been styled by default at the same size as normal text, so it might be better to use h3 or h4 as your most typical heading level, then increase heading levels further as their scope broadens. See attached illustration.

Yes, Headings Are Ugly

Like word processors, web browsers tend to make the higher-level headings too big. The good news is that CSS allows you control the appearance of headings with the font-size xref, font-weight xref, and margin xref properties.

Using More Than One Typeface on a Page

A common design technique in practically all textual media is to use one style of type for body copy, and another style for headings — for example, setting a newspaper article in Times or Palatino, while setting its title in Helvetica or Univers. The CSS font-family property xref and @font-face rule syntax xref allow you to do the same thing on your pages.

Lists

ul and ol

English name Closing tag Required attributes Type Notable Requirements
Unordered / ordered list Required None Flow/block (list)
  • Must only contain list item (li) elements xref (which in turn are more flexible) and whitespace

We constantly encounter lists: to-do lists, shopping lists, feature lists, Top Ten lists… so lists were an obvious feature when Tim Berners-Lee started to create the technologies that we now call the web.

Web browsers support three explicit types of lists, of which two — unordered and ordered lists — are under discussion here. The only differences between these two are their tags (ul and ol) and the markers that are displayed when you use one or the other (bullets as opposed to numerals or letters).

Navigation links in HTML4.01 pages are often marked up within lists, which can be skipped or ignored by assistive technology.

Attributes (HTML4.01 only)

### Choosing the Correct List Type

Instinct usually offers the right judgement of the type of list that ought to be used in a particular situation. The best thing to remember is that when an order is clearly meant, an ordered list should be used.

Markers and Margins

This author often uses CSS rules similar to what follows:

ul { padding-left: .618em; list-style-type: none; }
li { text-indent: -.618em; }

The default browser style typically left-justifies list item content and right-justifies list markers, both to a common margin.

Many browsers set the default padding-left value of lists to an absolute rather than proportional value, so lists set with an especially large or small font-size value might require some tweaking in this regard.

List Items

li

English name Closing tag Required attributes Type Notable Requirements
List item Optional None Flow/block (list item)
  • Must only have a ul or ol element as an immediate parent
  • Must only have other li elements for siblings

List items are simple at first glance but don’t always stay that way, because lots of things can — and should — be drawn up in lists. Outlines are nested lists. Rules or guidelines of conduct or procedure often appear in lists, contain multiple paragraphs (or even sections), and might require headings. Site navigation is often presented in lists for accessibility reasons.

List items require flexibility, so the specifications treat them like page divisions and sections: pretty much anything goes with respect to their contents.

Attributes

Nesting Lists

To create a nested list, put a new list inside a list item, like this:

<ul>
  <li>Berries
    <ul><li>Blackberries</li><li>Strawberries</li><li>Raspberries</li></ul>
  </li>
  <li>Orchard fruit
    <ul><li>Apples</li><li>Pears</li><li>Plums</li></ul>
  </li>
</ul>

I’ve collapsed my carriage returns here, but it might be possible to set it differently in production.

The outermost list will have top and bottom margins as usual, but the nested lists will not.

The markup pattern shown above can recurse as many times as needed; this author has created his share of lists nested six and seven levels deep.

Images

img

English name Closing tag Required attributes Type Notable Requirements
Image Forbidden
  • src
  • alt
Embedded/replaced
  • alt must be present, but its value should be left empty (i.e., alt="") if the image cannot be assigned a meaningful text description

Like most of the other elements introduced in this section, the img element is pretty simple if you want it that way: reference a valid image URL with the src attribute, and the browser will insert the image it finds at that location onto the page.

Attributes

Current web browsers all support images encoded in the PNG (Portable Network Graphics), GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group), and SVG (Scalable Vector Graphics) formats. The filenames of images encoded in these formats typically end in .png, .gif, .jpg, and .svg respectively.

Things to Remember About Images

Inline Frames

iframe

English name Closing tag Required attributes Type Notable Requirements
Inline frame Required
  • src
  • width
  • height
Embedded/replaced
  • CSS, JavaScript, and hypertext links cannot interact with iframe content from a different domain than the site that publishes the iframe itself

The iframe element lays out like images in practice, you won’t often see iframe elements containing pages that are served from the same site that serves the element itself. However, there are a lot of pages with inline frames in them, because they make excellent containers for third-party content like advertising and social media buttons.

Attributes

This list omits several attributes that are either too new to be supported broadly, too esoteric to justify inclusion in this book, or supplanted by CSS properties.

Using Inline Frames

Inline frames can be used to break many of the assumptions under which web browsers work, but they have one outstanding feature: they can be used to take content from Site ”B” — often an advertisement or a video — for secure display in the visual context of Site ”A”, presumably yours.

The most obvious purpose of an iframe is to create a single instance of a persistent site feature for repetition throughout the site, but there are other ways to do this that don’t violate any of the assumptions under which web browsers operate xref.

Emphasis and Strong Emphasis

em

English name Closing tag Required attributes Type Notable Requirements
Emphasis Required None Phrasing/Inline None

The em element conveys emphasis of a word, phrase, or sentence. In visual (screen, print) media, this usually takes the form of italic or oblique (skewed-clockwise) text. Where present emphasis is especially valuable to assistive technology users, who will instantly know the difference between emphasis and text that’s italicized for other reasons.

Underlined text can also suggest emphasis, but this should be avoided since underlines are traditionally used to identify hypertext links.

strong

English name Closing tag Required attributes Type Notable Requirements
Strong emphasis Required None Phrasing/inline None

As its long-form name suggests, the strong element conveys even stronger emphasis than the em element. The typical visual styling for this element is bold text.

strong elements should be preferred to b elements where appropriate, for the same reasons that em should be preferred to i.

Full capitalization offers another popular way to convey strong emphasis in text is full capitalization, but this should also be avoided, since long stretches of all-caps are harder to read than mixed-case text.

Other practical styling possibilities for all forms of emphasis are increased size and increased contrast, which are controlled with the font-size, color, and background-color CSS properties.

Small text and Spans

small

English name Closing tag Required attributes Type Notable Requirements
Small text Required None Phrasing/inline None

There are elements to provide emphasis, but what about de-emphasis, like spoken comments that would be made sotto voce? This voice is best taken up with the small element, and like its emphasized cousins, its default styles can be replaced with styles that reduce contrast rather than size.

This author is deluged with a stream of consciousness that tends to overrun its banks, so a visit to the product site for this book will probably uncover a few examples of this usage.

span

English name Closing tag Required attributes Type Notable Requirements
Generic span Required None (but class is likely) Phrasing/inline None

Like its counterpart div xref, span is a generic element most often used to attach JavaScript hooks or CSS selectors to a particular stretch of content, or spot on the page.

Another use for span is to avoid anonymous elements. Consider something like:

<div class="photo-with-caption"><img src="photo1.jpg" width="192" height="144" 
alt="A smiling face.">Supporters greet the candidate at the airport.</div>

This use of markup is considered a best practice in HTML4.01, but presents enough problems that the figure/img/figcaption complex xref was specified for HTML5. The text content of the example is rendered in a separate element, but that element is never exposed to CSS or JavaScript. Why allow that, when you can put an element of your own in there?