Pin Me

The Structure of an HTML Document

written by: Maureen Cutajar•edited by: Michele McDonough•updated: 3/24/2010

A web page is created via HTML coding. The most basic HTML web page coding needs to include the root element of an HTML document which is the element. The and elements also need to be defined within this root element.

  • slide 1 of 3

    Basic HTML Web Page Coding

    The <head> element contains all the information that pertains to the document that does not form part of the actual content. Information inserted in the <head> element include the document’s title, the keywords used within the document, and other relevant data such as style sheets that do not form part of the document’s content. Elements that are inserted in the <head> element are not rendered as content by Internet browsers.

    The <body> element contains the entire document's content. As regards the presentation of the content, this can either be specified in the body of the document or via style sheets. The latter method is now the preferred method to specify the document’s presentation and thus the attributes relating to presentation have become scarce in the <body> element. Everything relating to content including text, images and graphics is placed in the <body> element.

    A minimal HTML page follows:





    <title>Document Title</title>



    <p>Some Data</p>



  • slide 2 of 3

    The Head Element


    The <title> element is a mandatory element in each HTML document. This title is the title that is displayed in the Internet Browser’s title bar. It is important that the titles chosen are context-rich to indicate to both users and search engines what the document is about.

    • Used by search engines
    • Should convey all the necessary information in a compact manner
    • Ideally not more than 60 characters
    • Focus on using main keyword phrases
    • Should be written for human readers

    Good examples:

    • <title>Section One of the Modern Music Guide</title>
    • <title>Cassia Estate | Your Mdina Real Estate Agent</title>

    Bad Examples:

    • <title>Section One</title>
    • <title>Cassia Estate Broker for Mdina and neighboring towns real estate listings, home buying, selling, leasing and much more</title>


    A style sheet (CSS) fragment affecting only a single page can be defined within <style> tags. However, it is important to note that a style sheet which is shared amongst multiple pages should be defined externally, and linked using the <link> tag.

    Example of style tag:


    h1 { color: red }

    h3 { color: blue }



    The <link> element defines the relationship between two linked documents. It is an empty element as it only contains attributes. The <link> element can appear any number of times linking different resources.

    The following are supported attributes that can be included in the <link> element:

    • href - The target URL of the resource
    • media - on what device the document will be displayed (screen, ttv, tv, projection, handheld, print, braille, aural, all).
    • rel - the relationship between the current document and the targeted document (alternate, appendix, bookmark, chapter, contents, copyright, glossary, help, home, index, next, prev, section, start, stylesheet, subsection)
    • rev - the relationship between the targeted document and the current document (alternate, appendix, bookmark, chapter, contents, copyright, glossary, help, home, index, next, prev, section, start, stylesheet, subsection)
    • type - the MIME type of the target URL


    A <meta> element in an HTML documents is an important aspect for allowing search engines to recognize the content within the document. The <meta> tag is used to identify selected properties of a document including the description of the document, the author along with a list of key words. Meta tags are identified via the name and content attribute.

    The name attribute identifies the property and the content attribute specifies the property's value. For example, the following declaration sets a value for the Author property: <META content="Some Author">

    Some common <meta> elements are the following:

    • description – Page description. Used by some search engines
    • keywords – List of comma separated keywords. Ideally not more than 25 keywords. Used by a few search engines
    • robots – With a value of NOINDEX, a search engine will not index this page
  • slide 3 of 3

    The Body Element

    Spaces in an HTML document are collapsed meaning that any number of spaces count as one. Also, in HTML a new line counts as one space.

    All body tags support the following list of core attributes:

    • id – the identifier of the element
    • class – the CSS class of the element
    • title – the title of the element. Used as a tooltip in Internet browsers
    • style – inline CSS of the element

    All body tags, except br, frame, frameset, hr and iframe support the following list of language attributes:

    • dir – the text direction for the element
    • lang – the language code

    Headings and Horizontal Rule

    The <h1> to <h6> tags define the headers that are inserted in a document. <h1> defines the largest header in a document and this should be used solely for the top-level heading, whereas the <h6> defines the smallest header.

    The <hr> tag inserts a horizontal line on the page.

    Naturally in the <body> element of a document users can define the font styles with HTML coding, create lists and tables as well as HTML forms. All these features involve HTML coding that will be visited in the HTML Web Page Coding series.

HTML Web Page Coding

This series will guide users through a number of articles that explain basic HTML web page coding starting from the basic elements of an HTML document to advanced HTML coding that includes how to insert a table and build forms in a web page with HTML code.
  1. The Structure of an HTML Document
  2. Basic Formatting Codes in HTML
  3. Advanced Formatting in HTML
  4. How to Build Forms in HTML