Introducing the concept of HTML tags and elements

You might be used to using the bold element to make text bold, but it is a physical
element that only amends the look of text rather than also conveying semantic meaning.
Logical elements, such as strong, convey meaning and add styling to text and are
therefore preferred. These will be covered in Chapter 3.Note that the strong tags are nested within the paragraph tags (<p></p>), not the other
way around. That’s because the paragraph is the parent element to which formatting is
being applied. The paragraph could be made bold and italic by adding another element,
emphasis (<em></em>), as follows:
<p><strong><em>Here is a paragraph.</em></strong></p>
In this case, the strong and em tags could be in the opposite order, as they’re at the same
level in the hierarchy. However, you must always close nested tags in the reverse order to
that in which they’re opened, as shown in the previous code block, otherwise some
browsers may not display your work as intended. For instance, the following should be
avoided:
<p><strong><em>Here is a paragraph.</strong></em></p>
As previously mentioned, it’s good practice to close tags in HTML—even though it’s not a
requirement for all elements, being sloppy in this area can lead to errors. Take a look at
the following:
<p><strong><em>Here is a paragraph.</strong></p>
Here, the emphasis element isn’t closed, meaning subsequent text-based content on the
page is likely to be displayed in italics—so take care to close all your tags.HTML documents are text files that contain tags, which are used to mark up HTML elements.

These documents are usually saved with the .html file extension, although some

prefer .htm, which is a holdover from DOS file name limitations, which restricted you to

eight characters for the file name and three for the extension.

The aforementioned tags are what web browsers use to display pages, and assuming the

browser is well behaved (most modern ones are), the display should conform to standards

as laid out by the World Wide Web Consortium (W3C), the organization that develops

guidelines and specifications for many web technologies.

HTML tags are surrounded by angle brackets—for instance, <p> is a paragraph start tag. It’s

good practice to close tags once the element content or intended display effect concludes,

and this is done with an end tag. End tags are identical to the opening start tags,

but with an added forward slash: /. A complete HTML element looks like this:

<p>Here is a paragraph.</p>

This element consists of the following:

Start tag: <p>

Content: Here is a paragraph.

End tag: </p>

Nesting tags

There are many occasions when tags must be placed inside each other; this process is

called nesting. One reason for nesting is to apply basic styles to text-based elements.

Earlier, you saw the code for a paragraph element. We can now make the text bold by surrounding

the element content with a strong element:

<p><strong>Here is a paragraph.</strong></p>

HTML doesn’t have a hard-and-fast rule regarding the case of tags, unlike XHTML,

which we’ll shortly be talking about and which will be used throughout the book. If

you look at the source code of HTML pages on the Web, you may see lowercase tags,

uppercase tags or, in the case of pages put together over a period of time, a mixture

of the two. That said, it’s still good practice with any markup language to be consistent,

regardless of whether the rules are more flexible.

The W3C website is found at www.w3.org. The site offers numerous useful tools,

including validation services against which you can check your web pages.