HTML - Article Element


article 1) 2) is an element that represents a section of content that forms an independent part of a document or site;

For example:

This is a more specific element than main, that is is seen as a grouping element.

Example: the holy grail

Many web pages have a similar shape in the markup known as the Holy Grail Layout:

  • with a header on top,
  • a footer on bottom,
  • a content area
  • and one or two additional columns (aside and nav)


  • The html (Content come first in the page’s source code, before the additional columns)
  • And the layout placement is modified with a grid (ie the content is now between the rows)
body { display: grid;
      max-width: 36rem;
       grid: "h h h"
             "a b c"
             "f f f";
       grid-template-columns: auto 1fr 20%; 
header { grid-area: h     }
article { grid-area: b; min-width: 12em;     }
nav     { grid-area: a; /* auto min-width */ }
aside   { grid-area: c; /* auto min-width */   }
footer { grid-area: f     }
body > * { margin: 1rem; padding: 1rem; background-color:deepskyblue; }

Powered by ComboStrap