As tags são usadas para informar ao navegador a estrutura do site. Ou seja: quando se escreve um código em HTML, as tags serão interpretadas pelo navegador, produzindo assim a estrutura e o conteúdo visual da página.
A principal característica das tags é estarem sempre dentro dos sinais de chevron (sinal de “maior que” é "menor que”), ou seja: < >.
As tags HTML são divididas em dois tipos: as que precisam de fechamento e as que não precisam de fechamento. As tags que precisam de fechamento possuem a sintaxe <tag> </tag>, já as que não precisam de fechamento possuem como estrutura <tag/>.
Além disso, uma mesma tag pode receber um ou mais atributos, que possuirá um valor que modifica sua estrutura ou funcionalidade.
Os atributos são utilizados para personalizar as tags, e vão dar todas as informações que de fato são indicadas.
Algumas utilizadas são:
class=”…“ – Indica classe ao elemento, podendo ser utilizada em um ou mais elementos;
id=”…“ – Indica um id ao elemento, que pode ser atribuído a somente um ;
style=”…” – Inclusão de elementos CSS, que vão dar estilos ao html;
lang=”…” – Indica o idioma principal;
title=”…” – Título do elemento;
alt=”…” – Definição de textos alternativos para as imagens, geralmente, e é mais aplicado para técnicas de SEO;
hidden – Utilizado para ocultar elementos;
align=”…” – Alinhamento do texto e de alguns elementos;
width=”…” – Largura do elemento;
height=”…” – Altura do elemento.
Esses atributos quando são combinados e bem utilizados vão fornecer todo o visual que será apresentado.
As tags HTML você já conheceu algumas, mas também existem outras que podem ser utilizadas e que também possuem uma grande importância.
São elas:
<header></header> – É uma definição de cabeçalho, determinando o começo de todo o código que está sendo feito. Diferente do <head>, ela tem uma função de estruturar todo o texto e seu trabalho como um todo;
<main></main> – Essa Tag é uma tag que define o conteúdo central da página, ainda que este não esteja localizado de fato no centro;
<footer></footer> – Essas tags são utilizadas para definir rodapé de qualquer página. Nela você pode colocar qualquer tipo de informação, sempre lembrando que vai estar em uma seção abaixo na visualização da página;
<section></section> – Utilizada para a criação de seções em sua página;
<article></article> – Para quem tem uma página mais voltada para conteúdos, ou mesmo um blog, a tag article é muito importante para a separação de informações para que o artigo possa se destacar;
<aside></aside> – São tags que relacionam conteúdos de uma seção com algum conteúdo da página. Basicamente ela organiza informações para que fiquem bem disponibilizadas;
<nav></nav> – Para quem quer ter menus na sua página, a tag de navegação é fundamental, até mesmo para que sejam dispostas as informações de maneira organizada;
<div></div> – Essa é uma tag literalmente para separar conteúdos e alocar uns próximos aos outros. Em combinação com outras, ela pode deixar uma página muito bem dividida e visualmente organizada.
O grande segredo de programar um site é conhecer a aplicação de cada um dos códigos HTML prontos que acabamos de ver e de outros. Afinal, existem vários deles à disposição de suas páginas.
Parece decoreba, mas exige também noção de organização para manter a hierarquia dos elementos e fazer sua inserção do jeito certo.
Gostou da ideia de desenvolver páginas com HTML? Então, é só baixar um editor de texto como Bloco de Notas, Nano e Emacs.
Mas se prefere mesmo é editar documentos HTML a dica é optar por programas mais avançados como: Atom, Brackets, Sublime Text e Visual Studio Code.
Você possui um e-commerce, site ou vende seus produtos ou serviços pelas redes s...
→ Leia mais...
Não poder sair para a rua fez com que a sociedade olhasse mais para si, prioriza...
→ Leia mais...
É cada vez maior o número de pessoas que deixam cargos em grandes empresas para...
→ Leia mais...
André Andrade e gerente de produtos desde 2005 e sócio diretor da Estúdio Site Ltda. Formado em Análise de Sistema, atuou no desenvolvimento de mais de 200 projetos, onde trabalhou no levantamento de requisitos, arquitetura da informação, design das telas, desenvolvimento e etc. Hoje possui grandes cases principalmente utilizando o Moodle, CMS Joomla e com o framework Bootstrap Twitter.
→ Veja o Perfil Completo
