SITERAW

Organize your text with HTML

Ok, so the blank page is nice and all but your website isn't likely to be very successful if you leave things as they are.

The first step to "fill" your site is to give it some content. The easiest and most common way being by writing text inside the <body> tag we mentioned last chapter.

We'll see that having your HTML page display textual content is in fact very simple as HTML allows you to arrange whatever type of text you can imagine.

In this chapter, you'll learn:

  • how to structure your text in paragraphs
  • how to organize your page with different titles
  • how to emphasize and highlight certain words
  • how to insert different kinds of lists

Let's start building our website.

Paragraphs

You want to add text to your web page but don't know how?

In HTML, things are rather simple: text content is placed within paragraphs.

Paragraphs are delineated by the <p> tag (p is for paragraph).

<p>This is my paragraph.</p>

As you can see, <p> is a paired tag.

  • <p> indicates the beginning of the paragraph
  • </p> marks the end of the paragraph

Paragraphs go in the <body> section of your HTML page, which as we learned last chapter is reserved for the visible elements destined to be rendered (as opposed to the invisible ones which go in the <head>).

All that's left to do is take the code of our demo page and add a paragraph.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SiteRaw</title>
    </head>

    <body>

        <p>Welcome to SiteRaw.</p>

    </body>
</html>

Try it and see the result for yourself.

Feel free to modify the text as you wish. You can even add another paragraph following the first one, there are no limits as to their number in an HTML page.

In fact, let's try it out.

Copy and paste the following code in your text editor.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SiteRaw</title>
    </head>

    <body>

        <p>This is my first paragraph.</p>

        <p>This is my second paragraph.
	Read it well!</p>

    </body>
</html>

It's not Homeric poetry, but it's pretty good nonetheless.

But... in the second paragraph it's supposed to go to a new line... instead everything is on the same line! It doesn't work!

I see what you mean.

You were probably expecting to see something to the extent of:

This is my second paragraph.
Read it well!

Instead you got:

This is my second paragraph. Read it well!

It's perfectly normal.

We need to tell the browser that we want a new line. In HTML, line breaks work a bit differently than you're used to.

Line breaks in HTML

If you've commonly used word processors such as Microsoft Word in the past, you're already familiar with line breaks.

A line break, also called carriage-return, is simply an indication to start a new line.

It's not as pronounced as a paragraph, it simply marks the end of a line and the start of a new one.

In most word processors, to create a new line you simply hit the Enter key.

Obviously things aren't so simple in HTML as you've just experienced.

To mark a line break in HTML you simply use the <br /> tag.

It's a standalone tag, meaning there is no closing tag and it doesn't hold any content.

Going back to our example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SiteRaw</title>
    </head>

    <body>

        <p>This is my first paragraph.</p>

        <p>This is my second paragraph.<br />
	Read it well!</p>

    </body>
</html>

Now everything works perfectly.

Understood?

  • <p> and </p> tags are for paragraphs.
  • the <br /> tag is for line breaks.

Since we finally got our paragraphs to work as we wanted, let's add some titles.

Titles

Once we start adding more content to our web page, things might get a little difficult to read.

Titles are useful to organize your text in distinct segments.

And with HTML, we're quite lucky... we have not one but six different choices of title tags.

Don't be scared by the number, all these tags follow the same rules and in fact they can be grouped in one big supra-tag: <hX>, where X is a number between 1 and 6.

Why six tags?

They are used to indicate the level of importance of a title.

Here is how they work:

  • <h1> means "very important title". Usually there is only one per page although this is just convention.
  • <h2> means "important title".
  • <h3> means "somewhat important title".
  • <h4> means "somewhat lesser title".
  • <h5> means "lesser title".
  • <h6> means "least important title".

You don't need to use every single level of title on each web page.

I recommend you start with <h1>. Then, if you need to make a sub-title, use one or more <h2> tags. If you need sub-sub-titles, use <h3> and so on.

But I thought we already had a title tag in HTML.

True.

Last chapter we introduced the <title> tag, which goes in the <head> portion of your code.

These tags are actually called headers (h is for header).

You also said there was a header tag already!

Look, I didn't invent these names.

Just don't confuse the following:

  • <head> is the header tag, as opposed to the body tag (<body>). These two go in the <html> tag.
  • <title> is the title of your web page, it goes in the header (<head>, see above).
  • <h1> to <h6> are called whatever you want. Some call them titles, others call them headers, some even call them "h" tags. They go in the body (<body>) of your web page.

Nomenclature isn't that important.

What is critical is that you don't confuse them and start using one in place of the other.

Let's try adding these tags to our demo page.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SiteRaw</title>
    </head>

    <body>

    	<h1>Welcome to SiteRaw</h1>

        <p>The best site on the interwebz.</p>

        <h2>Free tutorials for beginners</h2>

        <p>This is my second paragraph.</p>

        <p>(ok I ran out of ideas... try to do better)</p>

    </body>
</html>

This is how things should look in your text editor.

HTML page with titles
HTML page with titles

Try it out.

Now we have something that's beginning to look like a real web page.

You might have noticed that the render of <h1> tags in the browser is larger than that of <h2> tags, which in turn is larger than <h3> and so on. Don't choose your title tags based on the size of the rendered text. These title tags are important for hierarchical structure, aesthetic display is secondary and can be modified using CSS (we will see how further on in this tutorial). It's entirely possible to make <h3> titles larger than <h1> in CSS, but the order of importance can't be changed.

Highlights

We saw how to structure our web page in paragraphs and organize it using titles.

But what about putting emphasis on some words or sentences within a paragraph?

The HTML language provides you with many ways of highlighting parts of your text.

Emphasis

Adding emphasis to your text is very easy to do in HTML.

All you need is to enclose the text you want to put emphasis on inside the emphasis tag: <em>.

Here is an example of how emphasis works:

<p>Welcome to <em>SiteRaw</em>, the best website ever!</p>

And the result:

Welcome to SiteRaw, the best website ever!

As you can see, the emphasized text is now written in italics.

This is simply something the browser does to make the text stand out. You will be able to modify it later using CSS.

Strong emphasis

The emphasis tag is too weak for your taste? You want something really brutal?

Good for you, there is another tag to indicate emphasis on your text called the strong emphasis tag.

Just like with regular emphasis, all you need is to enclose your selected text within the strong emphasis tag: <strong>.

Here is our example:

<p>Welcome to <strong>SiteRaw</strong>, the best website ever!</p>

And the result:

Welcome to SiteRaw, the best website ever!

Once again you can see that the browser took the liberty of rendering your emphasized text in bold to make it stand out.

It's a default behavior that is easily modified in CSS.

Is there any difference between emphasis with the <em> tag and strong emphasis with the <strong> tag?

Honestly, no.

They are completely interchangeable and serve the exact same purpose.

While the official position is that one is "strong" emphasis and the other is "regular" emphasis, apparently no one has taken the time to define what either of those two adjectives mean.

Use whichever you want, or both.

Mark highlights

There is a third way to highlight text in HTML.

The marked text tag is used to make an extract stand out from the rest of your text. It can be used to highlight relevant text in a list of search results for example.

Its application is identical to the two previous tags, just remember to used the marked text tag: <mark>.

For example:

<p>Welcome to <mark>SiteRaw</mark>, the best website ever!</p>

And the result:

Welcome to SiteRaw, the best website ever!

By default, the text is highlighted in yellow.

This is once again completely adjustable so don't worry too much about the visual effects.

Rare but sometimes useful tags

There are few additional tags that you won't use very often to say the least, but that might prove practical at some point or another. Maybe.

You don't have to remember these, just think of this section as a bonus.

  • Inserted text: Use the <ins> tag (gives inserted text by default).
  • Deleted text: Use the <del> tag (gives deleted text by default).
  • Keyboard input: Use the <kbd> tag (gives keyboard input by default).
  • Quotes: Use the <q> tag (gives quotes by default).
  • Code: Use the <code> tag (gives code by default).
  • Superscript: Use the <sup> tag (gives superscript by default).
  • Subscript: Use the <sub> tag (gives subscript by default).
  • Small print: Use the <small> tag (gives small by default).

Good luck finding use for all of them.

HTML for content, CSS for style

It bears repeating that <strong>, <em> and <mark> are not formatting tags.

Many beginners see these tags and say to themselves: "Great! Now I know how to bolden, italicize and mark my text in HTML". This is a common mistake, made by by beginners and long time web developers alike.

Every tag in HTML has a meaning beyond its cosmetic appearance. In fact, HTML is not used for appearance at all.

If you want bold, italic, underline, over-line (yes, it's a thing), pink blinking text or whatever else you can imagine, wait until we learn CSS.

You can even make the <em> tag bold and the <strong> tag italic if you want.

The golden rule of web development is as follows: HTML for the content, CSS for the style.

List tags

You thought this chapter was over?

Think again, we still have one more HTML constituent to cover: the list element.

HTML lists are very common and extremely practical when it comes to organizing information in a readible way.

I will introduce two types of lists:

  • bulleted lists, also called unordered lists
  • numbered lists, also called ordered lists

We will start with bulleted lists, the most common occurrence.

Bulleted lists

You've probably seen many bulleted lists already, not least in this chapter.

Here is what bulleted lists looks like:

  • Welcome
  • to
  • SiteRaw

This is a practical system as it allows you to create a list of items absent of hierarchical order, as opposed to the numbered list which we'll present further on.

These lists are very easy to create in HTML, the only point you need to remember is that you need two HTML tags to create such a list.

Why two? You'll understand in a moment.

When we visualize a list, we think of one unique element.

Instead, consider that there are two components to a list: the list itself and each individual item.

In HTML, you need to instruct the browser where the list starts and ends as well as where each bullet point starts and ends.

So here are the two tags you need:

  • <ul> indicates where the list starts and ends (stands for Unordered List)
  • <li> indicates where each item starts and ends (stands for List Item)

The <li> tags are naturally place inside the <ul> tag.

Here is the HTML code for the example I gave above.

<ul>
    <li>Welcome</li>
    <li>to</li>
    <li>SiteRaw</li>
</ul>

You can add as many items as you want.

You can even create bulleted lists within other bulleted lists. These are called nested lists.

All you have to do is open a new list (with <ul>) within an item from the first list (<li>).

Here is a demonstration.

<ul>
    <li>SiteRaw</li>
    <li>is
        <ul>
            <li>awesome</li>
            <li>a website</li>
            <li>SiteRaw (no s...)</li>
        </ul>
    </li>
</ul>

This code gives you:

  • SiteRaw
  • is
    • awesome
    • a website
    • SiteRaw (no s...)

Just remember to close the tags in the right order.

Every HTML element has a default display value, most of the time either block or inline. With the notable exception of the <p> tag (for paragraphs), every tag we saw up until now is an inline element. The <ul> tag (for unordered lists) however is a block element. In summary, a block element starts on a new line and always takes up the full width available, whereas an inline element doesn't require a new line and only takes up as much width as necessary. Since both <p> and <ul> are both block elements, you don't need to include your lists inside paragraphs.

Numbered lists

The second type of list we will discover is the numbered list.

Though slightly less prevalent than bulleted lists, they are nonetheless used quite often in HTML pages.

Here is what they look like:

  1. Welcome
  2. to
  3. SiteRaw

Numbered lists work in the exact same way as bulleted lists.

The only difference is that you have to indicate in your code that you want an ordered list (<ol>) rather than an unordered list (<ul>).

Nothing changes within the list: we still use <li> to delineate the beginning and end of an item.

The order in which you place your items is important. The first entry will correspond to item number one, the second to item number two and so on.

Here is the code of our example:

<ol>
    <li>Welcome</li>
    <li>to</li>
    <li>SiteRaw</li>
</ol>

As you can see, the only difference between the bulleted list and the numbered list is the HTML tag used to insert them.

  • <ul> is for bulleted lists (Unordered List)
  • <ol> is for numbered lists (Ordered List)
  • <li> is for each entry, independent of the type of list used (List Item)

Now that you know how to create paragraphs, insert line breaks, incorporate titles, add highlights and manipulate lists, let's try updating our demo page with our newfound knowledge.

Here is our complete HTML code.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SiteRaw</title>
    </head>

    <body>

    	<h1>Welcome to SiteRaw</h1>

        <p>The <strong>best site</strong> on the interwebz.</p>

        <h2>Why is SiteRaw so awesome?</h2>

        <p>Here are a few reasons:</p>

        <ul>
    		<li>because it's SiteRaw</li>
   		<li>because it's awesome</li>
    		<li>because reasons</li>
	</ul>

    </body>
</html>

This is just my demonstration, you can of course use whatever tags you want from those we just learned.

And feel free to amend the nonsensical text to make it more relevant to your website.

Here is what you should get in your text editor.

Our updated HTML page
Our updated HTML page

As you can see, the list tags are placed either before, between or after the paragraphs, not inside. That has to do with the default display behavior of <p> and <ul>/<ol>, both behind block elements as opposed to inline elements such as <strong>.

This chapter covered a lot of new HTML tags and your web page should now start to take form.

But it's not a real website yet as there is still something missing.

Keep reading and we'll find out what in the next chapter.

< Summary >