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
36 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
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
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…

910 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now