CODEWITHSUNDEEP
html
Saher Elgendy
Saher Elgendy

Reputation: 1619

Is it acceptable to use section tag anywhere in the page?

Is it an acceptable practice to use section tag as a child anywhere in the page or it should be always a main tag???

For example:

 <section class="software-development">
   <h2>
     <span>Software</span>
     <span>Development</span>                   
   </h2>
   <div class="development-areas">
     <section class="web-apps">     
          <h2>Web Applications</h2>
          <p>dolor ipsum........</p>
     </section>
     <section class="mobile-apps"></section>
     <section class="desktop-apps"></section>
   </div>     
 </section>

Upvotes: 1

Views: 1158

Answers (2)

IvanS95
IvanS95

Reputation: 5732

You can use almost any HTML tag for anything you want, but the idea of semantic tags is to give meaning to the content of your page.

In this particular case, you can use the section tag (or even the article) to define any self-contained part of your page, there's nothing wrong with that, in fact it IS a section after all with its own title. Don't think of the use of the tags as a hierarchy all the time; think of what the element your creating actually is in the page and use the appropiate tag;

This is a great article that can help you clear everything regarding semantic tags: https://www.lifewire.com/why-use-semantic-html-3468271

Just a quote from the same article:

Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph. This is both semantic and presentational, because people know what paragraphs are and browsers know how to display them.

More information for the section tag based on Mozilla's Docs:

  • Each should be identified, typically by including a heading (<h1>-<h6> element) as a child of the element.

  • If it makes sense to separately syndicate the content of a <section> element, use an <article> element instead.

  • Do not use the <section> element as a generic container; this is what <div> is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.

You can read more in this question as well: https://stackoverflow.com/a/53229971/8437694

Upvotes: 4

Sami Hult
Sami Hult

Reputation: 3082

No, not anywhere. The specs say the following (emphasis mine):

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

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.

Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

So <section> could easily be put almost anywhere without fighting against its semantics.

Technically, you can use <section> anywhere "where flow content is expected".

Upvotes: 1

Related Questions