MINHAS ANOTAÇÕES – HTML5 CSS3 JAVASCRIPT

SUMÁRIO
ESTRUTURA HTML BÁSICA: ....................................................................................................................................... 2
VALIDANDO O SITE .................................................................................................................................................... 3
COMO FAZER NOVOS RECURSOS FUNCIONAREM EM VELHOS NAVEGADORES ..................................................... 3
COMO MINIMIZAR O ARQUIVO CSS ......................................................................................................................... 3
COMO VERIFICAR A COMPATIBILIDADE ATUAL DOS BROWSERS ............................................................................ 3
EVITANDO ERROS COMUNS NO HTML ..................................................................................................................... 4
Não use section como contêiner para estilização ...................................................................................................... 4
Só use header e hgroup quando forem necessários .................................................................................................. 5

Uso excessivo de header ............................................................................................................................ 5

Uso incorreto de hgroup ............................................................................................................................ 5
Não englobe todas listas de links com nav................................................................................................................. 6
Erros comuns com o elemento figure ........................................................................................................................ 7

Nem toda imagem é figure ........................................................................................................................ 7

O logo não é um figure .............................................................................................................................. 7
figure pode ser mais que uma imagem ..................................................................................................... 8
Não inclua atributos de tipo desnecessariamente ..................................................................................................... 8
Uso incorreto de atributos de formulários ................................................................................................................ 8

Atributos booleanos .................................................................................................................................. 8

O QUE DEVE SER CONSIDERADO AO SE DESENVOLVER UM SITE ..............................Error! Bookmark not defined.
CRIANDO ESPAÇOS NO TEXTO DENTRO DO HTML ................................................................................................... 9
PARA INSERIR LINHAS HORIZONTAIS........................................................................................................................ 9
INCLUINDO SIMBOLOS ESPECIAIS NO DOCUMENTO ............................................................................................... 9
USANDO SPAN PARA ALTERAR O ESTILO DE APENAS UM TRECHO DE TEXTO ........................................................ 9
USANDO <PRE> PARA DEIXAR O TEXTO EXATAMENTE COMO FOI DIGITADO ........................................................ 9
USANDO UMA IMAGEM COMO BACKGROUND ..................................................................................................... 10
COMO INICIAR E USAR UM ARQUIVO CSS ..................................................................Error! Bookmark not defined.
COMO FORMATAR UMA LEGENDA DE FOTO/IMAGEM COM CSS .............................Error! Bookmark not defined.
COMO USAR FONTES EXTERNAS COM CSS .................................................................Error! Bookmark not defined.
DISTRIBUINDO O CONTEUDO DENTRO DAS DIVS ......................................................Error! Bookmark not defined.

Página 1
 MINHAS ANOTAÇÕES – HTML5 CSS3 JAVASCRIPT

ESTRUTURA HTML BÁSICA:

INICIAR O ARQUIVO COM O SEGUINTE CABEÇALHO:

<!DOCTYPE html> (DECLARO O TIPO DE DOCUMENTO)

<html lang=”pt-br” /> (ABRO A TAG HTML E DEFINO A LINGUAGEM DO SITE PARA
PORTUGUES, IMPORTANTE PARA MECANISMOS DE BUSCA)

<head>

<meta charset=”utf8” />

<link href=”style.css” rel=”stylesheet” /> aqui eu defino os CSS
<script src="scripts.js"></script> aqui eu defino meu arquivo externo de javascript

</head>

<body>

<header> </header> (opcional)

<footer> </footer> (opcional)

</body>

</html>

REGRAS IMPORTANTES:
1 - QUANDO FOR NOMEAR AS PASTAS DENTRO DA ESTRUTURA PROCURE COLOCAR UM
UNDERLINE (_) ANTES DO NOME PARA FINS DE SEPARAR AS PASTAS DOS ARQUIVOS DENTRO DA
ESTRUTURA DE ARQUIVOS DO SERVIDOR.
2 - SEMPRE FECHE AS TAGS, MESMO AS SIMPLES, USANDO “ /” PARA MANTER A
COMPATIBILIDADE DO SITE COM OS PADRÕES XML.
3 – TODOS AS TAGS E ATRIBUTOS DOS ELEMENTOS EM HTML DEVEM SE ESCRITOS EM
MINÚSCULO.
4 – TODOS OS VALORES DE ATRIBUTOS EM HTML DEVEM SER ESCRITOS ENTRE ASPAS
SIMPLES OU DUPLAS. EX: <table widht= “100%”>

Página 2
 MINHAS ANOTAÇÕES – HTML5 CSS3 JAVASCRIPT

OUTRA DICA IMPORTANTE REFERE-SE A SEMANTICA, PARA QUE OS ITENS SEMANTICOS

SEJAM TRATADOS SEMPRE A NIVEL DE BLOCO É BOM COLOCAR NO CSS O SEGUINTE:
article, aside, figure, figcaption, footer, header, hgroup, nav,
section, summary {
display: block;
}

DICA EXTREMAMENTE IMPORTANTE

SEMPRE QUE POSSIVEL COMEÇAR O HTML USANDO ESTES RECURSOS:

1 – TORNA O SITE COMPATIVEL SEMANTICAMENTE COM NAVEGADORES MAIS ANTIGOS

2 – USE O NORMALIZE PARA PADRONIZAR SEU SITE NOS DIVERSOS NAVEGADORES

VALIDANDO O SITE
PODE-SE UTILIZAR UM DOS SITES ABAIXO PARA VALIDAR OS ARQUIVOS HTML
https://validator.w3.org/

VENDO A ESTUTURA OUTLINE DE UM SITE

https://gsnedders.html5.org/outliner/
COMO FAZER NOVOS RECURSOS FUNCIONAREM EM VELHOS NAVEGADORES
SELECIONE A LINHA QUE TEM O COMANDO, COPIE E COLE NO SEGUINTE SITE:
http://expressprefixr.herokuapp.com/

COMO MINIMIZAR O ARQUIVO CSS

PODE-SE USAR ESSE SITE PARA MINIMIZAR O ARQUIVO CSS
https://cssminifier.com/

COMO VERIFICAR A COMPATIBILIDADE ATUAL DOS BROWSERS

PODE-SE USAR ESSE SITE PARA MINIMIZAR O ARQUIVO CSS
https://html5test.com/

Página 3
 MINHAS ANOTAÇÕES – HTML5 CSS3 JAVASCRIPT

EVITANDO ERROS COMUNS NO HTML

NÃO USE SECTION COMO CONTÊINER PARA ESTILIZAÇÃO

Um dos problemas mais comuns que está acontecendo em relação à implementação da

HTML5 é os desenvolvedores, arbitrariamente, estarem substituindo <div> por <section> para
usar na estilização. No HTML4 ou XHTML, é normal um código como:

1 <div id="wrapper">
2 <div id="header">
3 <h1>T&iacute;tulo prim&aacute;rio</h1>
4 </div>
5
6 <div id="main">
7 <!-- conteúdo -->
8 </div>
9
10 <div id="secondary">
11 <!-- conteúdo -->
12 </div>
13
14 <div id="footer">
15 <!-- conteúdo -->
16 </div>
17 </div>

Então, sem nenhum motivo plausível, alguns estão alterando seu código para:

1 <section id="wrapper">
2 <header>
3 <h1>T&iacute;tulo prim&aacute;rio</h1>
4 </header>
5
6 <section id="main">
7 <!-- conteúdo -->
8 </section>
9
10 <section id="secondary">
11 <!-- conteúdo -->
12 </section>
13
14 <footer>
15 <!-- conteúdo -->
16 </footer>
17 </section>

E isso, apesar de poder estar certo, na grande maioria dos casos, está errado… Se é preciso
um elemento somente para estilização, não faz nenhum sentido deixar de usar <div>; o
elemento <section> não foi criado para isso! Segundo sua documentação,

O elemento <section> representa um documento genérico ou seção de aplicação[…]. O

elemento <section> não é um elemento contêiner genérico. Quando um elemento é necessário
para fins de estilo ou como uma conveniência para execução de scripts, os autores são
incentivados a utilizar o elemento <div>.
Página 4
 MINHAS ANOTAÇÕES – HTML5 CSS3 JAVASCRIPT

Ou seja, as indicações de uso do <section> para 99% dos casos são:

 Não usá-lo apenas como “gancho” para estilos ou scripts (para isso, já
existe <div>)
 Não usá-lo se o <article>, <aside> ou <nav> forem mais apropriados
 Não usá-lo a menos que exista, naturalmente, um título no início da seção

SÓ USE HEADER E HGROUP QUANDO FOREM NECESSÁRIOS

A tag “hgroup” foi descontinuada. Fica o texto como registro histórico.

Não faz sentindo escrever HTML de forma a ferir a semântica, certo? Infelizmente, não é
difícil encontrar elementos <header> e <hgroup> sendo usados de forma inapropriada. Procure
se informar mais a respeito da função deles, mas, resumindo:

 <header> representa um grupo introdutório e/ou navegacional e, usualmente,

contém o(s) título(s) de <section>
 <hgroup> agrupa um conjunto de elentos <h1>–<h6> quando o título de uma
seção tem vários níveis, tais como subtítulos, títulos alternativos, etc

USO EXCESSIVO DE HEADER

O elemento <header> pode ser usado quantas vezes forem necessários num documento, o
que está causando confusões do tipo:

1 <article>
2 <header>
3 <h1>T&iacute;tulo prim&aacute;rio</h1>
4 </header>
5
6 <!-- conteúdo -->
7 </article>

Se o <header> contém somente um elemento de título, na verdade, ele não precisa ser
usado. O elemento <article> já garante que o título vai constar no OUTLINE do documento, e,
porque <header> não contém múltiplos elementos (como consta em sua definição), por que
escrever código desnecessário? A solução é simples:

1 <article>
2 <h1>T&iacute;tulo prim&aacute;rio</h1>
3 <!-- conteúdo -->
4 </article>

USO INCORRETO DE HGROUP

Basicamente, não se deve usar <hgroup> com <header> quando:

 Há somente 1 elemento-descendente de título

 O <hgroup> funcionaria bem por conta própria (ou seja, sem <header>)

O primeiro problema pode ser visto no código:

1 <header>

Página 5
 MINHAS ANOTAÇÕES – HTML5 CSS3 JAVASCRIPT

2 <hgroup>
3 <h1>T&iacute;tulo prim&aacute;rio</h1>
4 </hgroup>
5
6 <!-- conteúdo -->
7 </header>

No caso, deve-se, simplesmente, remover o elemento <hgroup>:

1 <header>
2 <h1>T&iacute;tulo prim&aacute;rio</h1>
3 <!-- conteúdo -->
4 </header>

O segundo problema é outro caso de incluir o elemento quando ele não se faz necessário:

1 <header>
2 <hgroup>
3 <h1>T&iacute;tulo prim&aacute;rio</h1>
4 <h2>T&iacute;tulo secund&aacute;rio</h2>
5 </hgroup>
6 </header>

Se não há elementos adicionais dentro de <header> (isto é, irmãos de <hgroup>), basta

remover o <header>:

1 <hgroup>
2 <h1>T&iacute;tulo prim&aacute;rio</h1>
3 <h2>T&iacute;tulo secund&aacute;rio</h2>
4 </hgroup>

NÃO ENGLOBE TODAS LISTAS DE LINKS COM NAV

Com mais de 40 novos elementos (no dia da publicação deste artigo), não é incomum haver
dúvidas e erros de HTML5 na hora da utilização de alguns destes. Infelizmente, ainda é o caso com
o elemento <nav>. Como consta em sua especificação,

Nem todos os grupos de links em uma página precisam estar contidos em um

elemento <nav> – o elemento se destina, principalmente, a seções que consistem em blocos de
navegação principal. (Grifo nosso)

Atenção ao grifo “blocos de navegação principal” que, apesar de ser aberto a algumas
interpretações, identifica-se mais com:

 Navegação primária
 Navegação secundária
 Navegação IN PAGE (dentro de um artigo longo, por exemplo)

Como DIRETIVAS GERAIS (e seguindo a lógica contida na especificação), não se aplica o

elemento <nav> a:

 Controles de paginação
 Social links
 Categorias e Tags (de um artigo de blog, por exemplo)

Página 6
 MINHAS ANOTAÇÕES – HTML5 CSS3 JAVASCRIPT

 Navegação terciária
 Rodapés muito elaborados

Nos momentos de dúvida ao usar <nav>, pergunte-se a si mesmo: “Essa é uma navegação
principal?”. Para ajudar a responder, considere as seguintes “regrinhas”:

 Não use <nav> a menos que você pense que <section> também seria apropriado
com <hx>
 Você adicionaria um link “Pular para o conteúdo” por questões de acessibilidade?

Se a resposta para essas perguntas for “não”, então, provavelmente, não se trata de
um <nav>.

ERROS COMUNS COM O ELEMENTO FIGURE

NEM TODA IMAGEM É FIGURE

Os novos elementos não foram criados para que os desenvolvedores tivesse trabalho de
escrever código a mais. Pensar isso é um erro comum de HTML5. Algumas pessoas, ao
“atualizarem” seus sites para HTML5, colocam o elemento <figure> em todas as imagens! Fazer
isso não serve pra nada e a pessoa só está aumentando o próprio trabalho…

A especificação define <figure> como

algum conteúdo de fluxo, opcionalmente com um <figcaption>, que é auto-contido e,

tipicamente, referido como uma unidade única a partir do fluxo principal do documento.

E é aí que reside a beleza do elemento <figure>: ele pode ser afastado do conteúdo
principal (para uma barra lateral, por exemplo) sem afetar o fluxo do documento.

Se se tratar de uma imagem puramente de apresentação, que não é referenciada em

outras partes do documento, definitivamente não se trata de um <figure>. Outros casos de uso
variam, mas, pra começar, pergunte-se a si mesmo: “Esta imagem é necessária para compreender
o contexto atual?”. Se não, provavelmente não é um <figure> (pode ser um <aside>, talvez). Se
sim, pergunte-se novamente: “Eu poderia movê-lo para um apêndice?”. Se a resposta para ambas
as perguntas for “sim”, então, provavelmente, trata-se de um <figure>.

O LOGO NÃO É UM FIGURE

Os mesmos princípios mostrados acima também se aplicam ao logo do site. Não é tão
incomum se ver por esses dias códigos parecidos com:

1 <header>
2 <h1>
3 <figure>
4 <img src="/img/logo.png" alt="Nome do site" class="hide">
5 </figure>
6
7 Nome do site
8 </h1>
9 </header>

Página 7
 MINHAS ANOTAÇÕES – HTML5 CSS3 JAVASCRIPT

Isso, simplesmente, não está certo… E não estou dizendo sobre o fato de o logo estar
dentro de um <h1> – isso, por si só, renderia um artigo inteiro. A real questão é o abuso do
elemento <figure>! No caso, a marcação poderia, simplesmente, ser feita assim:

1 <header>
2 <h1>Nome do site</h1>
3 </header>

FIGURE PODE SER MAIS QUE UMA IMAGEM

Ao contrário do que muitos pensam, <figure> pode ser áudio, vídeo, um gráfico (em SVG,
por exemplo), uma citação, uma tabela, um bloco de código ou qualquer combinação destes e
muito mais!

Não se limite a usar <figure> somente em imagens. Nosso trabalho como aficionados por
padrões web também é de descrever com precisão nosso conteúdo através de uma correta
marcação.

NÃO INCLUA ATRIBUTOS DE TIPO DESNECESSARIAMENTE

Este é, provavelmente, um dos erros mais comuns de HTML5. Embora não seja,
tecnicamente, um erro, é uma boa prática evitar a inclusão de atributos de tipo.

Em HTML5, não há necessidade de incluir o atributo type em <script> e elementos <style>.

Embora possa ser um pouco custoso remover o atributo se ele está sendo colocado
automaticamente pelo CMS em uso, não há, realmente, nenhuma razão para incluí-lo se você está
codificando na mão ou se tiver absoluto controle sobre o código que está sendo usado.

Uma vez que todos os navegadores esperam que scripts sejam JavaScript e estilos sejam
CSS, isso se faz desnecessário:

1 <link type="text/css" href="styles.css" rel="stylesheet">

2 <script type="text/javascript" src="scripts.js"></script>
Use somente:
1 <link href="css/styles.css" rel="stylesheet">
2 <script src="js/scripts.js"></script>

USO INCORRETO DE ATRIBUTOS DE FORMULÁRIOS

Provavelmente, você deve estar ciente de que o HTML5 introduziu uma série de novos
atributos para formulários (bem, você deveria). Com isso, alguns erros, por parte dos
desenvolvedores, também começaram a aparecer.

ATRIBUTOS BOOLEANOS

Vários dos novos atributos de formulário são booleanos, ou seja, sua simples presença na
marcação assegura o comportamento esperado. Esses atributos incluem:

 autofocus
 autocomplete
 required

Então, alguns desenvolvedores começaram a escrever coisas do tipo:

Página 8
 MINHAS ANOTAÇÕES – HTML5 CSS3 JAVASCRIPT

1 <input type="text" name="name" required="true">

2 <input type="email" name="email" required="1">

O PARSER do navegador ainda vai considerar o campo como obrigatório pelo simples fato
de “required” estar lá, mas, e se o valor pretendido fosse outro?

1 <input type="email" name="email" required="false">

O PARSER ainda verá o atributo required e implementará o comportamento, mesmo que

essa não tenha sido a intenção!

Há 3 maneiras válidas para um atributo booleano ser aplicado (a segunda e a terceira

opções só se aplicam para XHTML):

 required
 required=""
 required="required"

Portanto, em HTML5 é somente:

1 <input type="email" name="email" required>

CRIANDO ESPAÇOS NO TEXTO DENTRO DO HTML

PARA QUEBRAR LINHAS <br/>, PARA DAR ESPAÇOS &nbsp;

Para hifenizar uma palavra usa-se <wbr/> por exemplo “super-<wbr/> humano.” Quando
tiver fim de linha o navegador vai quebrar a palavra.
Pode-se usar também &shy; neste caso um hífen é inserido nas palavras quando
quebradas.

PARA INSERIR LINHAS HORIZONTAIS

<hr />

INCLUINDO SIMBOLOS ESPECIAIS NO DOCUMENTO

&lt: &gt; &le; &ge;

&pound, &euro;
&copy; &reg; &trade;
Links úteis: https://disner.com.br/lista-caracteres-especiais-html/ ou
http://erikasarti.com/html/acentuacao-caracteres-especiais/

USANDO SPAN PARA ALTERAR O ESTILO DE APENAS UM TRECHO DE TEXTO

Pode-se usar a tag <span> para aplicar estilo somente em um trecho do texto. Por exemplo:

O <span style:”text-decoration: underline”>Google Glass</span> é um acessório em forma

de óculos que possibilita a interação dos usuários com diversos.

USANDO <PRE> PARA DEIXAR O TEXTO EXATAMENTE COMO FOI DIGITADO

<pre>

Página 9
 MINHAS ANOTAÇÕES – HTML5 CSS3 JAVASCRIPT

Tudo que
Estiver aqui vai aparecer como
Foi digitado.
</pre>

USANDO UMA IMAGEM COMO BACKGROUND

Basta usar o estilo background-image: url(“nome do arquivo”)

USANDO A MARCAÇÃO TIME

Para colocar datas e horas de forma semanticamente correta é necessário usar o time, o formato
tanto de hora como de data deve obedecer aos padrões da computação sendo YYYY:MM:DD para
data e HH:MM+00:00 para hora, os dois últimos zeros são a time zone. Para contornar o problema
do formato podemos usar da seguinte forma

Parties start every night at <time datetime="16:30-5:00">4:30 p.m.</time>.

The party starts <time datetime="2012-03-21">March 21^st</time>.
Ou os dois juntos:
The party starts <time datetime="2012-03-21T16:30-5:00">March 21^st at 4:30
p.m.</time>.

FORMULARIOS – USANDO LABEL FOR E LABEL – DICA INTERESSANTE

Ao criar formulários normalmente usamos For para linkar a etiqueta ao controle, da seguinte forma:

<form>
<fieldset>
<legend>Detalhes de Contato</legend>
<div>
<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome">
</div>
</fieldset>
</form>
Mas podemos economizar muito trabalho colocando tudo dentro da label, assim:

<form>
<fieldset>
<legend>Detalhes de Contato</legend>
<div>
<label>Nome:
<input type="text" name="nome" id="nome">
</label>
</div>
</fieldset>
</form>
So que neste caso não da pra usar o DISPLAY: BLOCK no label para fazer a etiqueta aparecer sobre
o campo.

Página 10