HTML and CSS Reference
In-Depth Information
one
body
element. Each of those elements has its own child elements. he
title
and
style
elements are the children of the
head
element, and the heading and
paragraph elements (
h1
and
p
) are children of the
body
element.
HTML has sensible rules for which elements can be nested inside other
elements. Headings, for example, cannot be nested inside paragraphs.
HTML elements are not allowed to overlap. For instance, if we had the fol-
lowing two elements inside the body element in the preceding example
<h1>
Welcome Page
<p>
Hello World Wide Web
</p>
</h1>
the web page would be considered invalid. It might still display correctly in
a chosen browser, because the browser might be smart enough to ix things
when it inds an error. However, it is still bad HTML because some amount
of semantic meaning is lost and because such uncorrected errors will cause
problems for people who work with the code going forward.
Example 2.2 adds a little more complexity to the Hello World code. It also
introduces some additional HTML concepts before we get into the speciics of
the language. Figure 2.2 shows how this code appears in a typical web browser.
Example 2.2: A slightly more complex “Hello World” page
<!DOCTYPE html>
<html>
<head>
<title>
Example 2.2
</title>
<style>
h1 { text-align: center; }
.intro-text { font: 12pt sans-serif; }
</style>
</head>
<body>
<h1>
Hello World Wide Web
</h1>
<p class="intro-text">
Welcome to first of many webpages.
<br/>
<em>
I promise
</em>
they will get more interesting than this.
</p>
</body>
</html>
