XHTMLboy Posted September 25, 2011 Share Posted September 25, 2011 Hi, been learning HTML5 for a day now and am stuck on two things. One of them is section, why do you need section when you got div? I mean does the section tag just replace the div tag or do you use them both together and how? Also i came across something called a hgroup, why do you need to use hgroup when you got header which does the exact same. I think :S And thanks for your help people Link to comment Share on other sites More sharing options...
Synook Posted September 25, 2011 Share Posted September 25, 2011 The <section> element is semantic (that is, it is used to add meaning to your markup), and is to be used when you actually have a "section" of text you want to mark up (a section is generally directly subsidiary to a chapter, or the highest level in articles (note there is also an <article> element)). The <div> or "division" element is semantically neutral, and so you are supposed to use it where nothing else is appropriate. Remember that these elements, and all elements in HTML 5, aren't actually for styling your page (that's what CSS does), but for describing its structure, and the meaning of the contents. This page explains the <hgroup> element fairly well - basically you use it when you want to group together several <h[1-6]> elements together to form a single "header", e.g. in a header-subheader situation (while <header> is for grouping <h[1-6]> elements with other types). How it is logical to have multiple levels of header in one header is questionable in my opinion, but there you go . <article> <header> <h1>My article</h1> <p>Published today</p> </header> <section> <hgroup> <h2>The first section</h2> <h3>About random things!</h3> </hgroup> <p>This is some random text.</p> <div class="exercise">There is no specific tag for "exercises", so we have to use the generic division.</div> </section></article> Link to comment Share on other sites More sharing options...
XHTMLboy Posted September 25, 2011 Author Share Posted September 25, 2011 Oh ok i kinda get that :/ so let me get this right the <div> tag is a placeholder for all of your content to go inside of so you can basicly group all of your content together so you can style it later with css. And you just use a <section> tag to put all of your content inside of? So the <section> tag is the same as the <div> tag? Then whats the point in the <div> tag when the <section> tag does the same thing? HELLP? Link to comment Share on other sites More sharing options...
Ingolme Posted September 25, 2011 Share Posted September 25, 2011 The <div> element has no semantic meaning. You only need to use it if you can't find another element that gives meaning to your content. It's about semantics. About giving meaning to your content. http://en.wikipedia.org/wiki/Semantic_Web Link to comment Share on other sites More sharing options...
XHTMLboy Posted September 25, 2011 Author Share Posted September 25, 2011 Thanks guys, so i'll use the <section> instead of <div> to group my content. And what do you mean by giving meaning to content? :/ Link to comment Share on other sites More sharing options...
XHTMLboy Posted September 25, 2011 Author Share Posted September 25, 2011 So just use <section> around the actual content, and <div> to act as a barrier to move your content with css? Link to comment Share on other sites More sharing options...
Ingolme Posted September 25, 2011 Share Posted September 25, 2011 It means that machines will be able to classify content based on what it is. If you use the <address> tag, a machine will be able to understand that what's in it is an e-mail address: My e-mail address is <address>me@example.com</address> Only use the <section> tag if the content within it is actually a section of the page. If the content is a navigation menu, use <nav> instead. If it's the header or footer of the website, use the <header> or <footer> tags. Link to comment Share on other sites More sharing options...
XHTMLboy Posted September 25, 2011 Author Share Posted September 25, 2011 So like this? <!DOCTYPE html><html lang="en"><head> <meta charset=UTF-8> <title>Home</title></head><body> <div id="wrapper"> <header> <h2>My heading</h2> <hgroup> <h3></h3> </hgroup> </header> <section> <h1>Section of page.</p> <aside>Content related to page content?</aside> </section> <footer> <p><small>© Example code.</small></p> </footer> </div></body></html> Link to comment Share on other sites More sharing options...
XHTMLboy Posted September 25, 2011 Author Share Posted September 25, 2011 @Ingolme Thanks, i get it alot more now thanks. So you dont have to use <div></div> And if so can you tell me in what situation you would have to you a <div>. THANKS Link to comment Share on other sites More sharing options...
Ingolme Posted September 25, 2011 Share Posted September 25, 2011 You use <div> when there are no other elements to describe the content. Given all the new elements there are, that's difficult. There's even an <article> element for new articles. Whenever you're going to put a <div> somewhere, just look through the reference to see if one of the HTMl 5 elements matches the content you have. Link to comment Share on other sites More sharing options...
XHTMLboy Posted September 25, 2011 Author Share Posted September 25, 2011 Ok, so in other words i can use a "Section" inside of a "Div" for each part of that page, so then you can style your content using that section inside of the div, and then position that div on the webpage?? Link to comment Share on other sites More sharing options...
Don E Posted September 25, 2011 Share Posted September 25, 2011 The way I go about deciding which element to use in regards to <div> or <section> has to do with specificity. In a way they are the same. Div is like a generic block element though. <span> is also like a generic element but instead of block, it's inline. In CSS though, you can modify it to be block. It looks like they made these new elements for HTML5 because they probably said since people are using <div> for headers, footers, etc(in the past), why not just make new elements that describe those things and give them their own name like <header>, <footer> etc, instead of using <div>. Link to comment Share on other sites More sharing options...
Ingolme Posted September 25, 2011 Share Posted September 25, 2011 Why not just apply all the CSS to the section and forget the div altogether? Link to comment Share on other sites More sharing options...
Wolverine Posted January 5, 2012 Share Posted January 5, 2012 Think of section like when you write a book: so it looks something like: Chapter one... The beginning Chapter two. the middle chapter three the end. Each chapter would be a <section></section> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.