• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

You can get support and mentoring from a private teacher via videoconference on this course.

Got it!

Last updated on 11/12/18

Organizing your text

Log in or subscribe for free to enjoy all this course has to offer!

Well, the blank page is nice but if you leave it like that your website isn't likely to be very successful.

In this chapter, we're going to find out about quite a few HTML tags. Some tags have been around since the very first version of HTML, while others have been introduced more recently in HTML5.

In this chapter, we're going to successively see:

  • how to type paragraphs;

  • how to organize the page with titles;

  • how to highlight certain words in your text;

  • how to organize information in the form of lists.

Are you ready? Then let's go. You'll see, it's not complicated.

Paragraphs

The text in a web page is usually typed in paragraphs. In the HTML language, the<p>tag is used to delimit paragraphs.

<p>Hello and welcome to my site!</p>
  • <p>means "Start of paragraph";

  • </p>means "End of paragraph";

As I told you in the previous chapter, we type the website content between the<body></body>tags. We thus just have to put our paragraph between these two tags and we'll finally have our first real web page with text!

I'll thus take exactly the same code as in the previous chapter and add it to my paragraph:

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

<body>
<p>Hello and welcome to my site!</p>
</body>
</html>

Try it, you'll see the result!
Ok, it's not yet Nirvana but it's a good start.

But let's not stop while things are going so well. We're now going to see something that is a bit special in HTML: the line feed. It sounds simple, yet it doesn't really work like in an ordinary word processor...

Creating a new line

In HTML, if you press the Enter key, a new line is not created in the way you're used to. So try this code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Line break tests</title>
</head>

<body>
<p>Hello and welcome to my website!
This is my first test so please make allowances; I'm gradually learning how it works.
For the time being it's a bit empty, but come back in 2 or 3 days once I've learned a few more things and I can assure you that you'll be surprised!</p>
</body>
</html>

All the text is displayed on the same line even though there's a line break in the code!! Hitting the Enter key frantically in the text editor thus services strictly no purpose.

As you'd expect, however, there is indeed a way to start a new line HTML.

In fact, if you want to type a second paragraph, you just use a second<p>tag. In the end, your HTML code should thus be filled with paragraph tags!

An example:

<html>
<head>
<meta charset="utf-8" />
<title>Paragraphs</title>
</head>

<body>
<p>Hello and welcome to my site!
This is my first test so please make allowances; I'm gradually learning how it works.</p>

<p>For the time being it's a bit empty, but come back in 2 or 3 days once I've learned a few more things and I can assure you that you'll be surprised!</p>
</body>
</html>

The result is shown in the next figure.

Two paragraphs with 2 <p> tags
Two paragraphs with 2 <p> tags

Yes, but what if I just want to go to the next line in a paragraph starting a new line?

Well, guess what? There is a tag called "Line break"!
It's an orphan tag that is just used to indicate a line break:<br />. You have to place it within a paragraph.

Here's how to use it in a code:

<html>
<head>
<meta charset="utf-8" />
<title>Line breaks</title>
</head>

<body>
<p>Hello and welcome to my website!<br />
This is my first test so please make allowances; I'm gradually learning how it works.</p>

<p>For the time being it's a bit empty, but come back in 2 or 3 days once I've learned a few more things and I can assure you that you'll be surprised!</p>
</body>
</html>

So have you understood?

  • <p> </p>: to organize your text into paragraphs;

  • <br />: to make a line break.

Now we know how to type paragraphs, let's see how to create titles.

Titles

Once the content of your page includes several paragraphs, it's going to be difficult for your visitors to find their way round. This is where titles become useful.

In HTML, you're spoilt for choice, you can use six different levels of titles. By that, I mean you can say "This is a very important title", "This is a title somewhat less important," "This is a title even less important", etc. You thus have six different title tags:

  • <h1> </h1>: means "very important title". In general, it is used to display the page title at the start of the page.

  • <h2> </h2>: means "important title".

  • <h3> </h3>: likewise, this means a title somewhat less important (you can say "sub-title" if you want).

  • <h4> </h4>: title even less important.

  • <h5> </h5>: title that is not important.

  • <h6> </h6>: title really not very important at all.

Do not be taken aback by all these tags. Indeed, six levels of titles is a lot. In practice, I personally only use the<h1>,<h2>and<h3>tags, and very rarely the others (I don't often need six different levels of titles). Your browser displays the very important title in very large characters, the somewhat less import title in somewhat less large characters, etc.

Try to create a web page with titles to see what how it looks:

<html>
<head>
<meta charset="utf-8" />
<title>Title levels</title>
</head>

<body>
<h1>Very important title</h1>
<h2>Important title</h2>
<h3>Somewhat less important title (sub-title)</h3>

<h4>Not very important title</h4>
<h5>Not important title</h5>
<h6>Title that is really not important at all</h6>
</body>
</html>

OK, I'll give you an example of how to use titles in a web page (you'll see that I don't use all the tags):

<html>
<head>
<meta charset="utf-8" />
<title>Presentation of my website</title>
</head>

<body>
<h1>Welcome to the my website!</h1>

<p>Hello and welcome to my website: SdZ.<br /> What is the SdZ website?</p>

<h2>Training courses for beginners</h2>

<p>The SdZ website provides training courses (tutorials) for beginners: no knowledge is required to read these courses!</p>

<p>You can thus learn, without knowing anything about it before, how to create a website, and program and build 3D environments!</p>

<h2>An active community</h2>

<p>You have a problem or something in the course you don't understand? You need help in creating your website?<br /> Visit the forums! You'll find that you're not alone in this and you'll certainly find someone who will kindly help solve your problem.</p>
</body>
</html>

Here's is a web page that's taking shape!

Yes, but I want to center my title, write it in red and underline it!

We'll do all that when we learn CSS (in the second part of the course). I'd point out that<h1>does not mean "Times New Roman, size 16 pt", but "Important title".

Using the CSS language, you can say "I want my important titles to be centered, in red and underlined". For the time being, we're just structuring our page in HTML. We're writing the content before enjoying ourselves formatting it.

Highlighting

Some words in your paragraphs are sometimes more important than others and you want to make them stand out. HTML provides various ways of highlighting the text of your page.

Emphasizing

To emphasize your text, you have to use the<em> </em>tag.
It is very simple to use: all you need to do is enclose the words to be emphasized between these tags! I'll reuse the example of a little while ago and emphasize a few words:

<html>
<head>
<meta charset="utf-8" />
<title>Emphasizing</title>
</head>

<body>
<p>Hello and welcome to my website!<br />
This is my first test so please <em>make allowances</em>,I'm gradually learning how it works.</p>
</body>
</html>

As you can see, using the<em>tag has the effect of placing the text in italics. In fact, it's the browser that chooses how to display the words. We tell it that the words are fairly important and, to emphasize this information, it changes the text appearance by using italics.

Strongly emphasizing

To strongly emphasize a text, you use the<strong>tag meaning "strong emphasis" or "important" if you prefer. It is used in exactly the same way as<em>:

<html>
<head>
<meta charset="utf-8" />
<title>Forte emphase</title>
</head>

<body>
<p>Hello and welcome to my website!<br />
This is my first test so please <strong>make allowances</strong>, I'm gradually learning how it works.</p>
</body>
</html>

You'll no doubt see the text appear in bold. There again, bold is a only a consequence. The browser has chosen to display the important words in bold to make them stand out more.

The<strong>tag does not mean "bold" but "important." You can decide later, in CSS, to display the "important" words in a way other than bold if you want.

Marking text

The<mark>tag is used to visually highlight a portion of text. The extract is not necessarily considered to be important but you want to make it stand out from the rest of the text. This can be useful to highlight relevant text after searching on your website for example.

<html>
<head>
<meta charset="utf-8" />
<title>Marking text</title>
</head>

<body>
<p>Hello and welcome to my website!<br />
This is my first test so please <mark>make allowances</mark>, I'm gradually learning how it works.</p>
</body>
</html>

As default,<mark>has the effect of highlighting the text. We can change the display in CSS (decide to highlight in another colour, box the text, etc.). It's the same principle as what I told you about for the previous tags: they indicate the meaning of words and not how they should be displayed.

Don't forget: HTML for the content, CSS for the style

It may sound like I'm labouring the point but it is very important to understand this properly as beginners often make the same big mistake at this stage. They see<em>,<strong>,<mark>tags… and say to themselves: "Great, I now know how to italicize, bolden and underline text in HTML!".

And yet... this is not that what these tags are used for! I know, I know, you're going to say to me "Yes, but when I use<strong>, the text appears in bold, so they must be used to bolden". Even so, it's a mistake to believe that this tag is used to do that.

The purpose of the tags is to indicate the meaning of the text. Thus,<strong>tells the computer "This text is important." That's all.
And to show that the text is important, the computer decides put it in bold (but it could equally well write it in red!). Although most browsers display important text in bold, nothing requires them to do so.

I don't understand. What's the point of the computer knowing that a text is important?
It's not smart enough to understand!

Think again! Many programs analyze the source code of web pages, and not the least search engine robots. These robots trawl the Web reading the HTML code of all sites. This is the case of the Google and Bing robots, for example. As they see it, "important" key words tend to have more value so if someone does a search on these words, they are more likely to come across your website.
This, of course is only a rough explanation and you shouldn't run away with the idea that unrestrained use of the<strong>tag is somehow going improve your search ranking. You just need to trust computers: they understand what an "important" text means and can use this information.

So how do you specifically bolden a text, or write it in red, and everything?

All that is done in CSS. Remember:

  • HTML defines the content (logic content of items);

  • CSS defines the style (appearance).

We'll see the CSS later; for the time being, we'll focus on HTML and its tags, which each have a special meaning.

Lists

Lists often allow us to better organize our text and order our information.
We are going to find out about two types of lists here:

  • unordered lists or bullet lists;

  • ordered lists or numbered lists.

Unordered list

An unordered list looks like this:

  • Strawberries

  • Raspberries

  • Cherries

It is a system that allows us to create a list of items without any notion of order (there's no "first" or "last"). Creating an unordered list is very simple. Just use the<ul>tag closed a bit further on with</ul>.
So start by entering this:

<ul></ul>

And now, here's what we're going to do: we're going to write each item in the list between two tags<li></li>. Each of these tags must be located<ul>and</ul>. You'll understand this straight away with this example:

<ul>
<li>Strawberries</li>
 <li>Raspberries</li> 
<li>Cherries</li>
</ul>

The result is shown in the next figure.

An unordered list
An unordered list

Note that the list has to be placed inside<body></body>. To keep the page code readable, I won't include all of it from now on.

So remember these two tags:

  • <ul></ul>delimits the whole list;

  • <li></li>defines an item in the list (a bullet).

You can include as many items as you want in the bulleted list, not just three.

So now you know how to create a bulleted list! Not that hard once you understand how to nest tags.

Ordered list

An ordered list works the same way; only one tag changes: you have to replace<ul></ul>by<ol></ol>..
Within the list, you don't change anything: you always used<li></li>tags to delimit the items.

As it is particularly intuitive, I'll let you admire the simplicity of this example (result shown in the figure below):

<h1>My day</h1>
 
<ol>
<li>I get up.</li>
<li>I eat and drink.</li>
<li>I go back to bed.</li>
</ol>
An ordered list
An ordered list

Compared to the previous example, all we had to change is thus the tag<ol>.

Summing up

  • HTML has many tags that allow us to organize the text of our page. These tags provide indications such as "This is a paragraph", "This is a title", etc.

  • Paragraphs are defined by the<p> </p>tag and line breaks by the<br />tag.

  • There are six levels of titles, from<h1> </h1>to<h6> </h6>, which are used according to the title importance.

  • You can highlight certain words with the<strong>,<em>and<mark>tags.

  • To create lists, you have to use the<ul>tag (unordered bulleted list) or the<ol>tag (ordered list). Inside the list, items are inserted using a<li>tag for each item.

Example of certificate of achievement
Example of certificate of achievement