Francisco Aguilera
Francisco Aguilera

Reputation: 3482

HTML5 Philosophy: Omission of certain semantic elements?

I am wondering if this applies.

Examples:

  1. main tag

    The HTML5 specification says:

    The main element represents the main content section of the body of a document or application. The main content section consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.

    Does this, therefore, imply that:

    If the only content that lives within your page is the main content and only the main content, you should exclude the tag since there is nothing to relate it to but itself?

  2. section tag

    The HTML5 specification says:

    The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content.

    If the only content that lives within your page is within a section, then does that mean that your page should not be sectioned, but rather be a single element, and therefore you should not use a section tag?

My thoughts:

I think the main tag should be omitted in the case provided, however, the section tag should be required since a page can be sectioned off into a single section. The word section can be used to describe a single part of a whole regardless of whether that part is the only one of the whole.

The Layout I was thinking about:

doctype html
html
  head
    ...
  body
    header
    main
      section
    nav
    footer

becomes:

doctype html
html
  head
    ...
  body
    header
    section
    nav
    footer

Upvotes: 0

Views: 90

Answers (1)

potatopeelings
potatopeelings

Reputation: 41075

I think the main tag should be omitted in the case provided, however, the section tag should be required since a page can be sectioned off into a single section.

There was a similar suggestion in an earlier candidate recommendation (see https://www.w3.org/TR/2012/CR-html5-20121217/common-idioms.html#the-main-part-of-the-content) which recommended implicit marking of the main content OR having body mark up the main content with elements (like header, nav, footer) exclude the other (non main content) bits (as you suggested).

BUT, this section was later dropped (see https://lists.w3.org/Archives/Public/public-html/2013Feb/0037.html or just search for Re: Week 4/5: Staged WHATWG patches for HTML5.1 / HTML5.0 CR in the public-html list at https://www.w3.org/Search/Mail/Public/advanced_search). To quote

I do not think this section should be included, as it states that there is not a dedicated element for marking up the main part of the content of a page.This contradicts the definition of main in HTML 5.1


Additionally, if you look at https://www.w3.org/html/wg/wiki/User:Sfaulkne/main-usecases#Introduction, there are use cases where not using a main tag would necessitate an alternative (like role="main" for ARIA or some structure based CSS for styling), so IMO it would be preferable to have the main tag even if you were just going by the use cases.

Note - it's still recommended that you use role="main" even if you the main tag (until all browsers automatically map the main element to role="main")


Under the main tag, you could have a section tag if you want to indicate that it forms part of something else (see https://www.w3.org/TR/html5/sections.html#article-or-section?)

And on a related note, while you can markup content with an article tag when the main content of the page (excluding all the extra bits) is self contained, the spec says that it is technically redundant (see https://www.w3.org/TR/html5/sections.html#the-article-element). To quote

...the content should be marked up with a main element and the content may also be marked with an article, but it is technically redundant in this case (since it's self-evident that the page is a single composition, as it is a single document).


To summarize

  1. You need the main tag.
  2. You don't need the section tag unles you want to indicate that it forms part of something else.

Upvotes: 1

Related Questions