2

I'm having trouble figuring out if my main page content should be in an article element. I feel it shouldn't be because it's the main page content - if it's supposed to be in an article element how does a search engine determine which article is the actual page content? the first one?

Which of the 2 examples below are a correct use or is neither correct?

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <header>Competitor</header>
    <main>
        <div>
            <h1>t’s Time To Run Your First Ultramarathon!</h1>
            <p>As marathons continue to gain popularity, so to do ultramarathons. Are you ready to move up?</p>
            <h2>Journey into the Unknown.</h2>
            <p>You may have mastered-or at least plateaued in-the marathon.</p>
        </div>
        <section>
            <h1>Trail News</h1>
            <article>
                <h1>Obstacle course racing goes big time!</h1>
                <p>Huge participation numbers and TV contracts are increasing exposure</p>
            </article>
        </section>
    </main>
</body>
</html>

Or this (main body content in an article control) :

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <header>Competitor</header>
    <main>
        <article>
            <h1>t’s Time To Run Your First Ultramarathon!</h1>
            <p>As marathons continue to gain popularity, so to do ultramarathons. Are you ready to move up?</p>
            <h2>Journey into the Unknown.</h2>
            <p>You may have mastered-or at least plateaued in-the marathon.</p>
        </article>
        <section>
            <h1>Trail News</h1>
            <article>
                <h1>Obstacle course racing goes big time!</h1>
                <p>Huge participation numbers and TV contracts are increasing exposure</p>
            </article>
        </section>
    </main>
</body>
</html>
Dean Davids
  • 4,174
  • 2
  • 30
  • 44
user3693957
  • 669
  • 1
  • 5
  • 6

2 Answers2

1

An <article> is simply a piece of text on the webpage which is meant to make sense on it's own. You can feel free to put anything inside the <main> tag which is unique to that page as crawlers and web browsers interpret anything inside the <main> tag as the main content of the page.

<article> tags are normally used in blog and news posts to differentiate between different news articles (hence it was called <article>)

You can use any of: <div> <p> <span> <article> <h1> and others.

You only need to use <div> tags when you want to customise the positioning of the text in the webpage.

For More information on the <main> tag visit this link.

MistUnleashed
  • 309
  • 1
  • 3
  • 15
  • i'm still a little confused on if I should use an article element for my main content. it can stand on its own so it passes the requirement for the article element but if I have multiple article elements on a page how does the search engine or anything know what my page title is if its wrapped in 1 of x article elements. I've seen places that put the pages

    outside the article element but then my article cant stand on its own because it has no title.

     – user3693957 May 31 '14 at 20:53
  • Your page title goes in the `` tags in the head, not in the main body – MistUnleashed May 31 '14 at 20:55
  • well, I looked at the w3schools link on the main element and they don't use an article element for the main content. that is how I think it should be but I see it misused so much that it made be wonder. – user3693957 May 31 '14 at 20:56
  • the title element is not displayed on the page, you still should have an h1 tag for the page title. – user3693957 May 31 '14 at 20:59
  • As i've mentioned above, `
    ` tags are used to display separate information (as you have correctly done in the code), yes people misuse them because they dont understand how they work! At least in your webpage you will understand this!
     – MistUnleashed May 31 '14 at 20:59
  • If i have answered your question, please feel free to mark it as Answer by pressing the green tick to the left of the post, thanks. – MistUnleashed May 31 '14 at 21:04
0

The main element can be used as a container for the dominant contents of another element.

WHATWG spec

The WHATWG description of the element is rather abstract, so let's view the W3C spec:

The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application. The main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or applications main function is that of a search form).

W3C spec

If your content represents the main topic of a document and it is unique to that document, you should definitely use main.

Note that W3C spec has some restrictions:

  • only one main per document
  • it can’t be used as a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.

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.

WHATWG

'... a complete, or self-contained ...' content means that it makes sense on its own, when all the surrounding content is stripped away. Note that this content is also meant for syndication.

When the main content of the page (i.e. excluding footers, headers, navigation blocks, and sidebars) is all one single self-contained composition, that content may be marked with an article, but it is technically redundant in that case (since it's self-evident that the page is a single composition, as it is a single document).

WHATWG

The main element can include more than one article element if necessary.

Important note:

The main element is distinct from the section and article elements in that the main element does not contribute to the document outline.

Igor Gilyazov
  • 777
  • 1
  • 6
  • 14