Table of Contents

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:

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:

Example:

<header>header</header>
<article>article</article>
<nav>nav</nav>
<aside>aside</aside>
<footer>footer</footer>
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; }