HTML and CSS Reference
In-Depth Information
Tags in HTML are surrounded by angle brackets (
<
and
>
) to clearly distinguish them from ordinary text.
The first angle bracket (
<
) marks the beginning of the tag, immediately followed by the specific tag name,
and the tag ends with an opposing angle bracket (
>
). For example, this is the HTML tag that begins a
paragraph:
<p>
We've written the tag name in lowercase, but you can use uppercase (
<P>
) if you prefer. Tag names are
not case-sensitive in HTML, but they must be lowercase in XHTML (that's one of those more stringent
rules that separates XHTML from HTML). Whereas XHTML demands lowercase for all tags and attributes,
HTML5 isn't so picky, and doesn't draw any distinction between a
<p>
and a
<P>
so it's entirely up to you
whether your tags are uppercase or lowercase.
Most tags come in matched pairs: one
start tag
(also called an
opening tag
) to mark the beginning of a
portion of content and one
end tag
(also called a
closing tag
) to mark its end. For example, the beginning
of a paragraph is marked by the start tag,
<p>
, and the paragraph ends with a
</p>
end tag; the slash
after the opening bracket is what distinguishes it as an end tag. A complete (if short) paragraph would be
marked up like this:
<p>Hello, world!</p>
These twin tags and everything between them form a complete
element
, and elements are the basic
building blocks of an HTML document.
A few elements don't require an end tag in select circumstances. For example, if certain elements are
immediately followed by certain other elements, the start tag for the following element implies the end of
the previous element, so that previous element's end tag may be optional, depending on the elements in
play. This is true in HTML5, as it was in HTML 4 and earlier, but not in XHTML: XHTML requires an end
tag for
all
elements. Even in HTML5, it's not a bad idea to include end tags, if only because it can be hard
to remember which elements allow tag omission in which cases. When in doubt, close your elements.
We'll include end tags on all the elements in markup examples you see in this topic… almost all, that is.
Some tags indicate
void elements
(also called
empty elements
), which are elements that do not, and in
fact cannot, hold any contents. Void elements don't require a closing tag because there's nothing to
enclose; a single tag represents the complete element. In XHTML, which strictly requires end tags for all
elements, these void elements are “self-closed” with a trailing slash at the end of the tag. For example, the
br
element represents a line break that forces the text that follows it to wrap to a new line on the rendered
page. It's a void element that can't hold any content, so in XHTML it would be self-closed like so:
<br/>
Trailing slashes to end void elements are valid in HTML5, but they're not required. The choice is yours.
Some void elements are also known as
replaced elements
; the element itself isn't actually rendered by a
graphical browser but is instead replaced by some other content. The most common example is the
img
element, which occurs in the document to mark where an image should appear on the rendered page.
When the browser renders the document, the image file replaces the
img
element. You'll learn all about
using images and other media in Chapter 5.
