In the last lesson, we saw how to create your first Web page and how to add raw text. Today, I’ll teach you how to properly organize and style your text (ie following Web standards and SEO) best practices.

Here is the code that we’re going to use:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Woobzine. Webdesign and Wordpress for Noobs</title>

<meta http-equiv="content-type" content= "text/html; charset=utf-8" />

</head>

<body>

This is the content of my first Web page, and my first step on the path of Web Design.

</body>

</html>

Organizing the text with paragraphs

Let’s try to add paragraph as we would do with a common word-processor software:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Woobzine. Webdesign and Wordpress for Noobs</title>

<meta http-equiv="content-type" content= "text/html; charset=utf-8" />

</head>

<body>

This is the content of my first Web page, and my first step on the path of Web Design.

I’m trying to write more than one paragraph.

It shouldn’t be too difficult, right?

</body>

</html>

Copy-paste this code in a new index.html file, then view it with your usual Web browser. As you can see, inserting blank lines is not enough to create paragraph in (X)HTML.

In fact, each paragraph needs to be created with its own <p> tag.

(Please note that we won’t write the whole code anymore but only what’s inside the <body> tag.) So, here is the code you have to write to create three different paragraphs:

<p>This is the content of my first Web page, and my first step on the path of Web Design.</p>

<p>I’m trying to write more than one paragraph.</p>

<p>It shouldn’t be too difficult, right?</p>

Save the changes in your index.html file and view the new result with you Web browser (reminder: Firefox is the best browser for Web designers). As you can see, the paragraphs are clearly displayed:

paragraph

Adding Titles <h1>, <h2>, <h3>

Now that our paragraphs are fine, it’s time to add titles with the <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> tags.

Presentation of the title tags

These tags precise the title importance and its place inside the content hierarchy:

<h1>
    <h2>
        <h3>
            …
    <h2>
        <h3>
            <h4>
                …
        <h3>
            <h4>
                …

Another way to explain this hierarchy:

headings

As you can see, the <h1> title is the most important, then come <h2>, <h3>, until <h6> which is the least important.

How to put titles in the code

Let’s use the paragraphs we already created and give them a main title:

<h1>Styling your text</h1>

<p>This is the content of my first Web page, and my first step on the path of Web Design.</p>

<p>I’m trying to write more than one paragraph.</p>

<p>It shouldn’t be too difficult, right?</p>

Here is the result:

bigtitle

It’s a good start! Now we can add secondary titles <h2>. Moreover, in order to improve code legibility we can add tabs inside:

<h1>Styling your text</h1>

    <h2>Paragraphs</h2>

        <p>This is the content of my first Web page, and my first step on the path of Web Design.</p>

        <p>I’m trying to write more than one paragraph.</p>

        <p>It shouldn’t be too difficult, right?</p>

    <h2>Titles</h2>

        <p>Titles are crucial for SEO.</p>

        <p>They are important for accessibility and legibility too.</p>

Here is what we get:

titles

Conclusion

You’ve just learnt how to organize your text, how to structure it with paragraphs and titles. It’s essential to respect content hierarchy, that’ll make your site more accessible and more optimized for search engines (such as Google).

If you encounter any difficulties with this lesson you can download this file. It contains the index.html file with the final source code.

And don’t forget, if you have any question or problem, I’m always here to help!