| Old way | HTML5 way |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | <!DOCTYPE html> |
| <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> | <html lang="en"> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | <meta charset="utf-8" /> |
| <link rel="stylesheet" href="style-original.css" type="text/css" /> | <link rel="stylesheet" href="style-original.css" /> |
| <script type="text/javascript" src="scriptfile.js"></script> | <script src="scriptfile.js"></script> |
<section> The section element represents a generic document or application section.
Examples: A Web site's home page could be split into sections for an introduction, news items, contact information. <div> vs semantic elements (Check – how to select semantic element fig.)
<nav> Represents a section of a page that links to other pages or to parts within the page: Only sections that consist of major navigation blocks In particular
<article> A component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently reusable
Examples: Forum post, a magazine article, a user-submitted comment
<aside> A section of a page that consists of content that is tangentially related to the content
Examples: pull quotes or sidebars, for advertising, for groups of nav elements
<figure> and <figcaption> A unit of content, optionally with a caption, and that can be moved away from the main flow of the document without affecting the document’s meaning. <figure> vs <aside> : If the content is simply related and not essential, use <aside>. If the content is essential but its position in the flow of content isn’t important, use <figure>.
<hgroup> 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
<header> The header element represents a group of introductory or navigational aids.
<footer> The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element.
<time> The time element represents either a time on a 24 hour clock, or a precise date
<mark> The mark element represents a run of text in one document marked or highlighted for reference purposes.
So we have so many new semantic elements. It would be really confusing to select one of the them. For example how to select between section, article, aside, figure, or div. To solve this problem we can look into following flow diagram (This is found at html5doctor.com):
How to select among many semantic elements??
No comments:
Post a Comment