Solved

Is this <div="main"> obsolete in HTML5? What is the purpose of the section tag? How does it interact with heading level tags?

Posted on 2016-11-13
3
64 Views
Last Modified: 2016-11-14
This 3 part question came about from an example I'm working on, and random pieces of HTML5 I've acquired (my ducks aren't really in a row).

Here's an example from a book I'm working out of. It uses a <div="main"> to wrap content. Is this some xHTML tomfoolery?

Could I just replace this with <section id="main"> and wrap the section there or would that be misusing the section tag? In other words does the section tag just replace the way people used to divide sections with div tags and give them IDs?

Other question is how does the section tag interact with heading level tags? I think I understand you would divide sections the way you used to with h tags so
-point (<h1>)
  -sub point2(<h2>)
     -sub sub point 1(<h3>)
     -sub sub point 2(<h3>)
  -sub point 2(<h2>)
    -another sub sub point(<h3>)

So if my understanding is correct - that's how it was. How is it now (how do section tags change that - do they replace the heading, do they interact with the heading?)

Here's the example with the <div id="main">

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>The Dunbar Project</title>   
</head>
<body>
  <header>
    <h1>The Dunbar Project</h1>
	<h2>In the Shadow of Downtown Tucson</h2>
	<nav id="sitenav">
	  <ol>
	    <li><a href="index.html">Home</a></li>
		<li><a href="about/">About the Dunbar Project</a></li>
		<li><a href="gallery/">Photo Galleries</a></li>
		<li><a href="donate/">Donate</a></li>
		<li><a href="contact/">Contact</a></li>
	  </ol>
	</nav> <!--sitenav-->
  </header> <!--header-->
  <div id="main">
    <article id="content">
	  <h3>Welcome to the Dunbar Project Website</h3>
	  <img src="images/banner.png" alt="Dunbar School">
	  <p>
	    Dunbar school was completed in January 1918, for the purpose of educating Tucson's African-American students. The school was named after 
		<a href="poet.html">Paul Laurence Dunbar</a>, a renown African-American poet. African-American children in first through ninth grades attended
		Dunbar until 1951, when de jure segregation was eliminated from the school systems of Arizona. When segregation in Arizona was eliminated, 
		Dunbar School became the non-segregated John Spring Junior High School, and continued as such unti 1987 when the school was closed permanently.
	  </p>
	  <!--More content ommited-->
	</article> <!--Content-->
	<aside id="sidebar">
	  <h3>Dunbar Project</h3>
	  <ol>
	    <li><a href="plan/">The Dunbar Site Plan</a></li>
		<li><a href="auditorium/">Dunbar Auditorium</a></li>
		<li><a href="history/">School History</a></li>
		<li><a href="proposal/">Project Proposal</a></li>
		<li><a href="donors/">Dunbar Donors</a></li>
		<li><a href="poet.html">About Paul Lawrence Dunbar</a></li>
		<li><a href="links/">Related Links</a></li>
	  </ol>
	  <h3>Coalition Partners</h3>
	  <ol>
	    <li>The Tucson Urban League</li>
		<li>The Dunbar Alumni Association</li>
		<li>The Dunbar/Spring Neighborhood Association</li>
		<li>The Juneteenth Festival Committe</li>
	  </ol>
	  <h3>Individual Members</h3>
	    <ol> <!--List of donors Omitted--></ol>
	</aside> <!--sidebar-->
	<footer>
	  <p id="note501c3">
	    The Dunbar Project is a 501c(3) organization, and your contributions are tax deductible.
	  </p>
	  <p id="copyright">
	    Copyright &copy; 2006 by the Dunbar Project. Questions? <a href="mailto:webmaster@theedunbarproject.com">Mail the
	    Webmaster</a>
	  </p>
	</footer> <!--footer-->
  </div>  <!--main-->
</body>
</html>

Open in new window

0
Comment
Question by:burnedfaceless
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 250 total points
ID: 41885850
This page http://www.w3schools.com/html/html5_semantic_elements.asp explains 'semantic elements'.  'section' is one of them but otherwise it is a generic element like 'div' is.  In your example above, there is no advantage to replacing the 'div' with 'section'.
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 250 total points
ID: 41886009
Going to the spec is your best resource https://www.w3.org/TR/html5/sections.html#the-section-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.

Based on this, your example looks good.

Section and div tags are block level where a heading is inline.  

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Testing 1...2...3..</title>
  <style>
    section{
      margin:30px;
      width:300px;
      height 400px;
      border-style: solid;
      border-color: red;
    }
    
    div{
      margin:20px;
      padding:10px;
      width:200px;
      height 300px;
      border-style: solid;
      border-color: blue;
    }
  </style>
</head>
<body>
<section>
  <div>
    <h1>Topic Sentance</h1>
      <h2>Sub Topic 1</h2>
      <p>This is a paragraph</p>
    <h2>Sub Topic 1</h2>
      <p>This is a paragraph</p>
      <h3>Sub sub Topic 1</h3>
      <p>This is a paragraph</p>
 </div>
  
</section>
  
  <section>
  <div>
    <h1>This is a test</h1>
    <p>This is a paragraph</p>
 </div>
  
</section>
</body>
</html>

Open in new window


> Could I just replace this with <section id="main"> and wrap the section there
It depends on how the Div is used. Most likely best to leave as is if there is styling involved.

> How is it now (how do section tags change that - do they replace the heading, do they interact with the heading?)
No, section tags do not replace heading tags.
0
 

Author Closing Comment

by:burnedfaceless
ID: 41886433
Thanks for the links, just what I was looking for.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question