Lesson 2

Basic HTML

This lesson provides a basic introduction to the most common HTML tags. If you are already familiar with HTML and are reading this book primarily to learn about HTML5, you could choose to skip the next two lessons, although each lesson does include material that is specific to HTML5.

In the previous lesson, you created an HTML template. In this lesson, you will start adding content to the body of this template using some of the most common HTML tags.

Structuring Text

You will begin by examining the ways you can structure text in a web page. HTML originally started life as a means of sharing research papers; thus, text formatting has always been an important part of HTML.

Begin by opening the template.html file created in the previous chapter. Replace the body of the web page, as shown in the following markup:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
    <h1>This is a top level heading</h1>
    <h2>This is a second level heading</h2>
    <h3>This is a third level heading</h3>
</body>
</html>

The body now contains three separate header elements. If you open this in Chrome, it should look like Figure 2.1.

image

Figure 2.1

Notice that the h1 element's text is displayed in a larger font than the h2 element. As it happens, this has nothing to do with the HTML specification; this is simply the default style provided by the web browser, just ...

Get HTML5, JavaScript, and jQuery 24-Hour Trainer now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.