Breadcrumb Section

HTML Structure

September, 15, 2015 | HTML

HTML Source Code

The example block has links in the header bar
HTML: displays the source code.
Result: displays the presentation layer of the webpage.

HTML Structure


The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the html tag. The declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.


The <html>...</html> tag tells the browser that this is an HTML document. It also represents the root of an HTML document. It is the primary container for all other HTML elements (except for the <!DOCTYPE> tag).


The <head>...</head> is where multiple instructional information about the document is placed. The title element, meta, style, script, and (the latest) viewport. You can add instructions directly in the head tag or in most cases link to another file.


The <body>...</body> tag is where all of the presentation content is placed for all HTML files. You must use this element and it should only be used once in a document. It must start immediately after the closing head tag and end directly before the closing html tag.


The <header>...</header> element represents a container for introductory content or a set of navigational links.


The <nav>...</nav> tag defines a set of navigation links. Notice that NOT all links of a document
should be inside a <nav> element. The <nav> element is intended only for major block of
navigation links.


The <section>...</section> tag defines sections in a document, such as chapters, headers,
footers, or any other sections of the document.


The <main>...</main> tag specifies the main content of a document. There must not be more than one “main” element in a document. The “main” element must NOT be a descendant of an article, aside, footer, header, or nav element.


The <aside>...</aside> tag defines some content aside from the content it is placed in.
The aside content should be related to the surrounding content.


The <article>...</article> tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

Potential sources for the article element:

  1. Forum post
  2. Blog post
  3. News story
  4. Comment


The <footer>...</footer> tag defines a footer for a document or section. A footer element should contain information about its containing element.

A footer element typically contains:

  1. authorship information
  2. copyright information
  3. contact information
  4. sitemap
  5. back to top links
  6. related documents