Se você está iniciando seus passos no conhecimento sobre como a Web funciona e já leu a nossa publicação introdutória aqui. Aqui vamos fazer uma introdução ao HTML, mas não será superficial não ok? Vamos lá!
Nesta Publicação
O que é e como funciona o HTML
HTML não é uma linguagem de programação, é uma linguagem de marcação. Com ela nós definimos qual será a estrutura do nosso documento HTML. Ela consiste em uma série de elementos que chamamos de tags, que servem para delimitar e/ou agrupar diferentes partes do conteúdo, para que ela atue de uma determinada maneira.
Veja um exemplo:
<p>Meu primeiro parágrafo</p>As tags <p> e </p> delimitam o texto “Meu primeiro parágrafo”. O resultado na página HTML será a marcação desse texto como um parágrafo. A maioria das tags funciona desta mesma forma e sua preocupação nesse momento deve ser: sempre que abrir uma tag, feche-a.
Não se preocupe em saber quantas tags existem e qual a função de cada uma. À medida que a necessidade for surgindo, vamos incluindo as novas tags para serem utilizadas.
Principais TAGS
HTML possui muitas tags e você não precisa se preocupar em conhecer todas para começar a construir suas páginas. Nesse primeiro momento, vamos olhar para as tags de forma agrupada por função que ela desempenha em uma página.
São cerca de 21 elementos que serão utilizados ao longo deste guia, então observe quais são e suas descrições.
Elementos básicos
Estes são os elementos presentes em todas as páginas html e fazem parte da sua estrutura básica de um documento.
Separação e organização do conteúdo
Vamos utilizar estes e outros elementos para organizar o conteúdo do documento de forma mais lógica. Para ficar mais claro, quando você entra em uma página web (site) visualmente é possível perceber um cabeçalho (onde ficam os menus e uma logo), as seções com conteúdos e um rodapé (com um conjunto de links e outras informações de contato).
Os elementos de separação de conteúdo criam uma espécie de identidade para cada parte do site, abaixo descrevo aqueles que vamos utilizar:
<header> Representa um grupo de suporte introdutório ou navegacional. Pode conter elementos de cabeçalho, uma logo, menus, etc. Não confunda esse elemento com o <head> do exemplo anterior.
<footer> Representa o rodapé para o seu conteúdo de seção mais próximo. Aqui entram informações de direitos autorais, links para documentos relacionados, etc.
<section> Utilizado em seções genéricas de um documento, quando não existir um elemento semântico mais específico para representá-lo.
<nav> Elemento de navegação e representação. É uma seção que aponta (como links) para outras páginas ou áreas da mesma página.
<h1>…<h6> h1 até h6 representam níveis de título de uma seção, sendo h1 o nível mais alto (visualmente ele é o maior) e h6 o mais baixo e visualmente menor.
Conteúdo textual
São utilizados para comportar o conteúdo textual da página e normalmente são utilizados dentro dos elementos citados acima. Alguns deles:
<div> É um elemento genérico e não significa nada. Quando não existir um elemento semântico para representar o conteúdo (como article ou section) este elemento pode ser utilizado. É comum que iniciarmos a construção de páginas utilizando <div> no lugar de elementos mais semânticos, então não se preocupe. Se não souber qual utilizar, utilize um <div> para separação de blocos de seção. Visualmente funcionam muito bem.
<hr> Visualmente exibe uma linha horizontal, mas semanticamente ela tem um significado e representa uma quebra de cena de uma história ou de tema de uma seção.
<p> Representa um parágrafo. E lembre-se que parágrafos podem conter outros conteúdos como imagens e campos de formulário dentro deles.
<ul> Elemento de uma lista não ordenada. Representa uma lista de itens onde sua ordem é irrelevante.
<li> Item de uma lista. Ele deve estar dentro de um pai (<ul> ou <ol>).
Conteúdo textual inline
Os elementos deste grupo definem significado (estrutura ou estilo) para uma palavra, linha ou qualquer outro tipo de texto. Diferentemente do Conteúdo textual, estes elementos são indicados para serem utilizados em uma porção menor de um conteúdo (linha ou palavra). Alguns elementos deste grupo:
<a> Elemento de âncora. Quando utilizado com o atributo href cria uma ligação entre outras páginas ou conteúdos de um mesmo documento.
<b> Utilizado para destacar partes de um texto. Sua apresentação visual é o negrito.
<br> Elemento de quebra de linha. Normalmente utilizado onde o local da quebra de linha é relevante (poemas por exemplo).
<i> Utilizado para destacar partes de um texto. Sua apresentação visual é o itálico.
<span> Muito parecido com o elemento <div>, pois não possui significado semântico e deve ser utilizado apenas quando não existir outro elemento para substituí-lo. A diferença entre os dois elementos é o grupo a qual pertencem.
<strong> Dá uma forte importância para o texto e sua apresentação visual é o negrito. Apesar de ser similar ao <b>, <strong> dá relevância lógica para o conteúdo, enquanto que <b> é apenas uma apresentação visual.
Imagens
<img> Representa a inserção de imagem no documento. É através dessa tag que os sites exibem imagens dentro deles.
Formulários
<form> Representa uma seção que possui controles interativos que permitem ao usuário enviar informações a um determinado servidor web. Você já deve ter utilizado um formulário de login, cadastro de conta, pagamentos. Sempre que for necessário enviar informações para o site, os formulários serão utilizados.
<input> Utilizado para criar os elementos dentro dos formulários para interação do visitante. Sua semântica depende do atributo type. Existem os types: text, password, email, entre outros. Quando você digita uma senha, aparecem os asteriscos no lugar do texto certo? Isso acontece porque o type dele é diferente dos outros.
<textarea> Elemento de controle que permite ao visitante criar um texto mais longo de forma livre. Você encontra esses elementos quando vai fazer uma publicação no Linkedin, Facebook, Twitter ou enviar uma mensagem mais longa em um site.
<button> Representa um botão clicável. Utilizado para enviar as informações de um formulário.
Elementos de bloco e de linha
Existem elementos que separam seções inteiras e elementos que identificam uma parte pequena de um texto. A maioria dos elementos possuem uma finalidade de utilização, porém visualmente muitos podem se comportar de forma similar e às vezes torna essa separação aparentemente inútil, mas não se engane. Sites são lidos por humanos e máquinas, então a semântica dos elementos é muito importante.
Mas reforço: não se desespere. Esse conhecimento é construído ao longo do tempo. É comum no começo ocorrer alguma confusão sobre a utilização dos elementos, mas deixo aqui uma forma de diferenciá-los:
Para criação de layouts (colunas, cabeçalhos, grandes blocos de elementos) utilize os elementos da seção Conteúdo Textual.
Para blocos com conteúdo (textos ou imagens), utilize Conteúdo Textual.Para pequenas porções de texto, utilize Conteúdo Textual Inline.
Atributos do HTML
Os elementos HTML possuem atributos que são valores adicionais que configuram os elementos ou ajustam o comportamento deles de algumas maneiras. A forma de escrita de um elemento HTML com um determinado atributo é a seguinte:
Um pouco mais sobre atributos: id e class
Os atributos que mais utilizaremos nesta etapa são id e class e isso também é uma verdade para a maioria dos projetos que você vai encontrar. Estes atributos podem ser utilizados para identificar e manipular os elementos de diversas formas. Nós vamos nos beneficiar desses recursos no módulo de CSS para dar forma aos elementos.
<body>
<p id="paragrafo-diferentao">Este é um elemento único na página</p>
<p class="paragrafo-comum">Elemento repetido</p>
<p class="paragrafo-comum">Elemento com a mesma configuração do anterior</p>
</body>Um elemento com um determinado atributo id, deve ser único na página. No exemplo acima o elemento <p> com id paragrafo-diferentao deve único aqui, mas pode existir em outras páginas como mesmo id.
Já os elementos com o atributo class, podem se repetir na mesma página e são utilizados para criação de elementos com as mesmas características. Veja um exemplo da utilização das classes no site da byecar. São vários elementos com as mesmas características (títulos e cores), porém com conteúdos (carros) diferentes.
