Basics of HTML5 Elements

Basics of HTML 5 - Part 2

Foreword: In this part of the series, I explain what HTML elements are and how you code (type) them.

By: Chrysanthus Date Published: 3 Apr 2015

Introduction

This is part 2 of my series, HTML5 Basics. In this part of the series, I explain what HTML elements are and how you code (type) them. Elements are tags and their contents, as you will see below. I assume you have read the previous part of the series, before reaching here; because this is a continuation. The titles (links) of the different parts of the series are given at the end of this tutorial.

Two Main Parts of HTML Document
There are two main parts of an HTML document. The first part is the Head, and the second part is the Body. Let us look at the simple HTML web page again. Here is the code:

<!DOCTYPE HTML>
<html>
    <head>
        <title>
            Simple
        </title>
    </head>
    <body>
        Hello World!
    </body>
</html>

The head part is enclosed in the tags, <head> </head>. The body part is enclosed in the tags, <body> </body>. Anything you have for the HTML document goes either in between the body tags or in between the head tags.

The body element consists of the body tags and what goes in between its tags. The head element consists of the head tags and what goes in between its tags.

Look at the code above again and you will notice that there is the start title tag and the end title tag. What goes in between these tags appear at the title bar of the browser (or at the tab of the web page), when the page having the title element is displayed. The title element consists of the title tags and what goes in between its tags. In the title tag, you type the text for the title of the web page (document).

Element Content
Only tags that occur in pairs have contents. The Element Content is what goes in between the pair of tags. A single tag element (see later) is an element with one tag; and does not have content.

The content of the title element above is:

    Simple

You can also have a phrase as content for the title element.

The content of the head element above is:

        <title>
            Simple
        </title>

The content of the body element above is:

        Hello World!

So many elements would go into the body element (see later). Whatever, you see at your browser is in the body element. With the exception of the title, all what is in the head element is not seen by the user at the browser. The head element has information on what is useful for the web page document and not for the user who views the web page.

Code Wrapping
Look at the simple web page code above again. You can type the first line like this,

<!DOCTYPE HTML>

as it is in the code already, or like this,

<!DOCTYPE
HTML>

Note that the second typed tag here, is in two lines on the page. Actually, you can type any tag in several lines, as long as you do not break a word. However, it is always advisable to have your tag in one line. If your tag is very long, more than the width of the text editor, the text editor will wrap it into the next line, without breaking a word in the tag. That is OK.

Avoid forcing parts of a tag into the next line yourself when you type HTML code, by pressing the Enter Key at the right end of a line (text editor). Allow the text editor to do the wrapping. Note: it is the content or characteristic of tags that you see at the browser (screen); a tag itself cannot be seen on the browser.

Display of Text by Browser
Above, we have talked about the way tags can be typed. Let us talk about the typing of text as content, in the Body element. All we had in the simple web page code above was “Hello World!”. Text can actually be much longer than this. Imagine that you type the following text as content for the Body element:

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Assume that while typing the above text, you did not press the Enter key, at the end of any of the lines. One browser can display all this text in two lines, another browser will display it in three lines while another will display it in four lines. The way a browser wraps such a text is dependent on the particular browser and the resolution (see later) of your computer screen. Note: here we are talking about wrapping of text as body content, not wrapping of tags (code) in the text editor.

Forcing a Line Break
Assume that you type the following two lines in your text editor as Body content, pressing the Enter Key of the keyboard at the end of the first line:

test test test test test test test test test test test
test test test test test test test test test test test

Well, pressing the Enter Key like this has no effect at the browser. The browser will display the above text similar to:

test test test test test test test test test test test test test test test test test test test test test test

The browser does not respect the Enter Key you pressed just after typing the first line. However, you can still have the browser force the rest of a line to the next line. You achieve this with the line break element. The line break element is a single tag element. This is it:

<br>

It begins with an opened angle bracket, followed by the text, “br”, and then the closing angle bracket. To force the second half of the above line to the next line, use the line break element as follows:

test test test test test test test test test test test<br> test test test test test test test test test test test

With the line break element, the browser will display the above long line as follows:

test test test test test test test test test test test
test test test test test test test test test test test

So, to force the rest of a line into the next line, type the <br> tag at the point of the text, where you want the long line to break. The browser will break the line. Pressing the Enter Key in the text editor will not break the line for you. <br> is an example of a single tag element.

Elements without Content
A double tag element can have content. The content goes in between its tags. A single tag element does not take content. However its effect can be seen on the browser. The line break element, for example, breaks a line.

Space in Body Text
Consider the following text:

Hello    World!

There are four spaces between the word “Hello” and “World!”. Assume that you type this in the text editor; the browser will display the following:

Hello World!

If you type more than one space in the Body element in the text editor, the browser will reduce all the spaces to one. There is a way of overcoming this problem; you will see that later.

You should know this about spaces:

You type a space with the spacebar key of the keyboard.
If you do not type a space, the browser does not display any space.
If you type one space, the browser displays only one space.
If you type more than one space, the browser still displays only one space.

Typing Tag Pairs
When you have a pair of tags to type, you can type the pair on one line in your text editor or on two lines. The following two sets of tags are equivalent:

    <head><title>Simple</title></head>

is equivalent to,

    <head>
        <title>
            Simple
        </title>
    </head>

Headings
As you write a document, the document has headings. You can have a main heading, which is like the title of the page; within the page you would have sub headings. The thing to note here is that headings are of different sizes. There are six HTML elements for this. The tags for these elements are:

<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>

Each heading has a start tag and an end tag. The above tag pairs do not have contents. The same tags are written below with contents:

<h1>Biggest Heading</h1>
<h2>Bigger Heading</h2>
<h3>Big Heading</h3>
<h4>Small Heading</h4>
<h5>Smaller Heading</h5>
<h6>Smallest Heading</h6>

These elements are called the Heading elements: you have the h1 element, the h2 element, right down to the h6 element. The content of each of these elements is displayed on screen (browser). h1 gives the greatest display, h2 is next in size (smaller); it goes like that with the smallest display obtained from h6. To try the above code, just put it into the body element of the simple web page code as follows:

<!DOCTYPE HTML>
<html>
    <head>
        <title>
            Simple
        </title>
    </head>
    <body>
        <h1>Biggest Heading</h1>
        <h2>Bigger Heading</h2>
        <h3>Big Heading</h3>
        <h4>Small Heading</h4>
        <h5>Smaller Heading</h5>
        <h6>Smallest Heading</h6>
        Hello World!
    </body>
</html>

Save the text editor file with a name having the extension, “.htm” or “.html”. Open the directory (folder) in which you save the file and double-click it. The file will open as a web page in your default browser (Mozilla Firefox 31). Remember that your browser should already be installed in your computer.

Any other piece of code can be tried in the same way (place it in the body element).

At the browser, each heading occupies one horizontal line space from the left end of the browser, to the right end of the browser.

The Paragraph Element
A paragraph is defined in HTML as text preceded by a blank horizontal line and followed by another blank horizontal line. We have three paragraphs below:

I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you.

I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you.

I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you.

In HTML, you do not have indentation at the beginning of a paragraph. The paragraph element uses a pair of tags. This is it:

                <p> </p>

All end tags have just after the opened angle bracket, a forward slash. So, each of the above paragraphs should be typed in a text editor (in the body element) as follows:

        <p>
I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you. I love you.
        </p>

You begin each paragraph with the tag, <p> and end with the tag, </p> Because of this pair of tags, the browser would precede your text in the paragraph with a blank line and end it with another blank line.

Of course, the paragraph element normally goes into the body element (in your text editor).

Text Behavior in a Paragraph
In HTML, a Paragraph element, “<p> </p>” is just like a small body element (<body> </body>). Like the body element, text in a paragraph is wrapped only by the browser. While typing your paragraph text in your text editor, pressing the Enter Key of the keyboard, has no effect at the browser. The browser will not respect your pressing of the Enter Key and so will not create the new line you wanted. To have a new line in a paragraph, use the line break element, like in

<p>This is a<br> paragraph with<br> line breaks.</p>

The above paragraph appears in the browser as follows:

This is a
paragraph with
line breaks.

The Horizontal Rule
If you want a horizontal line to run across your web page from the left edge of the browser to the right edge, use what is known as the hr element. The hr element is a single tag element. This is it:

               <hr>

It is similar to the line break element. Put it anywhere in your body element, and you would have a horizontal line at the browser at the position (vertical) at which you put the tag (in the text editor).

The mark Element
The mark element is used to highlight text. You use it to highlight a word or phrase or sentence or text beginning from one line to another line. The mark element is a double tag element. You place the start tag, <mark> at the beginning of where you want the highlight to start and then you place the end tag, </mark> where you want the highlight to end. Read and try the following code that illustrates this for the “I am the one” phrase.

<!DOCTYPE HTML>
<html>
    <head><title>Simple Document</title></head>
    <body>
        text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <mark>I am the one</mark> text text text text text text text text text text text text text text text text text text text text text text  text text text text text text text text text text text text  text text text text text text text text text text text text text text text text text text text text text text text
    </body>
</html>

Comments
There are many HTML elements. Your web page code might have many of these and you would not know the exact purpose a tag pair or single tag is serving. HTML gives you a way of adding a comment next to a tag. Actually, HTML offers a single tag element you can use for your comment. In practice, you can place the comment (tag) anywhere in the body element, but not inside another tag code. This is the comment tag:

              

where “comment” in the tag is your comment. Example;

             <hr />
             

The browser does not display the comment. A comment is to remind you of a decision you took, or why you used a particular tag. A comment tag begins with the opened angle bracket, followed immediately by an exclamation sign, then two dashes, then your comment, then two dashes and finally a closing angle bracket.

Useful Tip
When you type HTML text, you can never be certain, how the text would appear at the user’s browser. Users have different browsers, sometimes of the same company but of different versions. Each browser wraps text in its own way depending on its characteristics and its screen resolution (see later). So, never try to format text in your text editor, by adding empty lines (pressing Enter Key) and spaces.

Conclusion
We have seen some important elements of HTML. These are elements that a person learning HTML for the first time has to know. There are many other elements, with varying degree of importance. You will see a good number of these. By the time we finish this series, you will be able to design simple good web pages.

Time to take a break! We continue in the next part of the series.

Chrys

Broad Network

Related Articles

Basics of HTML5 Elements

Basics of HTML 5 - Part 2

Introduction

Related Links

Comments