-
Notifications
You must be signed in to change notification settings - Fork 0
/
estruturas-html5.html
75 lines (73 loc) · 4.2 KB
/
estruturas-html5.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
<!DOCTYPE html>
<html>
<head>
<title>estruturas em html 5</title>
<meta charset="utf-8" />
</head>
<body>
<header> <!--o header é a parte do topo do site podemos dizer que pod ser o cabeçalho.
é a parte que se repete em todas as paginas do site, aquilo que é igual para todas as paginas-->
topo do site + menu de navegação
<nav> menu de navegação</nav>
</header>
<!--o nav pode esta dentro ou fora dos header respeitando a ordem de edentação-->
<nav>
menu de navegação <!--tag dos menus de navegação.
então toda vez que voce for criar uma listas de links por exemplo
ou um menu de acesso para o seu site voce vai colocar ele dentro de
um tag chamada nav.
essa tag nav pode inclusive estar dentro da tag header ou tag footer
isso é uma questão de estruturar o documento, mas o seu menu deve estar
preferencialmente dentro de um nav -->
</nav>
<section>
<header><h1>titulo da seção</h1></header>
<p>conteúdo da seção</p>
<footer>rodapé da seção</footer>
seleção de conteúdo
</section> <!--a section ela é uma sessão do site, quando voce vai fazer por
exemplo uma lista de posts em um blog casa um dos posts da lista vai estar
dentro section, quando voce vai criar a listra de comentários cada um dos
comentários vai estar dentro de uma section. na barra lateral cada uidigt
pode estar de uma section.
na verdade a section é uma seção do site e geralmente dentro de uma seção
voce deve colocar uma tag de cabeçalho H1 até H6 para identificar aquela
sessão.
não quer dizer que seja obrigatório mais o indicado é que voce tenha sempre
uma troca cabeçalho dentro de uma section.-->
<article>
<header><h1>titulo do artigo</h1></header>
<p>conteúdo do artigo </p>
<footer>rodapé do artigo </footer>
post ou conteúdo da pagina <!-- article é uma tag que vai ser usada para
exibir por exemplo os posts de um blog os posts de um fórum o conteúdo
central de um pagina.
nós podemos dizer que o article é uma tag que pode existir independente
do resto do site.
como isso funciona quer dizer que se voce pagar tudo que estiver dentro
de uma tag e tirar do site e colocar em uma outra pagina a pessoa tem que
entender aquele conteúdo por si só lhe depende de outras sessões para existir
dígamos assim essa é mais o menos a lógica da tag article -->
</article>
<aside>
bara lateral (sidebar<!--barra lateral-->) <!--sempre que tu tiver um conteúdo
que vai ficar lateralmente paralelo com o conteúdo principal é indicado que voce
coloque esse conteúdo dentro de uma tag aside -->
</aside>
<footer>
rodapé do site <!--O footer é rodapé a parte final da pagina. ela é semelhante ao
header só que lea é o final em vez de ser o começo da pagina -->
</footer>
</body>
</html>
<!--explicação a tag header e a tag footer elas não são obrigatoriamente o cabeçalho e o rodapé
do site.
elas podem ser utilizadas inclusive para defini o header(o cabeçalho de uma section e o footer
dessa section também) ou o header ou footer de um article. por exemplo voce não precisa ter
header só no topo do site e footer só no final. voce pode ter reader no inicio de um article
voce pode ter header no inicio de uma section isso é perfeitamente aceitável e esta correto
se voce começar a utilizar(exemplo"se voce tiver aqui a abertura da tag section tiver o header
tiver o conteúdo da tua section e depois tiver o footer e o fechamento da section esta perfeitamente
correto.
então só para voce se salienta reader e footer não precisam ser de todo site pode ser de uma sectio ou
de um article também")-->