A maneira mais simples e eficiente de aprender HTML 5 – Aula 2 - Elementos HTML

Muito bem, você está indo bem, novas tags serão apresentadas a partir de agora, naturalmente você vai se acostumar com elas se seguir com os estudos, nós vamos detalhar cada uma delas ao longo do curso.

Bem-vindo ao capítulo 2 da série, a partir de agora nós vamos começar a ver os resultados de nossos trabalhos. Vamos começar a entender como funciona um documento HTML e entender cada uma de suas tags. Se ainda não viu o capítulo 1, clique aqui!

Como diz o grande Confúcio.

Não importa a velocidade que você caminhe, o importantes é que você continue sempre!

Confúcio

Documentos HTML

Preste atenção nisso, pois é muito importante. Todo documento HTML5 deve começar com uma declaração de tipo de documento: <!DOCTYPE html>, essa, como vimos no capítulo anterior, é a tag que diz que esse é um documento HTML5.

Depois desta tag, vamos começar de fato o documento HTML, e o par de tags que irão compor todos os elementos do documento, levam o próprio nome da linguagem, <html> </html>. A parte visível aos usuários, ou seja, aquilo que irá aparecer nas telas do computador, smartyphone, tablets e outros aparelhos, fica entre as tags <body> </body>. Veja um exemplo simples disso. Se você acompanhou o capítulo 1, basta seguir o passo a passo para criar esse documento.

<!DOCTYPE html>
<html>
<body>
  <h1>Cabeçalho</h1>
  <p>Olá mundo! Esse é meu primeiro parágrafo.</p>
</body>
</html>

Muito simples neh? Já que está fácil, vamos adentrar mais um pouco nas tags e começar a entendê-las.

Títulos HTML

Os títulos HTML são definidos com as tags <h1> até <h6>, onde <h1> define o título mais importante daquela página em questão e <h6> o menos importante. É bom você entender muito bem a definição e conceito dos títulos porque ao projetar uma página pensando em otimização para os buscadores (SEO), você vai quere que eles saibam exatamente o que é mais importante na sua página, se você define o título com outra tag qualquer, os buscadores não irão adivinhar que aquilo é um título e você pode ser prejudicado, ou pior, pode não ser encontrado. Alguns exemplos:

<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>

Parágrafos HTML

Os parágrafos são definidos como <p> </p>, simples assim.

<p>Esse é o primeiro parágrafo</p>
<p>Aqui é outro parágrafo</p>

Links HTML

Finalmente chegamos onde a brincadeira começa a ficar mais legal. Os links são o que dão vida para as páginas, é através deles que podemos navegar entre as páginas de nosso site ou até mesmo para outros sites. Os links podem até carregar variáveis, mas isso é assunto para outro capítulo.

<a href="https://www.clickartweb.com.br">Aqui está o texto do link</a>

Quando escrevemos um link, o texto fica marcado e ao passar o mouse em cima dele o cursor muda para uma “mãozinha” com o dedo apontado e pronto para apertar o botão. O link é isso, um botão, mas não tem aparência de botão. Você pode deixá-lo exatamente igual a um botão, mas isso é assunto para o curso de CSS

O destino do link é especificado no atributo href. Nós vamos falar sobre atributos mais detalhadamente no próximo capítulo, por enquanto, saiba que eles são usados para fornecer informações adicionais sobre as tags HTML.

Imagens HTML

A tag que insere uma imagem no documento é a tag <img>, o atributo src é o endereços da imagem, onde está essa imagem. Ainda temos o alt, width e height que são fornecidos como atributos de uma imagem.

No atributo src você deve inserir o endereço completo de onde se encontra a imagem, por exemplo, se a imagem está na mesma pasta do documento HTML, então insira apenas o nome da imagem e a extensão. Se a imagem está em uma subpasta, digite o {nome-da-pasta}/{nome-do-arquivo}.{extensão}, lógico, sem os colchetes. Você ainda pode inserir uma imagem que está em outro site (cuidado com os direitos autorais), para isso digite assim:

<img src="http://www/clickartweb.com.br/images/site/logo.png" alt="Agência ClickArt">

O alt é o texto alternativo, caso o navegador tenha problemas para exibir sua imagem ele irá mostrar o que estiver em alt. Width e height, são respectivamente, largura e altura da imagem. Com exceção de src, todos os outros são opcionais.

Botões HTML

Os botões são de fato botões, eles podem chamar um evento Javascript, claro, você terá que ter conhecimento da linguagem JavaScript para isso acontecer, mas não se preocupe, aqui no blog você vai encontrar uma série completa sobre JS também.

<button>Click aqui</button>

Listas HTML

Se você já trabalhou com algum editor de texto qualquer (word, WPS etc), sabe o que são listas. As listas em HTML podem ser não ordenadas (com marcadores) ou ordenadas (lista numerada). Para listas não ordenadas usamos a tag <ul> </ul> e para ordenadas <ol> </ol>. Os itens da lista, sejam elas ordenadas ou não, são composto pela tag <li> </li>. Exemplo:

&lt;!DOCTYPE html>
&lt;html>
&lt;body>
&lt;h2>Lista não ordenada&lt;/h2>
&lt;ul>
  &lt;li>Coffee&lt;/li>
  &lt;li>Tea&lt;/li>
  &lt;li>Milk&lt;/li>
&lt;/ul>
&lt;h2>Lista ordenada&lt;/h2>
&lt;ol>
  &lt;li>Coffee&lt;/li>
  &lt;li>Tea&lt;/li>
&lt;/ol> 
&lt;/body>
&lt;/html>

Lista não ordenada

item 1
item 2
item 3

Lista ordenada

Item 1
Item 2
Item 3

Elementos HTML

Como já dissemos antes, elementos são as tags, uma de início e uma de finalização: <tag>Contúdo aqui…</tag>. O que não dissemos foi que existem tags que não têm uma parceira de finalização, isso mesmo, por exemplo, <br> que indica uma quebra de linha. Vejamos como funcionam os elementos então.

Elementos HTML aninhados

Os elementos HTML podem ser aninhados, o que é isso? Bom, eles podem conter outros elementos, por exemplo:

&lt;!DOCTYPE html>
&lt;html>
  &lt;body>
    &lt;h1>Cabeçalho&lt;/h1>
    &lt;p>Parágrafo.&lt;/p>
  &lt;/body>
&lt;/html>

O primeiro elemento <html> (esse você já conhece), o conteúdo dele é outro elemento, <body> (que você também já conhece), <body> tem dois outros elementos conhecidos nosso, <h1> e <p>. Isso são elementos aninhados, elementos que contém outros elementos.

Atenção! Nunca se esqueça da tag de fechamento. Alguns elementos HTML serão exibidos corretamente, mesmo se você esquecer, o <p> por exemplo, vai funcionar em todos os navegadores, pois a tag de fechamento é considerada opcional. Nunca, nunca, nunca confie nisso. Pode ser que o resultado seja inesperado e/ou erros aconteçam.

Elementos HTML vazios

Elementos vazios podem ser “fechados” na própria tag de abertura: <br />. O HTML5 não exige que os elementos vazios sejam fechados. Essa é uma prática criada junto com o XHTML, para o caso de você querer uma validação mais rigorosa, ou se precisar torna seu documento legível por analisadores XML, aí você deve fechar todos os elementos HTML corretamente, seguindo a nomeclatura XHTML.

Boas práticas! Use tags minúsculas. Tags HTML não diferenciam maiúsculas de minúsculas, <P> e <p> significam a mesma coisa. A W3C (principal organização que cria padrões web), recomenda letras minúsculas em HTML e exige letras minúsculas para tipos mais restritos, como o citado acima, XHTML. Então use sempre letras minúsculas se você quiser seguir os padrões WEB já consolidados pela W3C.

Isso é só o começo, muito em breve teremos um novo capítulo onde vamos tratar dos atributos dos elementos HTML, então fique ligado e acompanhe nosso blog e nossas redes sociais.

Se você tiver qualquer dúvida, entre em contato comigo através do nosso formulário de contato, será um prazer ajudar.