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!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Veja também:

Curso de HTML Grátis – 4

Curso de HTML Grátis – 4

Data: 23 de maio de 2018

Continuando nosso Curso de HTML Grátis – 4, vamos aprender mais algumas tags que você vai precisar para desenvolver um website. E vamos entrar um pouco também na questão de SEO (Search Engine Optimization), que é a otimização para os motores de busca, ou seja: melhorar seu site para aparecer melhor nos motores de busca....