At the end of the previous chapter we introduced the <p> (paragraph) element. It can, of course, be repeated for multiple paragraphs, and that means you can write an essay - a very bland-looking essay with no obvious sections or title (other than the unprintable one on the browser window), supplemental information (images or spreadsheets), or links to other essays or source material. Well let's start adding those in.
Headings[]
HTML5 has elements to represent six levels of titles, called headings (so we won't get them confused with the document's title - the one on the browser window). Each one's name contains two characters: 'h' and a number between 1 and 6, with lower numbers producing larger titles. For example:
<!DOCTYPE html>
<html>
<head>
<title>Titled Document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
</head>
<body>
<h3>Headings are cool.</h3>
<p>Don't you agree?</p>
<h4>They're not as cool as links, though.</h4>
<p>Without links, we would be copying URLs
from pages and pasting them into our address
bars all the time. Bleh.</p>
</body>
</html>
|
Headings are cool.Don't you agree? They're not as cool as links, though.Without links, we would be copying URLs from pages and pasting them into our address bars all the time. Bleh. |
Emphasis and text-formatting[]
As a language for interoperable documents, HTML isn't particularly concerned about formatting (which isn't really understood by programs), although it does have a few minor and overused elements for the purpose. In particular, HTML should never be used to underline something; use the CSS rule text-decoration: underline; instead.
To mark something as important (such as a warning label), wrap it in <strong> tags; to make it bold just to draw attention to it (such as a term essential to the containing article), you can apply the CSS property font-weight to a descriptive class or id.
To annotate a "defining instance of a term" (not a definition but the instance accompanied by it - probably the first), use <dfn>; if it's a quote, use <q>; to emphasize it as if applying vocal stress, use <em>. If it should be italic because it's special, such as words in a foreign language, or a taxonomy, try applying the CSS rule font-style: italic; to a descriptive class or id.