HTML document structure

  1. Home
  2. Computing
  3. Web Application

HTML Document Structure

Every HTML document has the following structure:

<!DOCTYPE html> 
<html> 
  <head> 
    <!-- the document head --> 
  </head> 
  <body> 
    <!-- the document body --> 
  </body> 
</html>

The DOCTYPE declaration must be the first thing that appears in an HMTL document.

This declaration is not an HTML tag, it lets the web browser know what version of HTML the page is written in.

For HTML5, use the following declaration:

<!DOCTYPE html>

Older versions of the HMTL standard will have more information:
Ex. HTML 4.01 Strict –

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

The HTML Element

The <html> tag marks the opening of the outermost element associated with every HTML document.

The <html> element is the root of the document — thus, it’s the container for all of the HTML elements in a document.

<!DOCTYPE ...> 
<html> 
  <head> 
    <!-- the document head --> 
  </head> 
  <body> 
    <!-- the document body --> 
  </body> 
</html>

The Head Element

The <head> element is the container for head elements.

  • A required head element is the document title, specified using the <title> element.

Other common head elements include:

  • <link> – used to specify the location of an external resource. This element is always empty, it can only contain attributes.
    Example: 
    <link rel="stylesheet" href="theme.css">

    – The rel attribute specifies the relationship between the document and the linked resource.

    – The href attribute specifies the location (URL) of the external resource. The URL may be:

    • absolute – pointing to another web site.
    • relative – pointing to a file within the web site.
  • <script> – used to define a client-side script, or to include one from an external source, typically this is JavaScript.
    Example: 
    <script>
  function message() {
    document.write("Hello World!")
}
</script>

    If src is present, the <script> element must be empty.

    <script src="myscripts.js"></script>

    Again, the URL can be either absolute or relative.

  • <meta> – used to provide metadata within an HTML document.
    • – Metadata is data about data — it is machine parable, but will not be displayed in the webpage.
    • – Metadata can be used by browsers (e.g., when to refresh the webpage), search engines (keywords), or other web services.
    Example: 
    <head>
  <meta charset="UTF-8">
  <meta name="description" content="My MOOC">
  <meta name="keywords" content="MOOC,Web App">
  <meta name="author" content="G. Heileman">
</head>

The Body Element

The <body> element contains the HTML elements that will actually be rendered in the browser.

  • – I.e., the body holds the actual “content” of the HTML document.
  • – Every HTML body element is classified as being either a block-level or a text-level (inline) element.
  • – Block-level elements define the major structure of a Web page, e.g., headings, paragraphs, etc., and they always produce a new line in the document.
  • – Inline elements define the minor structure of the web page, e.g., bold or emphasized text, and they do not produce a new line in the document.

Latest Post