What Are the Two Main Parts of an HTML Document?

By Kristen Waters

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: Information for Web browser and search engines Contents visible to readerBoth 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.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> <h3>Body Contents</h3><p>The body section is used to format the actual Web page. Most of the HTML tags, such as the paragraph tag (<p>), 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><h3>DOCTYPE</h3><p>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><div id="js-336"></div><div class="references-resources"><h3>References & Resources</h3><ul><li><a href="http://www.w3schools.com/html/html_head.asp">W3Schools.com: HTML Head Elements</a></li><li><a href="http://www.w3schools.com/tags/tag_meta.asp">W3Schools.com: HTML <Meta> Tag</a></li><li><a href="http://www.w3schools.com/tags/tag_body.asp">W3Schools.com: HTML <Body> Tag</a></li><li><a href="http://www.w3schools.com/tags/tag_doctype.asp">W3Schools.com: HTML <!DOCTYPE> Declaration</a></li></ul></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="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> </article> </section> <aside class="right-column"> <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="rcp-container"> <h3 class="rcp-heading">Related</h3> <div class="row"> <div class="col-xs-12"> <article class="article-card article-card--smart-home"> <a href="/articles/high-tech-gifts-for-beauty-lovers" class="image"> <img src="//img.techwallacdn.com/tw-product-hero/tw/b5/f5/b5f55cd9f789883fbeb59efc491882dd.jpg" alt=" a 8 High-Tech Gifts for Beauty Lovers"/> </a> <div class="info"> <h2 class="title"> <a href="/articles/high-tech-gifts-for-beauty-lovers"> 8 High-Tech Gifts for Beauty Lovers </a> </h2> <div class="category"> <a href="/smart-home"> Smart Home </a> </div> </div> </article> </div> <div class="col-xs-12"> <article class="article-card article-card--entertainment"> <a href="/articles/creative-iroar-go-portable-speaker-perfected" class="image"> <img src="//img.techwallacdn.com/tw-product-hero/tw/23/9e/239ec251c7c680faf5c9718765528f5b.jpg" alt=" a Hands-On with the Creative iRoar Go: Portable Speaker Perfected"/> </a> <div class="info"> <h2 class="title"> <a href="/articles/creative-iroar-go-portable-speaker-perfected"> Hands-On with the Creative iRoar Go: Portable Speaker Perfected </a> </h2> <div class="category"> <a href="/entertainment"> Entertainment </a> </div> </div> </article> </div> <div class="col-xs-12"> <article class="article-card article-card--productivity"> <a href="/articles/panic-stations-how-to-listen-to-music-when-the-iphone-7-loses-its-jack" class="image"> <img src="//img.techwallacdn.com/tw-product-hero/tw/98/bd/98bd3f45a32dd01b07ee0cb69dd9b422.jpg" alt=" a How to Listen to Music on the Jackless iPhone 7"/> </a> <div class="info"> <h2 class="title"> <a href="/articles/panic-stations-how-to-listen-to-music-when-the-iphone-7-loses-its-jack"> How to Listen to Music on the Jackless iPhone 7 </a> </h2> <div class="category"> <a href="/productivity"> Productivity </a> </div> </div> </article> </div> <div class="col-xs-12"> <article class="article-card article-card--productivity"> <a href="/articles/light-up-your-nighttime-workouts" class="image"> <img src="//img.techwallacdn.com/tw-product-hero/tw/98/3b/983b1cf71bc3f160596627a9086a0aea.jpg" alt=" a Light Up Your Nighttime Workouts"/> </a> <div class="info"> <h2 class="title"> <a href="/articles/light-up-your-nighttime-workouts"> Light Up Your Nighttime Workouts </a> </h2> <div class="category"> <a href="/productivity"> Productivity </a> </div> </div> </article> </div> <div class="col-xs-12"> <article class="article-card article-card--productivity"> <a href="/articles/the-nn-coolest-gadgets-techwalla-saw-at-ces-2016" class="image"> <img src="//img.techwallacdn.com/tw-product-hero/tw/b5/06/b5068e2e55620f6b6b54cfdfe3d361c9.jpg" alt=" a The 22 Coolest Gadgets We Saw at CES 2016"/> </a> <div class="info"> <h2 class="title"> <a href="/articles/the-nn-coolest-gadgets-techwalla-saw-at-ces-2016"> The 22 Coolest Gadgets We Saw at CES 2016 </a> </h2> <div class="category"> <a href="/productivity"> Productivity </a> </div> </div> </article> </div> </div> </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> var google_ad_client = 'pub-0316265116163263'; var google_ad_channel = '5706684770'; var google_ad_output = 'js'; var google_max_num_ads = '4'; var google_ad_type = 'text'; var google_image_size = '336x280'; // google_feedback = 'on'; // google_skip = 1; var google_url ='bottom'; var google_label_text = 'Sponsored Links'; if (!isMobile()) { document.write('<scr' + 'ipt language="JavaScript" src="https://pagead2.googlesyndication.com/pagead/show_ads.js"></scr' + 'ipt>'); } </script> </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" data-icon="" class="social_facebook"></a><a data-event="twitter" target="_blank" href="https://twitter.com/techwallahq" data-icon="" class="social_twitter"></a></div> </div> <div class="col-xs-0 col-md-2 col-lg-0"></div> <div class="col-xs-12 col-md-8 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="/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 data-icon="" class="elegant-icons"></span></button></div> </div> </form> </div> </div> </div> </div> </div> <div id="attribution" class="body-row black"> <div class="container"> <div id="leaf-logo" class="col-xs-12 col-md-12 col-lg-2"></div> <div id="copyright" class="col-xs-12 col-md-12 col-lg-8">© 2016 Leaf Group Ltd.</div> <div id="userLinks" class="col-xs-12 col-md-12 col-lg-2"> <a href="/login">Login</a>   |   <a href="/sign-up">Sign Up</a> </div> </div> </div> </footer> <div class="modal login-modal"> <div class="modal-dialog"> <div class="modal-content" style="padding-bottom: 20px;"> <div id="login" class="auth-form-wrapper"> <div class="authInterface"> <ul class="nav nav-tabs"> <li><a href="/sign-up">Sign Up</a></li> <li class="active"><a href="/login">Log In</a></li> </ul> <section class="module-login"> <h4 class="header">Create an account and join the conversation!</h4> <section class="module-social"> <div class="form"> <form method="post" novalidate="true" class="social-logins"> <div class="social-login social-login-facebook"><a data-action="social-login" data-network="facebook"><span data-icon="" class="icon elegant-icons"></span></a></div> <div class="social-login social-login-google"><a data-action="social-login" data-network="google"><span data-icon="" class="icon elegant-icons"></span></a></div> </form> </div> </section> <form action="/login" method="post" class="form tw-login"> <h5 class="line-or"><span>Or</span></h5> <div class="form-group"> <input type="email" placeholder="Email" name="email" class="form-control" required> </div> <div class="form-group"> <input type="password" placeholder="Password" name="password" class="form-control" required> <span class="help-block forgot-password"><a href="/account/forgot" target="_self">Forgot Password?</a></span> <div class="checkbox"> <label> <input type="checkbox" name="remember_me"> Remember me </label> </div> </div> <div class="form-group"> <button type="submit" class="btn btn-default btn-lg btn-modal-close">Log In</button> </div> </form> </section> <div class="module-cancel"> <p><span><a href="#cancel" class="btn btn-link js-cancel">Cancel</a></span></p> </div> <div class="module-legal"> <p><span>By signing up or using the Techwalla services you agree to the Techwalla <a href="/terms-of-use" target="_blank">Terms of Use</a> and <a href="/privacy-policy" target="_blank">Privacy Policy</a></span></p> </div> </div> </div> <div id="sign-up" class="auth-form-wrapper hide"> <div class="authInterface"> <ul class="nav nav-tabs"> <li class="active"><a href="/sign-up">Sign Up</a></li> <li><a href="/login">Log In</a></li> </ul> <section class="centered module-register"> <h4 class="header">Create an account and join the conversation!</h4> <br> <form action="/sign-up" method="post" class="form tw-register"> <div class="form-group"> <input type="text" placeholder="First Name" name="first_name" class="form-control" required> </div> <div class="form-group"> <input type="text" placeholder="Last Name" name="last_name" class="form-control" required> </div> <div class="form-group email-section"> <input type="email" placeholder="Email" name="email" class="form-control" required> </div> <div class="form-group"> <input type="password" placeholder="Password" name="password" class="form-control" required> </div> <div class="checkbox"> <label> <input type="checkbox" name="newsletter"> Get news about the products and tech you really care about. We'll never spam you! </label> </div> <div class="form-group"> <button type="submit" class="btn btn-default btn-lg btn-modal-close">Sign Up</button> </div> </form> </section> <div class="module-cancel"> <p><span><a href="#cancel" class="btn btn-link js-cancel">Cancel</a></span></p> </div> <div class="module-legal"> <p><span>By signing up or using the Techwalla services you agree to the Techwalla <a href="/terms-of-use" target="_blank">Terms of Use</a> and <a href="/privacy-policy" target="_blank">Privacy Policy</a></span></p> </div> </div> </div> <div id="forgot-password" class="auth-form-wrapper hide"> <div class="authInterface"> <ul class="nav nav-tabs"> <li><a href="/sign-up">Sign Up</a></li> <li><a href="/login">Log In</a></li> </ul> <section class="centered module-forgot"> <form action="/account/forgot" method="post" class="form"> <h6 class="header" style="text-align: center;">We'll send you an email to reset your password.</h6> <div class="form-group email-section"> <input type="email" name="email" placeholder="Email" class="form-control" required> </div> <div class="form-group"> <button type="submit" class="btn btn-default btn-lg btn-modal-close">Submit</button> </div> <div class="module-cancel"> <p><span><a href="#cancel" class="btn btn-link js-cancel">Cancel</a></span></p> </div> </form> </section> </div> </div> </div> </div> </div> <script type="text/javascript" src="/ui/js/common.js"></script> <!-- 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> </body> </html>