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:

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





Discover More
CSS - Block container box

A block container box is just a container of boxes created from HTML container element and rendered as a block box. It cancontains either: only block-level boxes (generated from elements) or establishes...
HTML - (Flow|Body) Content

Most elements that are used in the body of documents and applications are categorized as flow content. Flow content consists of flow elements intermixed with normal character data. (ifbodhead...
HTML - Main (Content of Body)

main is an element that represents the main [[content|content of the body of a document or application. It has implicitly the main aria role. article
HTML - Palpable content

As a general rule, elements whose content model allows any flow content or phrasing content should have at least one node in its contents: that is palpable content (Can be manipulated ?) and that...
HTML - Sections (Sectioning Content Element)

HTML Sectioning content or sectioning element are elements that creates a logical section A section in HTML logically groups content by thematic. Each section can have one heading or a group of heading...
How to create a table of content in HTML ?

This page talks the creation of a Table of content in html. The TOC is created generally with a nav element net below the header of your article (ie main content). The table of content can be added...



Share this page:
Follow us:
Task Runner