[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
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
Medium Priority
?
107 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 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 1000 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 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 1000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
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.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

650 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