Principais comandos e tags de HTML

O comando HTML é um objeto identificável dentro de um documento que controla a parte visível de um website, seja imagem, tabela, ou quaisquer outros elementos.

Mulher trabalhando com linguagem de programação

A HTML, sigla de Hypertext Markup Language, ou Linguagem de Marcação de Hipertexto, em português, é uma linguagem que compõe a maior parte das páginas da internet e dos aplicativos online. Sendo que os hipertextos são usados para fazer referência a outros textos, enquanto uma linguagem de marcação é composta por uma série de delimitações que dizem para os servidores da web quais sã o estilo e a estrutura de um documento.

O HTML não é considerado uma linguagem de programação, já que não pode criar funcionalidades dinâmicas. Mas, com ele, os usuários podem criar e estruturar seções, parágrafos e links usando elementos, tags e atributos. Portanto, isso significa que não podemos usar o HTML para criar funcionalidades dinâmicas, assim como podemos fazer com o Javascript, por exemplo.

Como veremos neste artigo, cada comando de programação HTML pode possuir atributos, que servem para controlar as características do elemento. Continue a leitura e entenda melhor como funciona e quais são os principais comandos de HTML, bem como as tags de HTML.

Introdução sobre o HTML

Criado pelo britânico Tim Berners-Lee, HTML é usado para a construção das páginas web que acessamos diariamente, ou seja, tudo aquilo que vemos nos sites. Com uma sintaxe bem simples e baseada em tags, que representam os elementos de uma página, como imagens, listas e links. Sem isso, os navegadores não conseguiriam exibir textos ou carregar o conteúdo da página.

Podemos dizer que o HTML é o esqueleto das páginas, mas, para isso, ele precisa ter um corpo, e é aí que entra as demais linguagens de programação. Logo, comandos HTML basicamente controlam a parte visível de um website. Além disso, é importante ressaltar que o HTML é considerado um padrão oficial da internet. O World Wide Web Consortium (W3C) mantém e desenvolve especificações do HTML, além de providenciar atualizações regulares.

Os usos mais comuns para o HTML são:

Desenvolvimento web, navegação na internet e documentação

Um comando HTML é um objeto identificável dentro de um documento, podendo resultar em uma imagem, uma tabela, ou quaisquer outros elementos visíveis, usando marcas para formatar as páginas na internet.

Geralmente um site é composto por diversas páginas HTML e, para que seja possível a visualização delas, é preciso ter ao menos dois arquivos HTML, ou seja, com a extensão .html.  Assim, o navegador faz a leitura do arquivo e renderiza o seu conteúdo para que o usuário final possa visualizá-lo.

Cada página é uma estrutura que contém uma série de tags, consideradas os blocos de construção das páginas.

Como as tags de HTML podem ajudar? 🤔

As tags são códigos que definem toda a estrutura de uma página HTML, como o tamanho, cor do texto, os parágrafos, as quebras de linha, as imagens, entre outros, sendo que a principal característica das tags é estar sempre dentro dos sinais de chevron, ou seja:

< >

Todas as páginas HTML possuem diversos elementos que consistem em um conjunto de tags e atributos, sendo que uma tag diz para o navegador onde começa e termina, enquanto um atributo descreve as características de um elemento.

As três principais partes de um elemento são:

  • Tag de abertura: usada para dizer onde um elemento começa;
  • Conteúdo: essa é a parte que os usuários verão;
  • Tag de fechamento: igual à de abertura, mas com uma barra antes do nome do elemento.

A combinação dessas três partes vai criar o seguinte elemento HTML:

<p> este é o resultado da soma das três partes </p>

Além disso, uma mesma tag pode receber um ou mais atributos, com um valor que modifica sua estrutura ou funcionalidade.

Os atributos são usados para personalizar as tags, modificando sua estrutura ou funcionalidade. Eles são utilizados para atribuir uma classe ou id a um elemento. A maioria das tags tem seus próprios atributos. Contudo, existem alguns que são genéricos, podendo ser utilizados na maioria das tags HTML. São eles:

➡️class=”…“ – Atribui uma classe ao elemento (uma classe pode ser utilizada para um ou mais elementos);

➡️id=”…“ – Atribui um id ao elemento (um id deve ser único, ou seja atribuído a um único elemento);

➡️style=”…” – Permite incluir elementos CSS (estilos) dentro da tag;

➡️lang=”…” – Define o idioma principal do elemento;

➡️title=”…” – Define o título do elemento;

➡️alt=”…” – Define um texto alternativo e, por isso, é muito utilizado em imagens. Auxilia nas práticas de SEO;

➡️hidden – Oculta o elemento;

➡️align=”…” – Permite definir o padrão de alinhamento desse elemento. Exemplo: right, center, left e justify;

➡️width=”…” – Define uma largura para o elemento;

➡️height=”…” – Define uma altura para o elemento.

Exemplos de tags

As tags HTML são mecanismos de formatação e organização de conteúdos web. Elas auxiliam os devs a manipular os elementos das páginas de modo preciso. Assim, torna-se mais fácil criar, atualizar e gerenciar sites e sistemas web.

Existem vários tipos de tags HTML, sendo que cada uma tem um fim específico. Mas, os mais comuns são:

  • Tags estruturais: mudam o posicionamento de elementos na web;
  • Tags de cabeçalho: estão relacionadas com o cabeçalho e alguns elementos básicos de sites, como o título e o favicon;
  • Tags de links: são utilizadas para gerenciar qualquer tipo de link existente na página;
  • Tags de listas: permitem criar diferentes listas;
  • Tags de formatação de caracteres: adicionam formatação especial a qualquer texto exibido na página web;
  • Tags de manipulação de elementos: tornam mais preciso o posicionamento de conteúdos no site;
  • Tags de conteúdo multimídia: utilizadas para inserir elementos como imagens, vídeos e músicas nas páginas web;
  • Tags de frames: para criar frames (que funciona como uma divisão interna da página) com conteúdos internos;
  • Tags de formulários: utilizadas para criar formulários para os usuários;
  • Tags de tabelas: adotadas para criar e modificar tabelas facilmente.

Principais tags

Existem atualmente mais de 140 tags HTML para utilização, mas grande parte delas não são muito utilizadas no dia a dia. As mais usadas e importantes para o HTML básico são:

Principais tags: <a> </a>  Tag de link, junto ao atributo href=”…” é responsável pela principal característica da web. <header> </header>  Define um cabeçalho. <section> </section> Define uma seção. <article> </article> Define um artigo <div> </div> Define uma divisão. <footer> </footer>  Define um rodapé. <nav> </nav> Define uma área de navegação (como menus). <table> </table> Define uma tabela. <tr> </tr> Define uma linha da tabela. <td> </td> Define uma célula da tabela. <ol> </ol> Define uma lista ordenada. <ul> </ul> Define uma lista não ordenada. <li> </li>  Define o item de uma lista.
Principais tags: <br/> Realiza uma quebra de linha. <span> </span> Define um span. <p> </p> Tag para definir um parágrafo <h1> </h1> <h2></h2> (...)  Tags para definir um título e subtítulos, variando de 1 a 6, sendo h1 o título mais importante e h6 o de menor importância. <meta/> Possibilita incluir metadados na página. <link/> Possibilita fazer uma linkagem com documentos locais ou globais, como fontes ou folhas de estilos. <script> </script>  Introduz um código de Script, como JavaScript, no documento HTML. <style> </style> Introduz um código CSS no documento HTML. <form> </form> Define um formulário. <input> Define os campos do formulário. <textarea> </textarea> Define uma área para o usuário digitar um texto. <button> </button>  Define um botão. <img/>  Permite inserir uma imagem no seu documento.

Novos elementos básicos em HTML5

A versão mais recente do HTML é o HTML5 e um dos seus principais objetivos é facilitar a manipulação dos elementos, possibilitando a modificação das características dos objetos de forma não intrusiva, fazendo com que isso fique transparente para o usuário final.

Ele é o novo padrão para HTML, XHTML e HTML DOM e permite adicionar novos elementos e funções, como as tags de vídeo e áudio e elementos canvas.

Com uma série de recursos adicionais em relação às versões anteriores, o HTML5 fornece ferramentas para o CSS (Cascading Style Sheets) e o JavaScript fazerem seu trabalho da melhor maneira possível, de forma que um web site ou aplicação continue leve e funcional.
Algumas tags foram modificadas, outras criadas e algumas descontinuadas. Houve também modificações na forma em que o código é escrito e como a página é organizada. Entre os novos elementos básicos do HTML5, destacamos:

Elementos básicos ao HTML 5: <article> Define um artigo em um documento. <aside> Define um conteúdo, à parte, do conteúdo da página. <bdi>	 Define um texto que pode ser formatado em diferentes direções. <details> Define detalhes adicionais que o usuário pode ver ou ocultar. <dialog> Define uma caixa de diálogo ou janela. <figcaption> Define uma legenda para um elemento <figure>. <figure> Define um conteúdo como ilustrações, diagramas, fotos, códigos etc. <footer> Define o rodapé do documento ou seção. <header> Define um cabeçalho para o documento ou uma seção. <main> Define o conteúdo principal de um documento. <mark> Define um texto marcado ou realçado. <menuitem> Define um comando que pode ser usado para invocar um menu popup. <meter> Define uma medida escalar dentro de uma faixa conhecida. <nav>	 Define links de navegação no documento. <progress> Define o progresso de uma tarefa.
Elementos básicos do HTML 5: <rp>	 Define o que exibir em navegadores que não exibem anotações ruby.  <section> Define uma seção no documento. <output> Define o resultado de um cálculo. <canvas> Define um desenho gráfico usando JavaScript. <svg> Define um desenho gráfico usando SVG. <audio> Define um conteúdo de som ou música. <embed> Define um contêiner para aplicações externas (como plug-ins). <source> Define fonte para <video> e <audio>. <track> Define faixas para <video> e <audio>. <video> Define conteúdo de vídeo ou filme. <summary> Define um título visível para um elemento <details>	. <time>	 Define uma data/hora. <wbr>	 Define uma possível quebra de linha. <datalist> Lista opções predefinidas para controles inputs. <keygen> Define um campo de gerador de par de chaves (para formulários).

Ao longo deste artigo você pode perceber que o HTML é o primeiro grande passo no desenvolvimento de software para internet. Além de possibilitar muitas vantagens profissionais, ele pode ser útil para implementar as primeiras ideias de um projeto.

É essencial que os programadores e programadoras aprendam sobre HTML, maximizando o potencial dos navegadores modernos. E na Digital House você pode aprender programação, construindo assim uma carreira sólida de habilidades técnicas.  

Aqui você aprende a fazer sites e sistemas web usando linguagens de programação (HTML, CSS, JavaScript, NodeJS e mais) no nosso curso de Desenvolvimento Web Full Stack. Assim como o Certified Tech Developer, curso completo de Programação, pensado e desenhado pelo Mercado Livre e Globant junto à DH, no qual você aprenderá os conhecimentos técnicos e as soft skills necessárias para entrar nas melhores empresas de tecnologia.

As aulas são online, 100% ao vivo e ministradas por professores especialistas que estão no mercado. Além disso, a DH conta com o departamento de Carreiras, em que os(as) alunos(as) podem acessar diversos conteúdos exclusivos sobre suas jornadas. Inscreva-se agora mesmo e garanta o seu futuro profissional!

conheça o curso de desenvolvimento web full stack