What Are the Two Main Parts of an HTML Document?

The two main parts of an HTML document are the head and the body. Each section contains specific information. The head section contains information that is useful to the Web browser and search engines but is not visible to the reader. The body section contains the information that you want the visitor to see. The document is specifically formatted so that Web browsers are able to parse the information and present it to the visitor correctly.

Structure of an HTML document

An HTML document must be formatted correctly to be read by a Web browser. The following is a general outline of a typical HTML document:

<!DOCTYPE> Information for Web browser and search engines Contents visible to reader

Both the tags and the tags are contained within the main tag. Both sections must be terminated with the "</>" characters for the document to be read.

Head Contents

The head section of the document contains the site's title, keywords for search engines, scripts and the location of a cascading style sheet that should be used in formatting the page. Typical HTML tags used in the head section include the , <link>, <style>, <meta> and <script> tags.</p> <p class="section-content">The <title> tag defines the title of the document. The <link> tag links an external resource, such as a CSS file, to the document. The <style> tag defines document styles. The <meta> tag is used to define the author, keywords and description of the document. The <script> tag defines a script that is to be run on the visitor's computer. If the head section is not placed in the document, the contents of the document are still displayed by the browser.</p> <h2 class="section-title">Body Contents</h2> <p class="section-content">The body section is used to format the actual Web page. Most of the HTML tags, such as the paragraph tag (<p class="section-content">), the anchor tag (<a>), the headings tags (<h1> to <h6>) and the section tag (<div>) are used in this section of the document. Server side scripts are also placed in this section of the document. If you do not have a body section in your HTML document, nothing is displayed in the Web browser.</p> <h2 class="section-title">DOCTYPE</h2> <p class="section-content">The only thing not included between the <html> tags is the DOCTYPE declaration. If used, it should be the first line in the HTML document. It is used to tell the Web browser what version of HTML the document is using. The browser uses this declaration to render the page correctly. The DOCTYPE declaration can be ommitted, but the browser may not present your page correctly.</p> </article> <div class="article-close"></div> <div id="mobile300x250_btf" class="module"></div><script type="text/javascript">(function(){var ads = {"mobile":"300x250_btf"};if ( isMobile() && ads.mobile ) {googletag.cmd.push(function() {googletag.display("mobile300x250_btf");});}})()</script> <div id="DMINSTR" type="adimpression" data-type="adTracking" name="&adunit_id=5706684770&ad_unit_type=CNT&ad_unit_network=GAS&revenue_basis=CPC&ad_position=C1&revenue_tag=pub-0316265116163263"> <div id="google-article-block"> <script type="text/javascript"> if ( !isMobile() ) { google_ad_client = 'pub-0316265116163263'; google_ad_channel = '5706684770'; google_ad_output = 'js'; google_max_num_ads = '4'; google_ad_type = 'text'; google_image_size = '336x280'; google_url ='bottom'; google_label_text = 'Sponsored Links'; document.write('<scr' + 'ipt language="JavaScript" src="https://pagead2.googlesyndication.com/pagead/show_ads.js"></scr' + 'ipt>'); } </script> </div> </div> <div id="taboola-below-article-thumbnails"></div> <script type="text/javascript"> window._taboola = window._taboola || []; _taboola.push({ mode: 'thumbnails-a', container: 'taboola-below-article-thumbnails', placement: 'Below Article Thumbnails', target_type: 'mix' }); </script> <div class="fb-comments" data-href="https://www.techwalla.com/articles/what-are-the-two-main-parts-of-an-html-document" data-width="970" data-numposts="5"></div> </section> <aside class="right-rail"> <div id="desktop300x250_300x600_atf" class="module"></div><script type="text/javascript">(function(){var ads = {"desktop":"300x250_300x600_atf"};if ( !isMobile() && ads.desktop ) {googletag.cmd.push(function() {googletag.display("desktop300x250_300x600_atf");});}})()</script> <div class="section-heading-container"> <h2 class="section-heading">Related Articles</h2> </div> <div class="related-articles"> <article class="related-article related-article--around-the-home"> <a href="/12739963/netflix-finally-has-a-skip-intro-button" class="image"> <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://cmeimg-a.akamaihd.net/100/ppds/cd2c98a3-be3d-4072-a48a-7534af1c1ae4.png" data-srcset="https://cmeimg-a.akamaihd.net/100/ppds/cd2c98a3-be3d-4072-a48a-7534af1c1ae4.png 1x, https://cmeimg-a.akamaihd.net/220/ppds/cd2c98a3-be3d-4072-a48a-7534af1c1ae4.png 2x" alt="Netflix Finally Has a "Skip Intro" Button"> </a> <div class="info"> <h2 class="title"> <a href="/12739963/netflix-finally-has-a-skip-intro-button" title="Netflix Finally Has a "Skip Intro" Button">Netflix Finally Has a "Skip Intro" Button</a> </h2> <div class="category"> <a href="/around-the-home">Around The Home</a> </div> <div class="subcategory"> <a href="/productivity">Productivity</a> </div> <div class="author"><span class="author-by">By: </span>Jill Layton</div> </div> </article> <article class="related-article related-article--around-the-home"> <a href="/12000037/hot-mics-not-your-dads-desktop-microphones" class="image"> <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://cmeimg-a.akamaihd.net/100/ppds/16c7ebdf-4704-4ec8-8c24-5c256d65c214.jpg" data-srcset="https://cmeimg-a.akamaihd.net/100/ppds/16c7ebdf-4704-4ec8-8c24-5c256d65c214.jpg 1x, https://cmeimg-a.akamaihd.net/220/ppds/16c7ebdf-4704-4ec8-8c24-5c256d65c214.jpg 2x" alt="Hot Mics: Not Your Dad's Desktop Microphones"> </a> <div class="info"> <h2 class="title"> <a href="/12000037/hot-mics-not-your-dads-desktop-microphones" title="Hot Mics: Not Your Dad's Desktop Microphones">Hot Mics: Not Your Dad's Desktop Microphones</a> </h2> <div class="category"> <a href="/around-the-home">Around The Home</a> </div> <div class="subcategory"> <a href="/productivity">Productivity</a> </div> <div class="author"><span class="author-by">By: </span>David Isaac</div> </div> </article> <article class="related-article related-article--around-the-home"> <a href="/articles/how-to-break-an-image-into-layers-in-photoshop" class="image"> <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://cmeimg-a.akamaihd.net/100/ppds/6ff4a2b2-e5ad-41b2-a092-c145f287e35f.png" data-srcset="https://cmeimg-a.akamaihd.net/100/ppds/6ff4a2b2-e5ad-41b2-a092-c145f287e35f.png 1x, https://cmeimg-a.akamaihd.net/220/ppds/6ff4a2b2-e5ad-41b2-a092-c145f287e35f.png 2x" alt="How to Break an Image Into Layers in Photoshop"> </a> <div class="info"> <h2 class="title"> <a href="/articles/how-to-break-an-image-into-layers-in-photoshop" title="How to Break an Image Into Layers in Photoshop">How to Break an Image Into Layers in Photoshop</a> </h2> <div class="category"> <a href="/around-the-home">Around The Home</a> </div> <div class="subcategory"> <a href="/productivity">Productivity</a> </div> <div class="author"><span class="author-by">By: </span>David Weedmark</div> </div> </article> <article class="related-article related-article--around-the-home"> <a href="/articles/how-to-find-your-ip-address-for-the-kindle-fire-pocket" class="image"> <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://cmeimg-a.akamaihd.net/100/photos.demandstudios.com/getty/article/106/5/151366871.jpg" data-srcset="https://cmeimg-a.akamaihd.net/100/photos.demandstudios.com/getty/article/106/5/151366871.jpg 1x, https://cmeimg-a.akamaihd.net/220/photos.demandstudios.com/getty/article/106/5/151366871.jpg 2x" alt="How to Find Your IP Address for the Kindle Fire Pocket"> </a> <div class="info"> <h2 class="title"> <a href="/articles/how-to-find-your-ip-address-for-the-kindle-fire-pocket" title="How to Find Your IP Address for the Kindle Fire Pocket">How to Find Your IP Address for the Kindle Fire Pocket</a> </h2> <div class="category"> <a href="/around-the-home">Around The Home</a> </div> <div class="subcategory"> <a href="/productivity">Productivity</a> </div> <div class="author"><span class="author-by">By: </span>Nick Davis</div> </div> </article> <article class="related-article related-article--around-the-home"> <a href="/articles/laptop-hinge-problems" class="image"> <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://cmeimg-a.akamaihd.net/100/cpcd/upload/1000/300/80/9/311389.jpg" data-srcset="https://cmeimg-a.akamaihd.net/100/cpcd/upload/1000/300/80/9/311389.jpg 1x, https://cmeimg-a.akamaihd.net/220/cpcd/upload/1000/300/80/9/311389.jpg 2x" alt="Laptop Hinge Problems"> </a> <div class="info"> <h2 class="title"> <a href="/articles/laptop-hinge-problems" title="Laptop Hinge Problems">Laptop Hinge Problems</a> </h2> <div class="category"> <a href="/around-the-home">Around The Home</a> </div> <div class="subcategory"> <a href="/productivity">Productivity</a> </div> <div class="author"><span class="author-by">By: </span>Mike Arneson</div> </div> </article> <article class="related-article related-article--around-the-home"> <a href="/articles/how-to-determine-ssl-protocol-version" class="image"> <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://cmeimg-a.akamaihd.net/100/photos.demandstudios.com/getty/article/77/187/87695558.jpg" data-srcset="https://cmeimg-a.akamaihd.net/100/photos.demandstudios.com/getty/article/77/187/87695558.jpg 1x, https://cmeimg-a.akamaihd.net/220/photos.demandstudios.com/getty/article/77/187/87695558.jpg 2x" alt="How to Determine SSL Protocol Version"> </a> <div class="info"> <h2 class="title"> <a href="/articles/how-to-determine-ssl-protocol-version" title="How to Determine SSL Protocol Version">How to Determine SSL Protocol Version</a> </h2> <div class="category"> <a href="/around-the-home">Around The Home</a> </div> <div class="subcategory"> <a href="/productivity">Productivity</a> </div> <div class="author"><span class="author-by">By: </span>John Smith</div> </div> </article> </div> <div id="desktop300x250_btf" class="module"></div><script type="text/javascript">(function(){var ads = {"desktop":"300x250_btf"};if ( !isMobile() && ads.desktop ) {googletag.cmd.push(function() {googletag.display("desktop300x250_btf");});}})()</script> </aside> </div> </div> <script type="text/javascript"> window._taboola = window._taboola || []; _taboola.push({flush: true}); </script> <script type="text/javascript"> window.addEventListener('scroll', function() { if (!window.hasPinterest) { var scriptTag = document.createElement('script'); scriptTag.src = '//assets.pinterest.com/js/pinit.js' scriptTag.setAttribute('data-pin-hover', 'true') scriptTag.setAttribute('data-pin-tall', 'true') scriptTag.setAttribute('data-pin-save', 'true') if (isMobile()) { scriptTag.setAttribute('data-ping-save', 'false') } var parent =document.getElementsByTagName('script')[0]; parent.parentNode.insertBefore(scriptTag, parent) window.hasPinterest = true; } }); </script> <div id="outofpage"><script type="text/javascript">googletag.cmd.push(function() { googletag.display("outofpage"); });</script></div> </main> <footer class="footer"> <div class="body-row black"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-12 col-lg-2"> <div id="bottomSocial"> <a data-event="facebook" target="_blank" href="https://www.facebook.com/pages/Techwalla/1116406528374498" class="social_facebook footer-social--facebook svg"></a> <a data-event="twitter" target="_blank" href="https://twitter.com/techwallahq" class="social_twitter footer-social--twitter svg"></a> </div> </div> <div class="col-xs-12 col-lg-7"> <div id="footer-menu"> <ul> <li><a href="/how-we-score">HOW WE SCORE</a></li> <li><a href="/about">ABOUT US</a></li> <li><a href="/about#contact">CONTACT US</a></li> <li><a href="/terms-of-use">TERMS</a></li> <li><a href="/privacy-policy">PRIVACY POLICY</a></li> <li><a href="/copyright-policy">COPYRIGHT POLICY</a></li> <li><a href="/advertise">Advertise</a></li> </ul> </div> </div> <div class="col-xs-12 col-md-12 col-lg-3"> <div class="newsletter"> <form class="tw-newsletter-footer"> <div class="input-group form-group newsletter-signup"> <input type="email" name="email" placeholder="Enter email for updates" class="form-control" required> <div type="submit" class="input-group-btn"><button class="btn newsletter-btn"><span class="footer-capture-submit svg"></span></button></div> <div class="message-invalid"> <p class="copy">An error occurred. Try again later.</p> </div> </div> </form> <div class="message-success">Thanks for signing up!</div> </div> </div> </div> </div> </div> <div id="attribution" class="body-row black"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="leaf-logo"></div> </div> <div id="copyright" class="col-xs-12">© 2017 Leaf Group Ltd.</div> </div> </div> </div> </footer> <script type="text/javascript" src="/ui/js/common.js?v=3836f9501799694d6aae9fc69d1ec934f248f216" async="async"></script> <!-- Capture Modals --> <!-- Capture --> <div id="email-capture" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Capture content--> <div class="modal-content email-capture"> <div class="modal-header"> <div class="x-close email-capture-close-icon svg" data-dismiss="modal" alt="close modal"> </div> </div> <div class="modal-body"> <h4 class="modal-title">Get great tech advice delivered to your inbox.</h4> <p>Keep your family productive, connected, entertained, and safe.</p> <div class="main-content"> <form class="form-centered auth-form email-form" method="post" action="/subscribe" autocomplete="off"> <fieldset class="form-group"> <input type="text" name="email" id="email" class="form-control" placeholder="Email" required /> <div class="message-invalid"> <p class="copy">Please enter a valid email.</p> </div> </fieldset> <fieldset class="form-group"> <input type="submit" class="submit btn" value="SUBSCRIBE" /> </fieldset> </form> </div> </div> </div> </div> </div> <!-- Quantcast Tag --> <script> var ezt = ezt ||[]; (function(){ var elem = document.createElement('script'); elem.src = (document.location.protocol == "https:" ? "https://secure" : "http://pixel") + ".quantserve.com/aquant.js?a=p-4dIM5nVs2rFio"; elem.async = true; elem.type = "text/javascript"; var scpt = document.getElementsByTagName('script')[0]; scpt.parentNode.insertBefore(elem,scpt); }()); var quantcastCategory = 'Around The Home'; var quantcastSubCategory = 'Productivity'; var quantcastLabel = 'Techwalla'; quantcastLabel += quantcastCategory ? ('.' + quantcastCategory) : ''; quantcastLabel += quantcastSubCategory ? ('.' + quantcastSubCategory) : ''; var qcdata = { qacct: 'p-4dIM5nVs2rFio', uid: '', labels: quantcastLabel, } ezt.push(qcdata); </script> <noscript> <img src="//pixel.quantserve.com/pixel/p-4dIM5nVs2rFio.gif" style="display: none;" border="0" height="1" width="1" alt="Quantcast"/> </noscript> <!-- End Quantcast Tag --> <div id="outofpage"><script type="text/javascript">googletag.cmd.push(function() { googletag.display("outofpage"); });</script></div> <script type="text/javascript" src="//s.skimresources.com/js/101174X1558374.skimlinks.js" async="async"></script> </body> </html>