08 html grouping


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

08 html grouping

  1. 1. Grouping things with HTMLSo they can be positioned and styled as a unit
  2. 2. We needgroupings tospecify areasof our pages.
  3. 3. <div id="head">!…!</div>!<div id="links">! <div id="specialty">! </div>! HTML has <div id="categories">! </div>! several <div id="global">! </div>! elements for</div>!<div id="mainBody">! grouping <div id="hotPicks">! <div id="hotPicksHead">! </div>! <div id="hotPicksBanner">! …!</div>!
  4. 4. Elements come in two flavors: block-level and inlineBlock-level Inline—  Rectangular objects —  Part of the flow of—  Have heights, widths, document text & margins —  No concept of width—  Line breaks before or height and after —  <span>, <a>, <img>—  <div>, <p>, <h1>, <ol>, <ul>, <hr>
  5. 5. Spans allow us to group things without disrupting the flow of text before and after<p>This is a <span style="alert">warning</span> so consider yourself warned.</p>!
  6. 6. Examples of divs<div id="pageHeader">!</div>!<div id="articleHeader">!</div>!<div id="article">!</div>!<div id="articleFooter">!</div>!<div id="links">!</div>!
  7. 7. "   Semantic elements allow for meaningful groupings<header id="page">!</header>!<header id="article">!</header>!<article>!</article>!<footer>!</footer>!<nav>!</nav>!
  8. 8. But why use semantic elements?
  9. 9. Semantic tags communicate meaning—  <p> tags hold paragraphs—  <li> tags hold list elements—  But who can figure out what <div>s hold?
  10. 10. HTML5 Semantic Elements" section" nav" article" aside" hgroup" header" footer
  11. 11. The W3C spec says the section element…"… represents a generic document orapplication section. A section, in this context, isa thematic grouping of content, typically with aheading. "Huh?!
  12. 12. A section is the place to put generaltext in your documentBasically any grouping of things that conceptuallybelong together—  Chapters—  Each tabbed pages in a tabbed dialog box—  Sections of a thesis—  A web sites home page could be split into sections for an introduction, news items, contact information
  13. 13. Articles are for content that could besyndicated—  User-submitted comments—  Newspaper articles—  Magazine articles—  Blog entries—  Forum posts—  etc.
  14. 14. The differences between sections andarticles are subtleUse an article if … Use a section if …It is self-contained It is part of a bigger thingIt stands alone It seems to require other parts to make it completeSomeone might read it over a cup of "Why anyone just sit and read this?"coffeeIt might make sense to republish it on No one would republish it because it onlyanother web page has value on your siteIt would have a title It would have a heading
  15. 15. A nav is a section with linksto other pages or to partswithin the page—  Site maps—  Those sections often found in the left column
  16. 16. nav Not a nav
  17. 17. Oh, by the way … an aside is a sectionthat is related to the main content—  "Theaside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. "
  18. 18. asides would have the same kinds ofthings as a sidebar in a printed magazineor newspaper—  Pullquotes—  Sidebars—  Advertisement sections—  Groups of nav elements
  19. 19. hgroup is a wrapper for one or moreheadings—  "The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines."
  20. 20. An hgroup is only needed when youhave multiple headings—  hgroup not recommended<article>! <h1>Title goes here</h1>! <p>Lorem Ipsum dolor set amet</p>!</article>!—  hgroup recommended<article>! <hgroup>! <h1>Title goes here</h1>! <h2>Subtitle of article</h2>! </hgroup>! <p>Lorem Ipsum dolor set amet</p>!</article>!
  21. 21. A header contains thestuff at the top of asection —  "Theheader element represents a group of introductory or navigational aids."
  22. 22. A footer contains thestuff at the bottom of asection —  About the author —  Company data —  Links —  Date it was written —  Copyright notice
  23. 23. Conclusion—  HTML has provided us with inline spans and block divs to group things for years now—  But now we have semantic elements that will help us with better organization, abstraction, and SEO
  24. 24. Further study—  Article on semantic HTML ◦  http://www.vanseodesign.com/web-design/html5- semantic-elements/