Created
October 26, 2013 18:11
-
-
Save leotumwattana/7172713 to your computer and use it in GitHub Desktop.
HTML5:CSS3:notes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| HTML 5 | |
| ------ | |
| New Tags | |
| -------- | |
| <header> | |
| <nav> | |
| <section> | |
| <article> | |
| <aside> | |
| <footer> | |
| DOCTYPE | |
| ------- | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| Head Element | |
| ------------ | |
| <meta charset="UTF-8"> | |
| <link rel="stylesheet" href="style.css"> | |
| Header tag | |
| ---------- | |
| "A group of introductory or navigational aids." | |
| - doesn't have to be only at the top of the page. | |
| - add the tag to any containing element | |
| Example: | |
| <section id="zombie-family"> | |
| <header> | |
| <hgroup> | |
| <h1>We Are Family</h1> | |
| <h2>All your brains are belong to us</h2> | |
| </hgroup> | |
| </header> | |
| </section> | |
| Nav tag | |
| ------- | |
| "A section of the page that links to other pages | |
| on the site, or the other sections of that | |
| particular page." | |
| Example: | |
| <nav> | |
| <ul> | |
| <li>Home</li> | |
| <li>About</li> | |
| <li>Work</li> | |
| <li>Shop</li> | |
| <li>Contact</li> | |
| </ul> | |
| </nav> | |
| Section tag | |
| ----------- | |
| "A grouping of content based around a theme." | |
| - can replace some <div> elements | |
| - MUST be able to stand alone | |
| Example: | |
| <section> | |
| <header> | |
| <h1>ACC Basketball News</h1> | |
| </header> | |
| <h2>UNC Beats Duke In Championship Game!</h2> | |
| <p>The Blue Devils are routed by the Tarheels | |
| at Cameron Indoor Stadium.</p> | |
| </section> | |
| Article tag | |
| ----------- | |
| "An independent, self-contained composition." | |
| - news posts, magazine articles, user comments | |
| - a section can contain multiple articles | |
| > "One way to check if article is the most appropriate | |
| element is to see if an article's content makes | |
| sense on its own. For example, would it make sense | |
| on its own when viewed in an RSS Reader like | |
| Reeder for the iPad." | |
| - Hardboiled Web Design, Andy Clarke, PG 95 | |
| Example: | |
| <section> | |
| <header> | |
| <h1>ACC Basketball News</h1> | |
| </header> | |
| <article> | |
| <header> | |
| <h1>UNC Beats Duke In Championship Game!</h1> | |
| </header> | |
| <p>The Blue Devils are routed by the Tarheels | |
| at Cameron Indoor Stadium.</p> | |
| </article> | |
| </section> | |
| Aside tag | |
| --------- | |
| "Content related to an article, but not critical | |
| to its understanding." | |
| - i.e. The airspeed velocity of an unladen swallow | |
| - pull quotes, callouts, etc. | |
| Example: | |
| <article> | |
| <header> | |
| <h1>UNC Beats Duke In Championship Game</h1> | |
| </header> | |
| <p>The Blue Devils are routed by the Tarheels at | |
| Cameron Indoor Stadium.</p> | |
| <aside> | |
| <p>Former Duke Players Cry at Game's End</p> | |
| </aside> | |
| </article> | |
| Footer tag | |
| ---------- | |
| "Includes information that closes out a particular | |
| section of the page." | |
| - doesn't have to be only at the bottom of the page. | |
| - add the tag to any containing element | |
| Examples: | |
| <footer> | |
| <h3>Talk to Me Goose</h3> | |
| <p>© 2011 Maverick & Goose Ventures.</p> | |
| </footer> | |
| <section> | |
| <header> | |
| <h1>Top Gun</h1> | |
| </header> | |
| <p>He's too close, I'm switching to guns...</p> | |
| <footer> | |
| <p>Highway to the Danger Zone</p> | |
| </footer> | |
| </section> | |
| HTML5 shim | |
| ---------- | |
| <!--[if lt IE 9]> | |
| <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> | |
| <![endif]--> | |
| - add above in the head element |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment