Este é o segundo post da nossa série de tutoriais que vai te auxiliar a criar a sua primeira pagina web com HTML e CSS. Neste artigo vamos mostrar quais são as principais tags HTML para você estruturar seu website da maneira correta.
Conteúdo
O que são tags HTML?
As tags HTML são elementos utilizados para marcar e definir a estrutura e o conteúdo de uma página web. Elas são representadas por meio de códigos delimitados por “<” e “>” e podem conter atributos para fornecer informações adicionais. As tags são interpretadas pelos navegadores para renderizar o conteúdo corretamente aos usuários.
Principais tags HTML
O HTML ou em outras palavras Linguagem de marcação de hipertexto é a principal tecnologia para criar websites, sua estrutura é composta por tags simples que determina a estrutura do conteúdo. No entanto, com o HTML5 foi introduzido novas tags que vai além e designa o significado do conteúdo, também chamado de HTML semântico.
Então existem muitas, mas abaixo está listado as principais tags HTML que nós desenvolvedores web utilizamos com mais frequência:
- <html> – define o documento HTML;
- <head> – contém informações sobre o documento, como título e meta dados;
- <title> – especifica o título da página, exibido na barra de título do navegador;
- <body> – será o conteúdo visual do documento;
- <h1> a <h6> – contém títulos de níveis diferentes;
- <p> – contém parágrafos de texto;
- <img> – exibe uma imagem, “veja neste post como colocar imagens no HTML“;
- <a> – cria um hiperlink para outra página ou para um local dentro da mesma página;
- <div> – define uma divisão;
- <ul> – cria uma lista não ordenada (com marcadores de bullet);
- <ol> – cria uma lista ordenada (com números);
- <li> – define um item em uma lista;
- <table> – cria uma tabela, e “aprenda a criar HTML tabelas“;
- <form> – cria um formulário para entrada de dados;
- <input> – cria os campos do formulário;
- <textarea> – define uma área para o usuário digitar um texto;
- <button> – cria um botão. Também pode aprender como criar botões html e personalizar com css neste guia.
Certamente existem muitas tags HTML disponíveis, mas essas são algumas das principais e mais comumente usadas.
Tag de comentário em HTML
As tags de comentário em HTML são elementos especiais, usados para adicionar comentários ao código. Comentários são partes de texto que não são exibidos pelo navegador, mas fornecem informações úteis para os desenvolvedores.
As tags de comentário em HTML são representadas pelos seguintes caracteres: “<!–” para abrir um comentário e “–>” para fechá-lo. Qualquer texto entre essas duas sequências será tratado como um comentário e não será exibido pelo navegador.
Tags de estilos e scripts
A tag para estilos embutidos:
A tag <style> permite a inserção de estilos CSS diretamente no documento HTML. Com ela, você pode personalizar elementos, alterar cores, fontes, tamanhos, espaçamentos e muito mais. Ao adicionar estilos embutidos, você tem controle completo sobre a aparência da página sem a necessidade de um arquivo CSS separado.
Para estilos mais complexos ou reutilizáveis, é comum utilizar uma folha de estilos externa. A tag <link> permite vincular um arquivo CSS externo ao seu documento HTML.
A tag script para scripts embutidos:
A tag <script> é utilizada para adicionar scripts JavaScript diretamente no documento HTML. Com ela, é possível adicionar interatividade e funcionalidades dinâmicas à sua página web.
Assim como ocorre com os estilos, a tag <script> também pode ser usada para vincular um arquivo JavaScript externo à página.
Tags HTML5 semântico
Além do que é padrão, agora temos tags HTML semânticas. Portanto, vale destacar a importância, já que é beneficia na indexação das páginas nos buscadores, e facilita o entendimento do código pelos desenvolvedores.
Muitas das tags antigas agora não são mais recomendadas, mas não se preocupe! Também temos uma lista das principais tags que se tornaram obsoletas no HTML5.
O que é HTML5 semântico?
Em suma, sua principal função é descrever o significado de todo o conteúdo da página web em vez de dar prioridade a forma, então o HTML5 será toda a estrutura e significado, e a parte de forma deve ser estritamente do CSS. Também pode Aprender mais sobre CSS neste artigo.
Principais tags HTML5 semânticas
- <header> – contém um cabeçalho de seção, geralmente com informações de navegação ou de título;
- <nav> – contém elementos de navegação, como links para outras páginas;
- <main> – contém o conteúdo principal do documento;
- <section> – contém uma seção de conteúdo relacionado, para saber mais siga o artigo como usar o elemento SECTION do HTML5.
- <aside> – contém conteúdo lateral, ou seja, como barras laterais;
- <footer> – contém informações de rodapé, como direitos autorais e partes de contato;
- <article> – contém um conteúdo que não precisa de outro para fazer sentido, como um artigo em um blog;
- <figure> – para inserir uma figura dentro da página, como uma imagem;
- <em> – para dar destaque em uma parte do texto em itálico;
- <strong> – para dar destaque em uma parte do texto em negrito;
- <cite> e <q> – é usado para declarar uma citação, um conteúdo de outra pessoa;
- <time> – é usado para definir data.
Como se tornar um Desenvolvedor Web?
Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro
