HTML - Article Element

About

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

For example:

• a magazine
• a newspaper article,
• or a blog entry.

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)

Example:

• The html (Content come first in the page’s source code, before the additional columns)

<header>header</header>
<article>article</article>
<nav>nav</nav>
<aside>aside</aside>
<footer>footer</footer>

• 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; }