Guide to Layout in HTML5 Containing Element

Basics of HTML 5 - Part 19

Foreword: In this part of the series, we look at a Guide to Layout in HTML5 Containing Element.

By: Chrysanthus Date Published: 4 Apr 2015

Introduction

This is part 19 of my series, Basics of HTML 5. I assume you have read the previous parts of the series before arriving here; this is a continuation. In this part of the series, we look at a Guide to Layout in HTML5 Containing Element.

Partitioning
A containing block is a containing element. A containing element is an element that can house other HTML elements. Normally you would partition your web page body element. In side each partition you have to place small HTML elements. Each partition can be a major section element. I will give you a partition layout template toward the end of this tutorial.

Examples of Containing Elements
Examples of containing elements are the body, div, section and form elements. So far as this article is concerned, the most important containing element is the section element. Note: the List elements (UL, OL and DL) are also containing (grouping) elements (block-level elements); however they receive special HTML elements (LI, DT, DD) accordingly.

Layout in a Section Block
A section block is a section element. Below, I guide you on how to place your elements in a partition (section element).

Right element for the right purpose
Use the right element for the right purpose. Use a Radio Input Element when you want a Radio Input and not a checkbox. Use a Paragraph element when you want a Paragraph and not some other element. Use an unordered list (ul) element when you have an unordered list and do not use hyphens with line break elements, instead. Use ordered list (ol) when you want numbering of items (lines of text) and nothing else.

Paragraphs
The shortest sentence (even just a short one line of text) goes into a paragraph element. If you have many sentences for a paragraph, then, of course, use one paragraph for the sentences; that is the traditional use of the paragraph element. In a nav element, if you want the hyperlinks to appear vertically, then place one hyperlink in one paragraph.

Avoid Use of the Line break Element
Use the line break element (<br>) only when necessary. If you have a very short line of text to type, do not type it and then type the line break element twice. In that way you will be forcing out a paragraph, when all you have to do is just to use a paragraph element (for the short line of text). So use a paragraph element when you have the need to type the line break element twice.

The span Element
If in a long line of text, you want to give the text a particular look, place the text (phrase) in a span element. Use the style attribute of the span element or CSS to give the look. You can get more on CSS in my CSS3 course.

Floating
You can float an image to the extreme left of the section element or extreme right of the section element, using the CSS float property as we saw in one of the previous parts of the series.

Title of Web page
It is good to make the title of your web site (home page) an H1 element instead of an image element. The Search Engine companies would prefer, you have it as an H1 element instead of an image.

The Logo
A logo is an Image that identifies your company. A logo for a web site is not obligatory but it will give an image identity of your company, to your customers. Place your logo in the header element and you can also make the logo the icon of the web page.

Partitioning your Web Page
When HTML was new, partitioning was done with frames (see later). In the past (recent past) partitioning has been done with div elements. If you cannot partition the page with div elements, then use frames (see later).

I now give you a web page layout template you can use to design your own web pages. To use the template, replace the element contents and attribute values with your own. First display the page layout template in a browser to appreciate, what element will go where.

This is the code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Web Page Layout Template</title>
</head>
<body>

<div style="position:relative;left:10%;width:80%">
    <header>
    <h1 style= "text-align:center">H1 Heading</h1>
        <img src="imgurl" alt="Image Logo" style="float:left"><p style="text-align:center">Important and Necessary links. Logo</p>
    </header>

    <nav style="display:inline;float:left">
        <h3>Navigation</h3>
        <p><a href="url1">Hyperlink 1</a></p>
        <p><a href="url2">Hyperlink 2</a></p>
        <p><a href="url3">Hyperlink 3</a></p>
        <p><a href="url4">Hyperlink 4</a></p>
        <p>Other hyperlinks ...</p>
    </nav>

    <figure style="display:inline;float:right">
        <img src="URL" alt="Image to illustrate text"><br>
        <figcaption>Fig. img. caption</figcaption>
    </figure>

    <p>Main Paragraphs or Section</p>

    <section>
        <h2>H2 Heading</h2>
        <p>paragraphs and sections</p>
        <p>paragraphs and sections</p>
        <p>paragraphs and sections</p>
        <p>paragraphs and sections</p>
        <p>paragraphs and sections</p>
        <p>paragraphs and sections</p>
    </section>

    <footer>
        <p>Copyright and necessary but not so important hyperlinks</p>
    </footer>
</div>

</body>
</html>

If you do not have an image, then omit the whole figure element from the code.

Coding Errors
It is possible that when typing an HTML5 element, you might forget an open or close angle bracket; you might omit a closing quote for an attribute value; you might type something where it is not supposed to be; you might type something wrongly; or commit some other error. Whenever an error is committed, the browser will either not display the element or elements concerned, or it will display scrambled text, or depending on the error, it would give a wrong layout of the elements typed around the error.

To solve error problems, as you are designing your web page, be testing (opening) it with your browser. In that way, as soon as an error occurs, you will notice it.

One more part of the series is remaining. In that last part we shall talk about uploading the web pages of your web site, from your home, office or even Cyber Caf�, to the server. The server may be in your country or some other country.

See you at the next part.

Chrys

Broad Network

Related Articles

Guide to Layout in HTML5 Containing Element

Basics of HTML 5 - Part 19

Introduction

Related Links

Comments