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

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">
  <meta charset="utf-8">
  <title>The Dunbar Project</title>   
    <h1>The Dunbar Project</h1>
	<h2>In the Shadow of Downtown Tucson</h2>
	<nav id="sitenav">
	    <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>
	</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">
	    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.
	  <!--More content ommited-->
	</article> <!--Content-->
	<aside id="sidebar">
	  <h3>Dunbar Project</h3>
	    <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>
	  <h3>Coalition Partners</h3>
	    <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>
	  <h3>Individual Members</h3>
	    <ol> <!--List of donors Omitted--></ol>
	</aside> <!--sidebar-->
	  <p id="note501c3">
	    The Dunbar Project is a 501c(3) organization, and your contributions are tax deductible.
	  <p id="copyright">
	    Copyright &copy; 2006 by the Dunbar Project. Questions? <a href="">Mail the
	</footer> <!--footer-->
  </div>  <!--main-->

Open in new window

Who is Participating?
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
Going to the spec is your best resource
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>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Testing 1...2...3..</title>
      height 400px;
      border-style: solid;
      border-color: red;
      height 300px;
      border-style: solid;
      border-color: blue;
    <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>
    <h1>This is a test</h1>
    <p>This is a paragraph</p>

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.
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
This page 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'.
burnedfacelessAuthor Commented:
Thanks for the links, just what I was looking for.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.