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
22 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 82

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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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…

708 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

9 Experts available now in Live!

Get 1:1 Help Now