-
Notifications
You must be signed in to change notification settings - Fork 0
/
html5-h1.html
68 lines (62 loc) · 4.05 KB
/
html5-h1.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
<html>
<head>
<meta charset="utf-8" />
<title>Questão de H1 em páginas com HTML5</title>
</head>
<body>
<h1>Como fica a questão do H1 - um por página - com o HTML5?</h1>
<section>
<span>Infos retiradas do artigo <a href="http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824" target="_blank">The Truth About Multiple H1 Tags in the HTML5 Era</a> e <a href="http://blog.teamtreehouse.com/use-html5-sectioning-elements">Treehose</a></span> e <a href="http://tableless.com.br/sections-html5/">Tableless</a>
<p>
<pre>
<ul>
<li>< article > : deve ser usado quando um pedaço do conteúdo pode ser totalmente retirado da página que a página não vai perder o sentido. Ou seja, The < article> element should contain a piece of self-contained content <strong>that could be distributed outside</strong> the context of the page.</li>
<li>< section > : "deve ser usando quando um conteúdo está agrupado de acordo com um tema, mas faz sentido no contexto do conteúdo que rodeia." Ou seja, O elemento < section > é usado para representar um grupo de conteúdo relacionado. Isso é semelhante ao efeito de um elemento < article> com a principal diferença é que o conteúdo dentro de um elemento < section> não precisa necessariamente fazer sentido fora do contexto da página/com o contexto das tags de fora.</strong></li>
<li>< nav > : links para navegação</li>
<li>< aside > : "everything else" > todo o resto</li>
<li><br/>Para indicar a principal área da página, usar a tag < main >.</li>
</ul>
<h2>Exemplo:</h2>
<code>
< !DOCTYPE html>
< html >
< head >
< title >HTML5 markup example< / title >
< / head >
< body >
< div >
<strong>< h1 >Whackamoon Legumes!< / h1></strong>
</ div >
< article >
<strong>< h1 >The proper use of peanuts< / h1 ></strong>
< h2 >How to eat peanuts < / h2>
< p >Peanuts can be eaten with salt.< / p >
< p >This is an acceptable use of peanuts.< /p>
< h3 >Superior peanut eating methods< /h3>
< p >Peanuts are infinitely better when combined with chocolate.< /p>
< p >We recommend this approach for best results< /p>
< h2>Incorrect application of peanuts< /h2>
< p>Peanuts should not be used to fill parking meters.< /p>
< p>They will not be effective in this capacity.< /p>
< /article>
< article >
<strong>< h1>Boiling beans< /h1></strong>
< h2>Is boiling beans really worth it?< /h2 >
< p>Let's be honest, it takes ages.< /p >
< p>We advise just buying canned beans instead.< /p >
< / article >
< / body >
< / html >
</code>
</pre>
</p>
<p>
Note that in HTML5, <strong>< article ></strong> tags are specifically used to indicate "a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content." (source: W3C)
The appearance of the <strong>(article)</strong> element next to our article headings, rather than the heading tags as we saw before, tells us these things are now occurring in the outline:
Each article has been recognized as a self-contained piece of content with equal weight of importance to one another.
The article headlines are now being correctly matched to the articles as meaningful labels that represent their subject matter.
Because the articles are correctly labeled with their own headings, the site title is no longer being interpreted as representative of the content in those articles.
</p>
</section>
</body>
</html>