HTML and CSS Reference
In-Depth Information
chapter
three
Creating the Page Templates
IN THIS CHAPTER,
you are going to continue to work on the page templates that you have been creating in
Chapters 1 and 2. You will learn about several new HTML elements, such as heading elements, links, and lists. Once
you are comfortable with these new elements, you will use them to complete your page templates, ready for adding
the content, which you'll do in Chapter 4.
Adding a Logo
In this section, you learn about HTML heading elements and how they differ from the standard text in your web
pages. Once you have grasped the concept of headings, you will use one to create the logo for your page templates.
Understanding Headings
Just as you use different levels of headings in a book to help you understand the structure of the content, in HTML,
you can use the
<h1>
,
<h2>
,
<h3>
,
<h4>
,
<h5>
, and
<h6>
elements to mark up headings and signify their relative
importance on the page. The number in the element name represents the rank of the heading element, with 1 being the
highest rank and 6 the lowest. Heading elements with the same tag have equal rank. For example, you could mark up
the title of a topic as follows:
<h1>Venture Deals</h1>
<h2>Be Smarter Than Your Lawyer and Venture Capitalist</h2>
You use the
<h1>
element for the main title of the topic and the
<h2>
element for the subtitle, signifying their re-
spective importance.
Headings also create implied subsections of the content, just as you would use a subheading to indicate the start of a
new section if you were writing an essay. In HTML, all content that appears after a heading is interpreted as being re-
lated to that heading. This creates a content hierarchy (sometimes referred to as the
document outline
). The following
code is an example of a short piece of text that uses headings to define sections.
<h1>HTML5 Rocks</h1>
<p>
HTML5 is the latest version of the Hypertext Markup Language.
It includes loads of cool stuff like Video and Audio elements.
</p>
<h2>The Video Element</h2>
<p>
The video element allows developers to embed videos within web
pages without the need for third-party plug-ins like Flash.
</p>
<h2>The Audio Element</h2>
<p>
Similar to the video element, the audio element also allows
