HTML article Element

Sectioning Content – Part 2

Foreword: In this part of the series, I talk about the HTML5 element called, the article Element.

By: Chrysanthus Date Published: 30 Jul 2015

Introduction

This is part 2 of my series, Sectioning Content. In this part of the series, I talk about the HTML5 element called, the article Element. You should have read the previous part of the series before reaching here, as this is a continuation. The article element is a double tag element; it cannot have a main element descendant. This means that no main element can be nested in the article element. The tags for the article element are:

<article>
</srticle>

article elements can be nested.

Purpose of the article Element
Here is a quotation from the HTML5 specification. Read it. You may not understand it. The explanation is given below. “The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.”

You might not have understood all that because of some of the vocabulary. I explain the vocabulary and coding below:

Self-Contained Composition
Here, self-contained composition means a short essay. If you are an elementary school graduate, then you must have written an essay. If you are a middle school graduate (British secondary school) then you must have written an essay. In practice, an article can be a composition or a long composition, but it has to be complete. A section element (see previous part of the series) can go into a long composition (long article).

Document, Page, Application, or Site
Here, document is the web page document. The principal element of the web page document is the HTML element. The HTML element has two principal elements, which are the head and the body elements.

Here, page refers to the web page.

A web page that is highly interactive is an application (or is in the application mode).

Here, site refers to a group of web pages that form a website.

Syndication
Syndication is an article or photograph or television program, etc. sold to several different media (newspapers, magazines, etc.).

Forum Post
If you belong to a social network, like Facebook, you are expected to start a discussion from time to time for your group (or partners). The start of the discussion is a forum post. The start of a discussion consists of a title and then the text. The discussion start can have a reply. The reply is also a post. A comment is not necessarily a post.

Magazine and Newspaper
You should know the meanings of a magazine and a newspaper. If you do not know, then ask a friend.

Blog
A blog is a space (series of web pages) in the Internet that has related articles (composition and long compositions). A Blog is typically written by an individual.

Comment
You should know the meaning of a comment. If you do not know, ask a friend.

Widget
Here is a quotation from the Oxford Advanced Learners Dictionary for the meaning of a widget: “(Informal) used to refer to any small device that you do not know the name of”. For the web page, widget refers to a short story, or joke, or any text in that light.

Gadget
Here is a quotation from the Oxford Advanced Learners Dictionary for the meaning of a gadget: “a small tool or device that does something useful”. For the web page, gadget refers to a DIY text or something similar. DIY means, Do It Yourself. An example of a DIY text is text that explains how to replace the button of your shirt using a needle.

Now, go back and read the meaning of article above, as quoted from the HTML5 manual, and you should understand.

article Element
This is a double tag element, that is:

<article>
</article>

article elements can be nested. The article element should not have a nested main element. The article element is a block level element.

Article Heading
The article element is a sectioning content element and any sectioning content element should have a heading. If the article has the main content for the web page, then its heading can be the h1 or h2 element.

article or main Element
From time to time, you will have to decide whether to use the article element or the main element for the main web page content. The main element is not a sectioning content element; it is a grouping element. If the main content is an article (see meaning of article above), then use the article element, which may have nested articles such as comments. If the main content is not an article, then use the main element. Many web pages should have but the main element. You should not use both; that is, you should not use the main element and the article element for the main content. If the main element is used, it can have zero, one or more article elements. Remember, an article is a composition (short essay) or long composition.

If your main content is not an article and goes into the main element, then the main element has to have a heading element, which can be the h1 or h2 element.

If the web page is short, say less than two vertical screens, then you can omit the main element altogether and use only section elements for the whole page.

No article can ever have a main element descendant; that is, no article should nest a main element.

Comment
A comment uses the article element. That is, the text of a comment goes into the article element. A comment and its article tags will normally be nested in a larger article. A comment is usually given by a reader of the web page, and not the author of the web page (article). You will need to use DOM and ECMAScript to fit in the comment text and its pair of tags. So you can end up with something like this:

    <article>
        <h2>Main Article Heading</h2>

        <!- - section elements of the main article  -->

        <section>
            <h3>Comments</h3>
            <article>
                <p>the comment in paragraph element</p>
            </article>
            <article>
                <p>the comment in paragraph element</p>
            </article>
        </section>
    </article>

The paragraphs for a comment are not in a section element. The paragraphs for the main article are in section elements.

If an article is short, such as for a comment, then the article can go into the section element. A long article, nests section elements. If there is only one comment, then the article element for the comment goes directly into the main article element and does not need to go into a section element.

Well, before we leave this part of the series, know that sectioning elements are the body, section, article, nav and aside elements. Also know that sectioning root elements are the body, blockquote, fieldset, figure and td elements. If you have been reading the series in this volume, in the order given, then you should know the meaning of the body, section, article, blockquote, figure and td elements. td is for HTML Table cell. The nav, aside and fieldset elements will be explained later.

Let us stop here for now, and continue in the next part of the series.

Chrys

Broad Network

Related Articles

HTML article Element

Sectioning Content – Part 2

Introduction

Related Links

Comments