Vamos continuar nosso Curso de HTML Grátis – 2, vamos dar continuidade e falar sobre a estrutura básica do HTML.
Antes de começar, devo lembrar a você que no post passado eu comentei a respeito do XHTML no modo Strict. Se você quiser saber mais sobre isso, clique aqui.
Como o objetivo desse curso é ensinar da maneira correta, eu aconselharia você a, ao menos no inicio, experimentar o XHTML no modo Strict.
Sei que alguns desenvolvedores vão odiar essa idéia, dizendo que isso é um retrocesso, que já existe o HTML 5, etc.
Mas meu objetivo aqui é apenas fazer você gravar alguns conceitos de boas práticas. Tão logo se sinta confortável, pode migrar para o HTML 5 sem problemas 🙂
Boas práticas no HTML e conceitos básicos
Se você abriu algo, feche
Os comando do HTML são em sua maioria comandos do tipo “abre e fecha”. Existem algumas tags que não precisam de fechamento, mas a maior funciona dessa forma.
Assim, para fazer um título, você abre uma tag de título, digita o texto e em seguida fecha essa tag, como no exemplo abaixo:
<h2>Digite seu titulo aqui</h2>
Perceba que você “abriu” com um <h2> e “fechou” com um </h2>.
Feche as coisas na ordem que você abriu
Como explicado acima, se você abriu algo, deve fechar. E em vários casos, você pode abrir várias tags, mas deve fechá-las na ordem em que foram abertas.
O código abaixo é VÁLIDO:
<div>
<h2>Digite seu titulo aqui</h2>
<p>Digite seu paragrafo aqui</p>
</div>
Perceba que você abriu uma tag div e dentro dela, abriu e fechou um titulo e em seguida, abriu e fechou um parágrafo. E por último, você fechou a tag div que você abriu lá em cima.
O código abaixo é INVÁLIDO:
<div>
<h2>Digite seu titulo aqui
<p>Digite seu paragrafo aqui</div>
</h2>
Perceba que você abriu a div, em seguida abriu o h2 mas não o fechou. Depois abriu uma tag p, não fechou esse p e fechou a div no lugar errado. E por último, fechou o h2, também no lugar errado.
Se você estiver utilizando o XHTML no modo Strict, ele acusaria erro. Utilizando o XHTML sem o modo Strict ou usando o HTML 5 por exemplo, o navegador iria exibir a informação mesmo assim, mas o texto poderia ficar estranho ou ser exibido de uma forma diferente do que você espera.
Pense sempre no bem do usuário
Algumas tags possuem alguns atributos. Esse atributos muitas vezes não são percebidos pelo usuário comum, mas trazem benefícios.
Por exemplo: você possui o atributo “name”, “alt” e “title” dependendo da tag que estiver usando e podem ajudar no conceito de SEO ou quando o usuário é portador de necessidades especiais.
A estrutura básica do HTML
Todo arquivo HTML possui a seguinte estrutura básica:
<!DOCTYPE html>
<html>
<head>
<title>Titulo do Documento</title>
</head>
<body>
Conteúdo do documento
</body>
</html>
Explicando:
- <!DOCTYPE html> – essa é a declaração do Doctype e precisa ser a primeira coisa a ser declarada. Ela informa para o navegador qual é a versão HTML utilizada nesse documento.
- <html></html> – essa tag delimita todo o conteúdo do documento.
- <head></head> – essa tag delimita o cabeçalho do documento. Tirando a tag <title>, todas as informações aqui descritas não aparecem no documento, mas influenciam no conteúdo, como estilos CSS, estilos de caracter, responsividade etc.
- <title></title> – essa é a única tag dentro do HEAD que é exibida. Esse é o título que é exibido na guia do navegador.
- <body></body> – essa tag é responsável por todo o conteúdo do documento. Todos os textos e imagens vão aqui.
DOCTYPE
Como já expliquei acima, o Doctype é a primeira coisa a ser declarada no documento. Hoje em dia, como estamos utilizando o HTML 5, basta declarar isso:
<!DOCTYPE html>
Nas versões anteriores do HTML, era necessário passar mais informações. Essa era a declaração para um documento XHTML operando no modo “Strict”:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Havia também uma outra versão XHTML, chamada de “Transitional”. Essa opção era mais amigável, pois não interrompia a execução quando encontrasse um erro no documento.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
HEAD
Já falei um pouco sobre o Head um pouco para cima. Mas vou mostrar mais algumas tags que você pode colocar no HEAD:
- <link> – essa tag permite que você adicione uma folha de estilos (CSS) de um arquivo externo.
- <meta> – essa tag permite que você configure várias coisas no documento (mais informações abaixo).
- <style> – essa tag permite a você configurar o CSS direto no documento.
- <script> – a tag script permite que você adicione um código javascript no documento.
- <noscript> – essa tag permite que você adicione algum conteúdo para ser exibido caso o javascript não possa ser exibido.
Próximos passos
Nesse post abordamos a estrutura básica do HTML, necessária para você começar a criar seu documento.
No próximo post vamos continuar nosso estudo de HTML, iniciando o uso de algumas tags para começar a estruturar o nosso conteúdo.
Comentários:
Esse post ainda não possui comentários. Seja o primeiro a comentar!