Some HTML 5 Elements

HTML5 Basics - Part 3

Forward: In this part of the series, I treat important HTML5 elements.

By: Chrysanthus Date Published: 21 Jul 2012

Introduction

This is part 3 of my series, HTML5 Basics. Remember: you can try all the code in this series. In this part of the series, I treat important HTML5 elements.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

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 4.0 Beta 10). Remember that your browser should already be installed in your computer.

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

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

The hgroup Element
In a long web document full of text, you may have a heading for a number of consecutive portions. Below this heading you would have a smaller heading for the portion below. Below that smaller heading you would have yet the smallest heading for the portion immediately below. When headings occur together like that, you can group them with the hgroup element. The following code illustrates this:

<!DOCTYPE HTML>
<html>
    <head><title>Simple Document</title></head>
    <body>
        <h1>Page Heading</h1>
            Above is the main heading of the page.
            Some text here<br>
            Some text here<br>
            Some text here<br>
        <hgroup>
            <h3>Portion Heading</h3>
            <h4>Sub-Portion Heading</h4>
            <h5>Smallest Portion Heading</h5>
        </hgroup>
            Some text here<br>
            Some text here<br>
            Some text here<br>
    </body>
</html>

Try this code: replace the previous code with this one; save the file and double-click it. This is how you will be trying the rest of the code in this series.

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. 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 re-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. We shall see a good number of these. By the time we finish this series, you will be able to design good web pages.

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

Chrys

Broad Network

Some HTML 5 Elements

HTML5 Basics - Part 3

Introduction

Related Links

Comments