forked from iandevlin/html5bones
-
Notifications
You must be signed in to change notification settings - Fork 0
/
main-template.html
127 lines (93 loc) · 6.85 KB
/
main-template.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en"> <!-- Set this to the main language of your site -->
<head>
<meta charset="utf-8">
<title>HTML5 Bones :: PAGE TITLE</title>
<!-- Enter a brief description of your page -->
<meta name="description" content="">
<!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width,
and setting the initial page zoom level to be 1 (initial-scale=1.0), and fixing width=device-width for iOS9 (shtink-to-fit=no) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<!-- Add normalize.css which enables browsers to render all elements more consistently and in line with modern standards as it only targets particular styles that need normalizing -->
<link href="css/normalize.css" rel="stylesheet" media="all">
<!-- For legacy support (IE 6/7, Firefox < 4, and Safari < 5) use normalize-legacy.css instead -->
<!--<link href="css/normalize-legacy.css" rel="stylesheet" media="all">-->
<!-- Include the site stylesheet -->
<link href="css/styles.css" rel="stylesheet" media="all">
<!-- Include the HTML5 shiv print polyfill for Internet Explorer browsers 8 and below -->
<!--[if lt IE 9]><script src="js/html5shiv-printshiv.js" media="all"></script><![endif]-->
</head>
<body>
<!-- The page header typically contains items such as your site heading, logo and possibly the main site navigation -->
<!-- ARIA: the landmark role "banner" is set as it is the prime heading or internal title of the page -->
<header role="banner">
<h1><abbr title="HyperText Markup Language 5">HTML5</abbr> Bones</h1>
<!-- ARIA: the landmark role "navigation" is added here as the element contains site navigation
NOTE: The <nav> element does not have to be contained within a <header> element, even though the two examples on this page are. -->
<nav role="navigation">
<!-- This can contain your site navigation either in an unordered list or even a paragraph that contains links that allow users to navigate your site -->
</nav>
</header>
<!-- If you want to use an element as a wrapper, i.e. for styling only, then <div> is still the element to use -->
<div class="wrap">
<!-- The <main> element is used to enclose the main content, i.e. that which contains the central topic of a document -->
<!-- ARIA: the landmark role "main" is added here as it contains the main content of the document, and it is recommended to add it to the
<main> element until user agents implement the required role mapping. -->
<main role="main">
<!-- The <section> element can be used to enclose content that comes under a related heading.
NOTE: The <section> element can contain <article> elements and vice versa, if you think the content warrants it. -->
<section>
<!-- This is the section's header. It contains the heading and navigation links for within the section -->
<header>
<h2>Getting Started</h2>
<!-- ARIA: the landmark role "navigation" is added here as the element contains page navigation -->
<nav role="navigation">
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#instructions">Instructions</a></li>
</ul>
</nav>
</header>
<!-- The <article> element can be used to enclose content that still makes sense on its own and is therefore "reusable" -->
<article id="introduction">
<!-- A <header> element is not required here as the heading only contains a single <h3> element -->
<h3>Introduction</h3>
<!-- Content -->
<p>Welcome to <abbr title="HyperText Markup Language 5">HTML5</abbr> Bones. This is a template that contains comments to aid you with setting up your <abbr title="HyperText Markup Language 5">HTML5</abbr> document.</p>
</article>
<!-- The <article> element can be used to enclose content that still makes sense on its own and is therefore "reusable" -->
<article id="instructions">
<!-- A <header> element is not required here as the heading only contains a single <h3> element -->
<h3>Instructions</h3>
<!-- Content -->
<ol>
<li>Read the comments in this template</li>
<li>Decide how you think your content may fit into the template</li>
<li>Start building your document</li>
</ol>
</article>
</section>
</main>
<!-- An <aside> is used to enclose content that is additional to the main content but not essential. If it were removed, the meaning of the main content should not be lost, but the content of the <aside> also retains its meaning.
NOTE: the aside is placed outside of the <main> element as while its content is related to the content that is within the <main>
element, it is not part of it -->
<!-- ARIA: the landmark role "complementary" is added here as it contains supporting information for the main content that remains meaningful even when separated from it -->
<aside role="complementary">
<!-- A <header> element is not required here as the heading only contains a single <h3> element -->
<h3>Did you know?</h3>
<!-- Content -->
<p>The article and section elements cause a lot of confusion when people are trying to decide how and when to use them. The article: <a href="http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article">section or article?</a> might help you choose.</p>
</aside>
</div>
<!-- The main page footer can contain items such as copyright and contact information. It can also contain a duplicated navigation of your site which is not usually contained within a <nav> -->
<!-- ARIA: the landmark role "contentinfo" is added here as it contains metadata that applies to the parent document -->
<footer role="contentinfo">
<!-- The <address> element contains contact information for the nearest <article> or <body> element. This example is for the <body> -->
<address>
<p>For further information, please contact <a href="mailto:[email protected]">Max Mustermann</a>.</p>
</address>
<!-- Copyright information can be contained within the <small> element. The <time> element is used here to indicate that the '2016' is a date -->
<small>Copyright © <time datetime="2016">2016</time></small>
</footer>
</body>
</html>