What Are the Two Main Parts of an HTML Document?

Techwalla may earn compensation through affiliate links in this story.

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.

Advertisement

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:

Video of the Day

Information for Web browser and search engines Contents visible to reader

Advertisement

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> </div><div class="component-article-section-inline-ad"><div class="inline-ad inline-ad--mobile-critical"><p class="inline-ad__label ui-label"> Advertisement </p> <div class="inline-ad__wrapper"><div id="slot1-3" data-ad-path="/6117/dmd.techwalla.mw/slot1-3" data-ad-batch="2" data-ad-targeting="{"loc":"ad_3"}" data-ad-sizes="[[300,250],[320,50],[320,100]]" data-ad-bidding="true" data-ad-breakpoint="small" data-ad-type="gpt" class="component-ad-gpt ad slot ad-mobile "></div></div></div></div><div class="component-article-section-content ui-body article-section-content"><p>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> </div><div class="component-article-section-inline-ad"><div class="inline-ad inline-ad--mobile-critical"><p class="inline-ad__label ui-label"> Advertisement </p> <div class="inline-ad__wrapper"><div id="slot1-4" data-ad-path="/6117/dmd.techwalla.mw/slot1-4" data-ad-batch="2" data-ad-targeting="{"loc":"ad_4"}" data-ad-sizes="[[300,250],[320,50],[320,100]]" data-ad-bidding="true" data-ad-breakpoint="small" data-ad-type="gpt" class="component-ad-gpt ad slot ad-mobile "></div></div></div></div><div class="component-article-section-heading article-section-content"><h2 id="body-contents"> Body Contents </h2></div><div class="component-article-section-content ui-body article-section-content"><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> </div><div class="component-article-section-inline-ad"><div class="inline-ad inline-ad--mobile-critical"><p class="inline-ad__label ui-label"> Advertisement </p> <div class="inline-ad__wrapper"><div id="slot1-5" data-ad-path="/6117/dmd.techwalla.mw/slot1-5" data-ad-batch="2" data-ad-targeting="{"loc":"ad_5"}" data-ad-sizes="[[300,250],[320,50],[320,100]]" data-ad-bidding="true" data-ad-breakpoint="small" data-ad-type="gpt" class="component-ad-gpt ad slot ad-mobile "></div></div></div></div><div class="component-article-section-heading article-section-content"><h2 id="doctype"> DOCTYPE </h2></div><div class="component-article-section-content ui-body article-section-content"><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><div class="component-article-section-inline-ad"><div class="inline-ad inline-ad--desktop-critical"><p class="inline-ad__label ui-label"> Advertisement </p> <div class="inline-ad__wrapper inline-ad__wrapper_reserve-space-desktop"><div id="inline1-2" data-ad-path="/6117/dmd.techwalla/inline1-2" data-ad-batch="2" data-ad-targeting="{"loc":"inline_2"}" data-ad-sizes="[[728,90],[300,250]]" data-ad-bidding="true" data-ad-breakpoint="medium,large" data-ad-type="gpt" class="component-ad-gpt ad inline ad-desktop "></div></div></div></div><div class="component-article-section-inline-ad"><div class="inline-ad inline-ad--mobile-critical"><p class="inline-ad__label ui-label"> Advertisement </p> <div class="inline-ad__wrapper"><div id="slot1-6" data-ad-path="/6117/dmd.techwalla.mw/slot1-6" data-ad-batch="2" data-ad-targeting="{"loc":"ad_6"}" data-ad-sizes="[[300,250],[320,50],[320,100]]" data-ad-bidding="true" data-ad-breakpoint="small" data-ad-type="gpt" class="component-ad-gpt ad slot ad-mobile "></div></div></div></div></article> <!----> <!----> <!----> <!----> <!----> <div class="component-ads-by-google end-of-article-ads"><ins data-ad-client="pub-0316265116163263" data-ad-slot="6915260661" data-ad-format="" class="nope"></ins></div></div> <!----> <aside class="right-rail rrv2 desktop-show mobile-hide"><div class="ad-one"><div class="disclaimer-ad-wrapper" style="top:20px;"><div class="component-compensation-disclaimer ui-label mobile-hide desktop-show"> Techwalla may earn compensation through affiliate links in this story. </div> <div class="ad atf"><div id="rightrail1-1" data-ad-path="/6117/dmd.techwalla/rightrail1-1" data-ad-targeting="{"loc":"atf"}" data-ad-batch="1" data-ad-breakpoint="large" data-ad-type="gpt" data-ad-sizes="[[300, 250], [300, 600]]"></div></div></div></div> <div class="component-article-rcp desktop-show mobile-hide desktop-6 mobile-6"><div class="related-content__heading"><h4 class="heading"><span>People are Reading</span></h4></div> <div class="related-content"><div id="articleWrapper0rcpItem0" class="related-content__item tech-support"><div class="item__section item__section--number-critical"><div> 1 </div> <!----> <!----> <!----> <!----> <!----> <!----></div><div class="item__section item__section--title-critical"><!----> <!----> <!----> <a href="https://www.techwalla.com/articles/how-to-convert-html-to-plain-text-in-javascript" data-event="rc_right_rail" data-variant="cme" data-info="1" data-label="/articles/how-to-convert-html-to-plain-text-in-javascript" title="How to Convert HTML to Plain Text in Javascript" class="ui-body"><h5> How to Convert HTML to Plain Text in Javascript </h5></a> <!----> <!----> <!----></div></div><div id="articleWrapper0rcpItem1" class="related-content__item technically-for-parents"><div class="item__section item__section--number-critical"><div> 2 </div> <!----> <!----> <!----> <!----> <!----> <!----></div><div class="item__section item__section--title-critical"><!----> <!----> <!----> <a href="https://www.techwalla.com/articles/what-does-html-stand-for" data-event="rc_right_rail" data-variant="cme" data-info="2" data-label="/articles/what-does-html-stand-for" title="What Does HTML Stand for?" class="ui-body"><h5> What Does HTML Stand for? </h5></a> <!----> <!----> <!----></div></div><div id="articleWrapper0rcpItem2" class="related-content__item tech-support"><div class="item__section item__section--number-critical"><div> 3 </div> <!----> <!----> <!----> <!----> <!----> <!----></div><div class="item__section item__section--title-critical"><!----> <!----> <!----> <a href="https://www.techwalla.com/articles/how-to-center-an-image-using-html-programming" data-event="rc_right_rail" data-variant="cme" data-info="3" data-label="/articles/how-to-center-an-image-using-html-programming" title="How to Center an Image Using HTML Programming" class="ui-body"><h5> How to Center an Image Using HTML Programming </h5></a> <!----> <!----> <!----></div></div></div></div> <div class="ad-two"><div class="ad btf" style="top:20px;"><div id="rightrail1-2" data-ad-path="/6117/dmd.techwalla/rightrail1-2" data-ad-targeting="{"loc":"btf"}" data-ad-batch="1" data-ad-breakpoint="large" data-ad-type="gpt" data-ad-sizes="[[300, 250]]"></div></div></div> <div class="component-article-rcp desktop-show mobile-hide desktop-6 mobile-6"><div class="related-content__heading"><h4 class="heading"><span>You May Also Like</span></h4></div> <div class="related-content"><div id="articleWrapper0rcpItem0" class="related-content__item tech-support"><div class="item__section item__section--number-critical"><div> 1 </div> <!----> <!----> <!----> <!----> <!----> <!----></div><div class="item__section item__section--title-critical"><!----> <!----> <!----> <a href="https://www.techwalla.com/articles/how-to-use-javascript-to-print-a-pdf" data-event="rc_right_rail" data-variant="cme" data-info="4" data-label="/articles/how-to-use-javascript-to-print-a-pdf" title="How to Use JavaScript to Print a PDF" class="ui-body"><h5> How to Use JavaScript to Print a PDF </h5></a> <!----> <!----> <!----></div></div><div id="articleWrapper0rcpItem1" class="related-content__item tech-support"><div class="item__section item__section--number-critical"><div> 2 </div> <!----> <!----> <!----> <!----> <!----> <!----></div><div class="item__section item__section--title-critical"><!----> <!----> <!----> <a href="https://www.techwalla.com/articles/how-to-reduce-the-spacing-between-lines-in-html" data-event="rc_right_rail" data-variant="cme" data-info="5" data-label="/articles/how-to-reduce-the-spacing-between-lines-in-html" title="How to Reduce the Spacing Between Lines in HTML" class="ui-body"><h5> How to Reduce the Spacing Between Lines in HTML </h5></a> <!----> <!----> <!----></div></div><div id="articleWrapper0rcpItem2" class="related-content__item tech-support"><div class="item__section item__section--number-critical"><div> 3 </div> <!----> <!----> <!----> <!----> <!----> <!----></div><div class="item__section item__section--title-critical"><!----> <!----> <!----> <a href="https://www.techwalla.com/articles/how-to-print-gridlines-on-an-excel-sheet-with-open-office" data-event="rc_right_rail" data-variant="cme" data-info="6" data-label="/articles/how-to-print-gridlines-on-an-excel-sheet-with-open-office" title="How to Print Gridlines on an Excel Sheet With Open Office" class="ui-body"><h5> How to Print Gridlines on an Excel Sheet With Open Office </h5></a> <!----> <!----> <!----></div></div></div></div> <div class="ad-three-four-container"><!----> <!----></div> <!----></aside></div></div></div> <div data-ad-breakpoint="small" data-ad-logic="adhesion" data-ad-batch="1" data-ad-targeting="{"loc":"adhesion"}" data-ad-path="/6117/dmd.techwalla.mw/"></div> <div class="ad-infinite-scroll"><div id="infscroll-mobile1-1" data-ad-path="/6117/dmd.techwalla.mw/infscroll1-1" data-ad-batch="1" data-ad-targeting="{"loc":"infscroll"}" data-ad-sizes="[[1,2]]" data-ad-bidding="false" data-ad-breakpoint="small" data-ad-refresh="false" data-ad-type="gpt" class="component-ad-gpt ad infscroll ad-mobile "></div> <div id="infscroll1-1" data-ad-path="/6117/dmd.techwalla/infscroll1-1" data-ad-batch="1" data-ad-targeting="{"loc":"infscroll"}" data-ad-sizes="[[1,2]]" data-ad-bidding="false" data-ad-breakpoint="medium,large" data-ad-refresh="false" data-ad-type="gpt" class="component-ad-gpt ad infscroll ad-desktop "></div></div></div></div> <div id="brandmetrics1-1" data-ad-pathmobile="/6117/dmd.techwalla.mw/brandmetrics1-1" data-ad-pathdesktop="/6117/dmd.techwalla/brandmetrics1-1" data-ad-batch="1" data-ad-type="gpt" data-ad-breakpoint="small,medium,large" data-ad-outofpage="true" data-ad-refresh="false" data-ad-sizes="[[1, 1]]"></div></div></div> <!----></div></div></main> <dialog data-html2canvas-ignore=""><form method="dialog"><h2>Report an Issue</h2> <div class="info"><div class="inputs-container"><label class="contact-label"> Contact*: <input type="text" placeholder="Your Email or Slack"></label> <label class="severity-label"> Severity*: <select><option>High</option> <option selected="selected">Normal</option> <option>Low</option></select></label> <label class="description-label"> Description*: <textarea id="description" name="description" rows="5" cols="40" placeholder="Please describe the issue"></textarea></label></div> <div class="screenshot-container"><img class="screenshot"> <p>Screenshot loading...</p></div></div> <menu><button value="cancel" class="cancel">Cancel</button> <button value="submit" disabled="disabled" class="submit"> Submit </button></menu></form></dialog> <!----></div> <div class="component-subscriber-manager"><!----> <!----> <!----> <div id="emailslider-mobile1-1" data-ad-path="/6117/dmd.techwalla.mw/emailslider1-1" data-ad-batch="1" data-ad-targeting="{"loc":""}" data-ad-sizes="[[1,3]]" data-ad-bidding="true" data-ad-breakpoint="small" data-ad-refresh="false" data-ad-type="gpt" class="component-ad-gpt ad emailslider ad-mobile "></div> <div id="emailslider1-1" data-ad-path="/6117/dmd.techwalla/emailslider1-1" data-ad-batch="1" data-ad-targeting="{"loc":""}" data-ad-sizes="[[1,3]]" data-ad-bidding="true" data-ad-breakpoint="medium,large" data-ad-refresh="false" data-ad-type="gpt" class="component-ad-gpt ad emailslider ad-desktop "></div></div> <script type="text/javascript"> window._reveConfig = { dfpData: {"lg_uuid":"","adcat1":"technology_computing","adcat2":"programming_languages","adcat3":"javascript","adcat4":"","topic1":[],"topic2":[],"topic3":[],"tags":["group5","configurabletemplate"],"article_id":"37505","pagetype":["article"],"subpagetype":"article","category":"tech_support","subcategory":"reviews","experiment":"default","art":"37505","ctype":"article","cat":"techsupport","scat":"reviews"}, permutiveData: {"page":{"adcat1":"technology_computing","adcat2":"programming_languages","adcat3":"javascript","adcat4":"","topic1":[],"topic2":[],"topic3":[],"tags":["group_5","configurabletemplate"],"content_name":"What Are the Two Main Parts of an HTML Document?","pagetype":"article","subpagetype":"article","published":"2011-08-29T13:03:00+00:00","updated":"2011-08-29T13:03:00+00:00","author":"Kristen Waters","scroll":0,"pageview_type":"standard","user":{"lg_uuid":"","user_id":"","logged_in":false}}} } </script></div></div></div><script defer src="/_nuxt/static/1670014629/articles/what-are-the-two-main-parts-of-an-html-document/state.js"></script> <!-- Generated on: 12/2/2022 12:57:30 PM --> <!-- Version: 1.1.159 --> <!-- Branch: master --> <script>const Debug=o=>function(){const e=localStorage&&localStorage.debug&&"function"==typeof localStorage.debug.includes&&localStorage.debug.includes("bedrock");e&&console.log(o,...arguments)}</script> <script>const debug=Debug("bedrock:app.html");let unhealthy=new Set;const scriptsAllOK=e=>e.reduce((e,t)=>{const{value:n}=t,{ok:a,url:o}=n;return debug("url: "+o),a||(debug(o+" is not ok"),unhealthy.add(o.replace("?reload=1",""))),e&&a},!0),checkScriptsContent=async e=>{let t=!0;for(const n of e){const{value:e}=n,{url:a}=e;debug("url: "+a);const o=await e.text();debug("fileContents.length: "+o.length);const r=o.length>0;debug("hasContent: "+r),r||(debug(a+" has 0 content"),unhealthy.add(a.replace("?reload=1",""))),t=t&&r}return t};async function healthCheck(){const{document:e,location:t={}}=window,{pathname:n=""}=t;if(/^\/search/.test(n))return;const a=[...e.querySelectorAll("script")],o=[...e.querySelectorAll("link")],r=await Promise.allSettled(a.filter(e=>e.src.match(/\/_nuxt\//)).map(e=>fetch(new Request(e.src)))),l=await Promise.allSettled(o.filter(e=>e.href.match(/\/_nuxt\//)).map(e=>fetch(new Request(e.href))));await e.fonts.ready;if(window&&window.performance&&"function"==typeof window.performance.getEntriesByType){window.performance.getEntriesByType("resource").filter(e=>{const[t,n]=e.name.split("?");return t.match(/([a-z]+).techwalla.([a-z]+)\/_nuxt/)}).filter(e=>0===e.decodedBodySize).forEach(e=>{debug("Found this url with no content with perf api: "+e.name),unhealthy.add(e.name)})}const i=[...r,...l],s=scriptsAllOK(i),c=await checkScriptsContent(i),h=s&&c&&0===unhealthy.size;if(debug("isHealthy: "+h),!h){debug("Unhealthy urls: "+JSON.stringify(Array.from(unhealthy)));const e=`https://api.techwalla.com/heal/${encodeURIComponent("master")}/${encodeURIComponent(window.location.pathname)}`;for(debug("Healing: "+e),await fetch(new Request(e));unhealthy.size;){debug(`There are ${unhealthy.size} urls with issues:`),debug(JSON.stringify(Array.from(unhealthy),null,2)),await new Promise(e=>setTimeout(e,5e3));const e=await Promise.allSettled(Array.from(unhealthy).map(e=>fetch(new Request(e+"?reload=1")))),t=scriptsAllOK(e),n=await checkScriptsContent(e);if(t&&n){debug("All unhealthy urls have recovered.");const e=Array.from(unhealthy);unhealthy.clear(),debug("Unhealthy list is clear"),debug(await fetch(new Request("https://api.techwalla.com/heal/clear",{method:"POST",body:JSON.stringify({urls:e}),headers:{"content-type":"application/json"}}))),await new Promise(e=>setTimeout(e,5e3)),window.location.reload(!0)}}}}window.addEventListener("load",e=>{setTimeout(healthCheck,2e3)})</script> </body> </html>