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

DOCTYPE

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.

HTML

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).

Head

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.

Body

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.

Header

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

Nav

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.

Section

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

Main

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.

Aside

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.

Article

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

Footer

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