4.15. Introdução ao HTML: estrutura básica, tags e atributos: HTML semântico

Introdução ao HTML: estrutura básica, tags e atributos

HTML, ou HyperText Markup Language, é a linguagem de marcação padrão para documentos projetados para serem exibidos em um navegador da web. É um dos pilares fundamentais da web e é usado para estruturar o conteúdo das páginas da web.

A estrutura básica de um documento HTML começa com a declaração do tipo de documento, que é . Isso é seguido pela tag HTML, que envolve todo o conteúdo da página. Dentro da tag HTML, temos duas partes principais: a cabeça (head) e o corpo (body).

A tag head contém informações meta sobre o documento, como seu título, links para scripts e estilos, e outras coisas que não são renderizadas na janela do navegador. A tag body contém o conteúdo principal que é exibido aos usuários na janela do navegador.

    
    
    
        
    
    
        
This is a Heading
        
This is a paragraph.
        
This is another paragraph.
    
    
    

No exemplo acima, temos uma estrutura básica de um documento HTML. A tag title define o título da página, que é exibido na barra de título do navegador ou na guia da página. A tag h1 define um título de nível 1, e as tags p definem parágrafos.

Tags e Atributos

As tags HTML são os blocos de construção de páginas HTML. Uma tag HTML é uma palavra-chave cercada por colchetes angulares (< e >). A maioria das tags HTML vem em pares: a tag de abertura e a tag de fechamento. A tag de fechamento é a mesma que a tag de abertura, mas com uma barra (/) antes da palavra-chave.

Os atributos HTML fornecem informações adicionais sobre os elementos. Eles são sempre especificados no início da tag e vêm em pares de nome/valor. Por exemplo, a tag img para inserir imagens tem atributos como src (para especificar o URL da imagem), alt (para especificar o texto alternativo para a imagem), width e height (para especificar a largura e a altura da imagem).

HTML Semântico

HTML semântico é a prática de usar a sintaxe correta de HTML para reforçar o significado do conteúdo em uma página da web, em vez de apenas para sua apresentação. HTML semântico usa tags HTML para descrever precisamente seu conteúdo. Por exemplo, a tag <b> é usada para negrito, enquanto a tag <strong> é usada para importância.

As tags semânticas não só ajudam os desenvolvedores a entender o conteúdo e a estrutura de uma página, mas também são úteis para os motores de busca e as tecnologias assistivas, como os leitores de tela. Por exemplo, usando a tag <header> para o cabeçalho de uma página, a tag <nav> para a navegação, a tag <main> para o conteúdo principal, a tag <article> para um artigo independente, a tag <section> para uma seção de uma página, a tag <aside> para o conteúdo lateral e a tag <footer> para o rodapé.

Em resumo, aprender a estrutura básica de um documento HTML, entender como usar tags e atributos e aplicar HTML semântico são etapas fundamentais para se tornar um desenvolvedor front-end eficaz.

Próxima página do Ebook Gratuito:

20Introdução ao HTML: estrutura básica, tags e atributos: Introdução ao CSS

4 minutos