Layout in HTML Document

Farlando Diengdoh 15 Mar 2015

Layout

The basic structure of any HTML document is like the above outlined picture. You have a header, a navigation bar, a place to put contents, a sidebar and a footer section. If you check any website, you’ll find all the above basic structure. Now, HTML will help you build the structure, but the positioning of the structures done with CSS (before the advent of CSS tables are used to position the different blocks). Here I’ll show you the complete setup of the HTML document.

<!DOCTYPE html>
<html>
<head>
    <title>HTML Document</title>
</head>

<body>
    <div id="header">
        <h1>Header</h1>
    </div>
    <div id="navigation">
        <h2>Navigation</h2>
    </div>
    <div id="contents">
        <h2>Contents</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ante neque, eleifend et dapibus vel,
            vestibulum vel est. Etiam rutrum lorem nibh, at consectetur augue placerat sit amet. Nunc lobortis
            venenatis libero, a volutpat tortor consequat at. Sed eget suscipit orci, rhoncus ultrices lorem.
            Morbi non est nulla. Morbi mollis, orci a malesuada suscipit, mauris lorem laoreet neque, non lacinia
            urna metus id diam. Vestibulum vel ex tincidunt, blandit tellus euismod, convallis turpis. Interdum et
            malesuada fames ac ante ipsum primis in faucibus. Sed posuere egestas eros molestie vehicula. Vestibulum
            a dolor tortor. Donec in sem id tellus posuere rhoncus. Sed eros augue, hendrerit vitae felis eget,
            mattis convallis libero. Suspendisse non condimentum massa. Phasellus pretium dapibus magna, sed elementum
            dolor fringilla eget.</p>
        <p>Cras in semper risus. Duis at congue nunc. Duis quis arcu cursus, bibendum felis commodo,
            aliquet justo. Nullam a augue turpis. Proin vel massa eget turpis efficitur aliquam. Interdum et
            malesuada fames ac ante ipsum primis in faucibus. Vivamus sagittis elit erat, a porta est pharetra non.
            Vivamus enim enim, pellentesque vitae ornare ac, fringilla faucibus magna. Nulla in est vitae justo
            tempor maximus ut a lectus.</p>
    </div>
    <div id="sidebar">
        <h2>Sidebar</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ante neque, eleifend
            et dapibus vel, vestibulum vel est. Etiam rutrum lorem nibh, at consectetur augue placerat sit amet.
            Nunc lobortis venenatis libero, a volutpat tortor consequat at. Sed eget suscipit orci, rhoncus
            ultrices lorem. Morbi non est nulla. Morbi mollis, orci a malesuada suscipit, mauris lorem laoreet
            neque, non lacinia urna metus id diam. Vestibulum vel ex tincidunt, blandit tellus euismod, convallis
            turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed posuere egestas eros molestie
            vehicula. Vestibulum a dolor tortor. Donec in sem id tellus posuere rhoncus. Sed eros augue, hendrerit
            vitae felis eget, mattis convallis libero. Suspendisse non condimentum massa. Phasellus pretium
            dapibus magna, sed elementum dolor fringilla eget.</p>
    </div>
    <div id="footer">
        <h2>Footer</h2>
    </div>
</body>
</html>

Here you’ll see each div was given a unique id attribute. Each attribute can be understood to the different section/blocks of the document. This is just a bare structure of the document. When you open this document in your browser this is what it’ll look like:

Layout

What you’ll notice in the above code is a new line at the very beginning. The start of any HTML document is always with a document type declaration (DTD). Modern browser will check this first and then interpret the document base on the DTD. This declaration define the type of document you’re writing. Since the first HTML language, there has been many iterations and now the current version is known as HTML 5. The more notable version is HTML 4 and XHTML and each has either the strict, transitional or frameset. Hence it is required to declare at the beginning which document you’re going to use. The above declaration is for the most current one – HTML 5. For example other declarations are as follows:

For HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

For XHTML 1.0

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

So far I’ve discussed elements that are common to all version of HTML. In the next tutorial, we’ll see some new elements that are present only in HTML 5.

Post Label(s): Web Design HTML