This chapter takes a close look at tags, the fundamental building blocks of HTML. It covers how they work, some exceptions to the normal way they work, and a brief discussion on tag attributes.
Structure of Tags
Generally, matching pairs of tags surround the section of text which they affect. Two matching pairs of tags, along with the content they enclose, are called an “element.”
This element begins and ends with the "strong" tag.
The opening tag can contain additional attributes which provide more information about the contents of the tag and how to display them. These attributes are written as name–value pairs, separated by an equals (
= ) sign, with the value placed in quotes.
<a href="http://example.com">This is a link. The tag is an "a" for "anchor," and the href (hyper reference) attribute specifies where the link is pointing.
A few tags do not occur in matching pairs, because they are used to insert something, rather than describe text. These are called “empty” or “void” tags, and the most common one is the one used for inserting an image. The
src attribute is used to specify the URL of the image.
<img src="http://media.whoishostingthis.com/2/v60/images/wiht-logo.png" />
Notice there is no closing tag, and therefore no enclosed text. The slash right before the final angle bracket (
/> )is used to “self-close” the tag. This is not absolutely required, but it is a good reminder that whatever follows will not be enclosed.
There are several other empty tags. Two are fairly straight forward and common.
inserts a line-break.
inserts a horizontal rule (line) separator.
Others do not insert something visual, but are used to provide information about the page itself.
<link rel="stylesheet" type="text/css" href="theme.css" /> <meta name="description" content="Title of this page." />
(More information on
tags will be provided later in this guide.)
Block-level vs. inline
With the exception of tags that provide information about the document itself, HTML tags fall into two categories, block and inline.
Block elements represent rectangular blocks of content. They have an implied line break before and after. Block elements include sectional content like paragraphs (
), divisions (
It is standard practice to type most block-level tags on individual lines above and below their content:
This is a div.
However, this is not always done, especially with headlines:
This is the title of a page This is a major section Some content in a paragraph.
Block-level elements can be nested, but some block-level elements can not contain other block-level elements:
Title of an article First paragraph of article.
Paragraphs and headlines cannot contain other block-level elements.
Inline elements are sometimes called “span-level” elements. There is also a generic span-level elements, simply called a span (
). This doesn’t do a whole lot by itself, but can be used to create customized types of text-display, through the use of elements.
<span class="special-text">This text is special.
(See the chapter on CSS for information on how to make
class="special-text" display in a special format.)………continue……in next..