Structure of HTML


The previous section demonstrates how to create a simple web page. If you haven’t saved this example on your computer as the file simple.html, do so now.

Example 1.2. A Simple Webpage

    A Simple Webpage
    This is a simple webpage.

If you view simple.html in your browser, you will see the words “This is a simple webpage” on a white or grey background. Where did everything else go? And what are those words with the angle brackets, anyway? Learn more at

A Brief Introduction to Elements

The web page simple.html uses these elements: html, head, title, and body.

  • Elements are delineated by angle brackets (< >).
  • Elements are “invisible”; they don’t directly appear in the web page. Instead, they serve as instructions to your browser. They can change your text’s appearance, create a link, insert an image, and much more.
  • An element starts with an opening tag () and ends with a closing tag (). Some elements do not require closing tags.

We’ll discuss the general properties of elements in some detail in Elements. For now, let’s focus on the particular elements in the “Simple Webpage” example.

Structure of the Simple Webpage

Although the “Simple Webpage” doesn’t look like much, its elements (html, head, title, and body) are fundamental to the structure of all HTML documents. Here’s what these elements mean:

  • : “Here begins an HTML document.”The html element helps identify a file as an HTML document.
  • : “Here begins the header.”The header contains elements that apply to the overall document. For example, it might contain elements that are designed for search engines to process or elements that change the overall appearance of the webpage. However, elements in the header do not display directly as normal webpage content.The reasons you would be concerned about the header are a bit abstract at this stage, so we won’t worry about it much until later in CSS.
  • </code>: “Here begins the document title.” (Must be in the header)If you view the file <code class="filename">simple.html</code> in your browser, along the top of your browser window you should see the words, “A Simple Webpage”. These words appear because of the <code>title</code> element.As an exercise, change the title of the <code class="filename">simple.htm</code>l webpage to, “My First Webpage”. Save your changes and view them by clicking the browser’s <b class="guibutton">Refresh</b> or <b class="guibutton">Reload</b> button. <p>Titles might not seem important at first glance, but they’re actually quite useful. For example, if a search engine displays your page in a list of search results, it will probably display the <code>title</code> as your page’s title. If you omit the <code>title</code> element, the search engine will make up one for you. This is Not a Good Thing.</p> <div class="note"> <h4>Note</h4> <p>You might have noticed that the <code>title</code> element is contained within the <code>head</code> element. Is this kosher? Absolutely! In fact, many elements are designed to contain other elements, and you will be nesting elements within other elements quite frequently as you continue.</p> </div> </li> <li><code class="sgmltag-starttag"><body></code>: “Here begins the body.”The body is where you put text and elements to be displayed in the main browser window. The reason that the words “This is a simple webpage” appear when you display <code class="filename">simple.html</code> is becaused you placed them in the <code>body</code>.</li> </ul> <p>So why do we only see “This is a simple webpage” when we display <code class="filename">simple.html</code> in a browser? The answer is, after you remove all the elements that are not designed to display in the browser window, the sentence “This is a simple webpage” is the only thing left.</p> <p>In the <a href="" target="_blank">next section</a>, we’ll tinker with our example webpage, just to see what happens. After that, we’ll provide a more formal definition of elements and element properties.</p> <div class="sharedaddy sd-sharing-enabled"><div class="robots-nocontent sd-block sd-social sd-social-icon-text sd-sharing"><h3 class="sd-title">Share this:</h3><div class="sd-content"><ul><li class="share-facebook"><a rel="nofollow" data-shared="sharing-facebook-250980" class="share-facebook sd-button share-icon" href="" rel="noopener noreferrer" target="_blank" title="Click to share on Facebook"><span>Facebook</span></a></li><li class="share-twitter"><a rel="nofollow" data-shared="sharing-twitter-250980" class="share-twitter sd-button share-icon" href="" rel="noopener noreferrer" target="_blank" title="Click to share on Twitter"><span>Twitter</span></a></li><li class="share-email"><a rel="nofollow" data-shared="" class="share-email sd-button share-icon" href="" rel="noopener noreferrer" target="_blank" title="Click to email this to a friend"><span>Email</span></a></li><li class="share-google-plus-1"><a rel="nofollow" data-shared="sharing-google-250980" class="share-google-plus-1 sd-button share-icon" href="" rel="noopener noreferrer" target="_blank" title="Click to share on Google+"><span>Google</span></a></li><li class="share-linkedin"><a rel="nofollow" data-shared="sharing-linkedin-250980" class="share-linkedin sd-button share-icon" href="" rel="noopener noreferrer" target="_blank" title="Click to share on LinkedIn"><span>LinkedIn</span></a></li><li class="share-end"></li></ul></div></div></div> </section><!-- .entry-content --> </article> <div id="comments" class="comments-area" > <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a comment <small><a rel="nofollow" id="cancel-comment-reply-link" href="/structure-of-html/#respond" style="display:none;">Cancel reply</a></small></h3><p class="must-log-in">You must be <a href="">logged in</a> to post a comment.</p> </div><!-- #respond --> </div><!-- //#comments .comments-area --> <hr class="featurette-divider __after_loop"> <nav id="nav-below" class="navigation" role="navigation"> <h3 class="assistive-text"> Post navigation </h3> <ul class="pager"> <li class="previous"> <span class="nav-previous"> <a href="" rel="prev"><span class="meta-nav">←</span> Diving In HTML</a> </span> </li> <li class="next"> <span class="nav-next"> <a href="" rel="next">Tinkering with HTML <span class="meta-nav">→</span></a> </span> </li> </ul> </nav><!-- //#nav-below .navigation --> </div><!--.article-container --> <div class="span3 right tc-sidebar"> <div id="right" class="widget-area" role="complementary"> <aside id="custom_html-2" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><iframe src="" scrolling="no" style="width:300px; height:250px; border:0px; padding:0;overflow:hidden" allowtransparency="true"></iframe></div></aside><aside id="search-2" class="widget widget_search"><form role="search" method="get" id="searchform" class="searchform" action=""> <div> <label class="screen-reader-text" for="s">Search for:</label> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Search" /> </div> </form></aside> <aside id="recent-posts-2" class="widget widget_recent_entries"> <h3 class="widget-title">Most Recent on MyIQ</h3> <ul> <li> <a href="">How do I open a Domino’s franchise in Lucknow?</a> </li> <li> <a href="">How do franchise businesses work?</a> </li> <li> <a href="">How much money can I make from a franchise of MedPlus?</a> </li> <li> <a href="">How much do I need to invest to buy the McDonald’s franchise?</a> </li> </ul> </aside><aside id="text-6" class="widget widget_text"> <div class="textwidget"><script async src="//"></script> <!-- responsive ws ads --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1249136924117568" data-ad-slot="6636557521" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </aside> </div><!-- //#left or //#right --> </div><! --> </div><!--.row --> </div><!-- .container role: main --> </div><!-- //#main-wrapper --> <!-- FOOTER --> <footer id="footer" class=""> <div class="container footer-widgets "> <div class="row widget-area" role="complementary"> <div id="footer_one" class="span4"> </div><!-- .{$key}_widget_class --> <div id="footer_two" class="span4"> <aside id="dwqa-latest-question-5" class="widget dwqa-widget dwqa-latest-questions"><h3 class="widget-title">Latest Questions</h3><div class="dwqa-popular-questions"><ul><li><a href="" class="question-title">How do I correct the spelling mistake in my PAN card?</a> asked by Agarwal</li><li><a href="" class="question-title">Looking for a GST Software</a> asked by Srinivasan</li><li><a href="" class="question-title">How to clarify my doubts about pan card?</a> asked by arvindsingh</li><li><a href="" class="question-title">about two wheeler</a> asked by mangesh</li><li><a href="" class="question-title">About franchise enquiry</a> asked by Gagan Gupta</li></ul></div></aside> </div><!-- .{$key}_widget_class --> <div id="footer_three" class="span4"> <aside id="dwqa-popular-question-2" class="widget dwqa-widget dwqa-popular-question"><h3 class="widget-title">Popular Questions</h3><div class="dwqa-popular-questions"><ul><li><a href="" class="question-title">Did Julia Gillard make a speech telling Muslims to leave?</a> asked by <a href="" title="Visit Ankush Mehrotra’s website" rel="author external">Ankush Mehrotra</a></li><li><a href="" class="question-title">How to get NOC of the vehicle and get it Re-registered</a> asked by Arun Singh</li><li><a href="" class="question-title">Transfer bike from Maharashtra(Pune) to Karnataka(Bangalore)?</a> asked by Arun Singh</li><li><a href="" class="question-title">Compare management practices (POSLC) for key countries</a> asked by <a href="" title="Visit MyIQ Staff’s website" rel="author external">MyIQ Staff</a></li><li><a href="" class="question-title">What is the difference between operating system software utility software and application software?</a> asked by <a href="" title="Visit MyIQ Staff’s website" rel="author external">MyIQ Staff</a></li></ul></div></aside> </div><!-- .{$key}_widget_class --> </div><!-- .row.widget-area --> </div><!--.footer-widgets --> <div class="colophon"> <div class="container"> <div class="row-fluid"> <div class="span3 social-block pull-left"><span class="social-links"><a rel="nofollow" class="social-icon icon-feed" title="Subscribe to my rss feed" aria-label="Subscribe to my rss feed" href="" target="_blank" ><i class="fas fa-rss"></i></a><a rel="nofollow" class="social-icon icon-twitter" title="Follow me on Twitter" aria-label="Follow me on Twitter" href="" target="_blank" ><i class="fab fa-twitter"></i></a><a rel="nofollow" class="social-icon icon-facebook" title="Follow me on Facebook" aria-label="Follow me on Facebook" href="" target="_blank" ><i class="fab fa-facebook"></i></a><a rel="nofollow" class="social-icon icon-tumblr" title="Follow me on Tumblr" aria-label="Follow me on Tumblr" href="" target="_blank" ><i class="fab fa-tumblr"></i></a><a rel="nofollow" class="social-icon icon-wordpress" title="Follow me on WordPress" aria-label="Follow me on WordPress" href="" target="_blank" ><i class="fab fa-wordpress"></i></a></span></div><div class="span6 credits"><p>· <span class="tc-copyright-text">© 2019</span> <a href="" title="MyIQ Education" rel="bookmark">MyIQ Education</a> · <span class="tc-wp-powered-text">Powered by</span> <a class="icon-wordpress" target="_blank" href="" title="Powered by WordPress"></a> · <span class="tc-credits-text">Designed with the <a class="czr-designer-link" href="" title="Customizr theme">Customizr theme</a> </span> ·</p></div> </div><!-- .row-fluid --> </div><!-- .container --> </div><!-- .colophon --> </footer> </div><!-- //#tc-page-wrapper --> <script type="text/javascript"> window.WPCOM_sharing_counts = {"http:\/\/\/structure-of-html\/":250980}; </script> <div id="sharing_email" style="display: none;"> <form action="/structure-of-html/" method="post"> <label for="target_email">Send to Email Address</label> <input type="email" name="target_email" id="target_email" value="" /> <label for="source_name">Your Name</label> <input type="text" name="source_name" id="source_name" value="" /> <label for="source_email">Your Email Address</label> <input type="email" name="source_email" id="source_email" value="" /> <input type="text" id="jetpack-source_f_name" name="source_f_name" class="input" value="" size="25" autocomplete="off" title="This field is for validation and should not be changed" /> <img style="float: right; display: none" class="loading" src="" alt="loading" width="16" height="16" /> <input type="submit" value="Send Email" class="sharing_send" /> <a rel="nofollow" href="#cancel" class="sharing_cancel">Cancel</a> <div class="errors errors-1" style="display: none;"> Post was not sent - check your email addresses! </div> <div class="errors errors-2" style="display: none;"> Email check failed, please try again </div> <div class="errors errors-3" style="display: none;"> Sorry, your blog cannot share posts by email. </div> </form> </div> <script type='text/javascript' src=''></script> <script type='text/javascript' src=''></script> <script type='text/javascript' src=''></script> <script type='text/javascript' src=''></script> <script type='text/javascript'> /* <![CDATA[ */ var q2w3_sidebar_options = [{"sidebar":"right","margin_top":55,"margin_bottom":400,"stop_id":"","screen_max_width":500,"screen_max_height":0,"width_inherit":false,"refresh_interval":3000,"window_load_hook":false,"disable_mo_api":false,"widgets":["text-6"]}]; /* ]]> */ </script> <script type='text/javascript' src=''></script> <script type='text/javascript' src=''></script> <script type='text/javascript'> /* <![CDATA[ */ var sharing_js_options = {"lang":"en","counts":"1"}; /* ]]> */ </script> <script type='text/javascript' src=''></script> <script type='text/javascript'> var windowOpen; jQuery( document.body ).on( 'click', 'a.share-facebook', function() { // If there's another sharing window open, close it. if ( 'undefined' !== typeof windowOpen ) { windowOpen.close(); } windowOpen = jQuery( this ).attr( 'href' ), 'wpcomfacebook', 'menubar=1,resizable=1,width=600,height=400' ); return false; }); var windowOpen; jQuery( document.body ).on( 'click', 'a.share-twitter', function() { // If there's another sharing window open, close it. if ( 'undefined' !== typeof windowOpen ) { windowOpen.close(); } windowOpen = jQuery( this ).attr( 'href' ), 'wpcomtwitter', 'menubar=1,resizable=1,width=600,height=350' ); return false; }); var windowOpen; jQuery( document.body ).on( 'click', 'a.share-google-plus-1', function() { // If there's another sharing window open, close it. if ( 'undefined' !== typeof windowOpen ) { windowOpen.close(); } windowOpen = jQuery( this ).attr( 'href' ), 'wpcomgoogle-plus-1', 'menubar=1,resizable=1,width=480,height=550' ); return false; }); var windowOpen; jQuery( document.body ).on( 'click', 'a.share-linkedin', function() { // If there's another sharing window open, close it. if ( 'undefined' !== typeof windowOpen ) { windowOpen.close(); } windowOpen = jQuery( this ).attr( 'href' ), 'wpcomlinkedin', 'menubar=1,resizable=1,width=580,height=450' ); return false; }); </script> <script type='text/javascript' src='' async='async' defer='defer'></script> <script type='text/javascript'> _stq = window._stq || []; _stq.push([ 'view', {v:'ext',j:'1:6.3.3',blog:'53580622',post:'250980',tz:'5.5',srv:''} ]); _stq.push([ 'clickTrackerInit', '53580622', '250980' ]); </script> <div id="tc-footer-btt-wrapper" class="tc-btt-wrapper right"><i class="btt-arrow"></i></div> </body> </html>