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.
a
ElementEnglish name | Closing tag | Required attributes | Type | Notable Requirements | Anchor | Required | href (in practice) |
Phrasing/inline |
|
---|
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.
onclick
event handler should be used if the link is to open in a new tab or window.
hreflang
attribute, advises about the characteristics of the link’s destination — in this case, with respect to MIME type.
type
advises about the destination’s MIME type, this attribute advises about its intended medium, for example print
or screen
.
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.
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, div
s 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
.
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 |
|
---|
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.
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.
p
English name | Closing tag | Required attributes | Type | Notable Requirements | Paragraph | Optional | None | Flow/block |
|
---|
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.
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; }
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.
h1
… h6
English name | Closing tag | Required attributes | Type | Notable Requirements | Heading (level 1–6) | Required | None | Flow/Block (heading) |
|
---|
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.
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.
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.
ul
and ol
English name | Closing tag | Required attributes | Type | Notable Requirements | Unordered / ordered list | Required | None | Flow/block (list) |
|
---|
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.
1
, I
, i
, A
, and a
. The list-style-type
CSS property xref should be preferred whenever possible.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.
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.
li
English name | Closing tag | Required attributes | Type | Notable Requirements | List item | Optional | None | Flow/block (list item) |
|
---|
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.
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.
img
English name | Closing tag | Required attributes | Type | Notable Requirements | Image | Forbidden |
|
Embedded/replaced |
|
---|
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.
http://
or data:
URL
width
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.
alt
value in its
place.width
and height
values should
be provided as integers (representing pixels) to avoid undesirable layout
effects.img
element should be used for unambiguous content,
and design accents relegated to CSS background-image
attributes.data
-URL encoded PNGs can conserve network
resources, thus reducing page render time. data
-URL encoding
is discussed in the Advanced Topics.iframe
English name | Closing tag | Required attributes | Type | Notable Requirements | Inline frame | Required |
|
Embedded/replaced |
|
---|
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.
target
values indentical to the value set on this attribute
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.
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.
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
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?