$type=slider$count=4$ico=1$cate=0$rm=0$sn=0$cm=0$show=home

Layout in HTML Document


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 of HTML document without styles

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.

COMMENTS

3/random/post-list
Name

blog,7,chemistry,7,css,1,feature,8,html,5,java-script,2,php-mysql,3,solved-qp,4,spectroscopy,3,technology,4,videos,3,web-design,13,
ltr
item
F Diengdoh.com: Layout in HTML Document
Layout in HTML Document
he 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 an
https://1.bp.blogspot.com/-8w4cLcxURKY/XvXs7nWNxRI/AAAAAAAARW0/2dcbb9_Rs9MKYw4h7QROlKaziodRdE4rgCK4BGAsYHg/w640-h360/layout.jpg
https://1.bp.blogspot.com/-8w4cLcxURKY/XvXs7nWNxRI/AAAAAAAARW0/2dcbb9_Rs9MKYw4h7QROlKaziodRdE4rgCK4BGAsYHg/s72-w640-c-h360/layout.jpg
F Diengdoh.com
https://www.fdiengdoh.com/2020/06/layout-in-html-document.html
https://www.fdiengdoh.com/
https://www.fdiengdoh.com/
https://www.fdiengdoh.com/2020/06/layout-in-html-document.html
true
6372396504026100368
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content