08 html grouping
-
Upload
rap-payne -
Category
Technology
-
view
304 -
download
6
description
Transcript of 08 html grouping
![Page 1: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/1.jpg)
Grouping things with HTML So they can be positioned and styled as a unit
![Page 2: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/2.jpg)
We need groupings to specify areas of our pages.
![Page 3: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/3.jpg)
HTML has several elements for grouping
<div id="head">!…!</div>!<div id="links">! <div id="specialty">! </div>! <div id="categories">! </div>! <div id="global">! </div>!</div>!<div id="mainBody">! <div id="hotPicks">! <div id="hotPicksHead">! </div>! <div id="hotPicksBanner">! …!</div>!
![Page 4: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/4.jpg)
Elements come in two flavors: block-level and inline
Block-level � Rectangular objects � Have heights, widths,
& margins � Line breaks before
and after � <div>, <p>, <h1>,
<ol>, <ul>, <hr>
Inline � Part of the flow of
document text � No concept of width
or height � <span>, <a>, <img>
![Page 5: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/5.jpg)
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>!
![Page 6: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/6.jpg)
Examples of divs <div id="pageHeader">!</div>!<div id="articleHeader">!</div>!<div id="article">!</div>!<div id="articleFooter">!</div>!<div id="links">!</div>!
![Page 7: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/7.jpg)
" Semantic elements allow for meaningful groupings
<header id="page">!</header>!<header id="article">!</header>!<article>!</article>!<footer>!</footer>!<nav>!</nav>!
![Page 8: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/8.jpg)
But why use semantic elements?
![Page 9: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/9.jpg)
Semantic tags communicate meaning
� <p> tags hold paragraphs � <li> tags hold list elements � But who can figure out what <div>s hold?
![Page 10: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/10.jpg)
HTML5 Semantic Elements
" section " nav " article " aside " hgroup " header " footer
![Page 11: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/11.jpg)
The W3C spec says the section element … "… represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading. " Huh?!
![Page 12: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/12.jpg)
A section is the place to put general text in your document Basically any grouping of things that conceptually belong together � Chapters � Each tabbed pages in a tabbed dialog box � Sections of a thesis � A web site's home page could be split into
sections for an introduction, news items, contact information
![Page 13: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/13.jpg)
Articles are for content that could be syndicated � User-submitted comments � Newspaper articles � Magazine articles � Blog entries � Forum posts � etc.
![Page 14: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/14.jpg)
The differences between sections and articles are subtle
Use an article if … Use a section if …
It is self-contained It is part of a bigger thing
It stands alone It seems to require other parts to make it complete
Someone might read it over a cup of coffee
"Why anyone just sit and read this?"
It might make sense to republish it on another web page
No one would republish it because it only has value on your site
It would have a title It would have a heading
![Page 15: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/15.jpg)
A nav is a section with links to other pages or to parts within the page
� Site maps � Those sections often found in the
left column
![Page 16: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/16.jpg)
Not a nav
nav
![Page 17: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/17.jpg)
Oh, by the way … an aside is a section that is related to the main content � "The aside 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. "
![Page 18: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/18.jpg)
asides would have the same kinds of things as a sidebar in a printed magazine or newspaper
� Pull quotes � Sidebars � Advertisement sections � Groups of nav elements
![Page 19: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/19.jpg)
hgroup is a wrapper for one or more headings
� "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."
![Page 20: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/20.jpg)
An hgroup is only needed when you have 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>!
![Page 21: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/21.jpg)
A header contains the stuff at the top of a section
� "The header element represents a group of introductory or navigational aids."
![Page 22: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/22.jpg)
A footer contains the stuff at the bottom of a section
� About the author � Company data � Links � Date it was
written � Copyright notice
![Page 23: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/23.jpg)
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
![Page 24: 08 html grouping](https://reader034.fdocuments.us/reader034/viewer/2022050905/5495c183b479593d4d8b4dfa/html5/thumbnails/24.jpg)
Further study
� Article on semantic HTML ◦ http://www.vanseodesign.com/web-design/html5-
semantic-elements/