Capa do Ebook gratuito Curso completo de HTML, CSS e Javascript para se tornar um Desenvolvedor Front End

Curso completo de HTML, CSS e Javascript para se tornar um Desenvolvedor Front End

4.7

(10)

125 páginas

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

Capítulo 19

Tempo estimado de leitura: 4 minutos

+ Exercício
Audio Icon

Ouça em áudio

0:00 / 0:00
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.

    
    
    
        Page Title
    
    
        

This is a Heading

This is a paragraph.

This is another paragraph.

Continue em nosso aplicativo

Você poderá ouvir o audiobook com a tela desligada, ganhar gratuitamente o certificado deste curso e ainda ter acesso a outros 5.000 cursos online gratuitos.

ou continue lendo abaixo...
Download App

Baixar o aplicativo

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).

    description
    

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.

Agora responda o exercício sobre o conteúdo:

O que é HTML Semântico?

Você acertou! Parabéns, agora siga para a próxima página

Você errou! Tente novamente.

HTML Semântico refere-se à prática de utilizar a sintaxe correta de HTML para indicar o significado do conteúdo, e não apenas sua aparência. Isso envolve o uso de tags que descrevem precisamente o conteúdo, como <header>, <nav>, e <footer>. Essa prática melhora a acessibilidade, SEO e manutenção do código.

Próximo capitúlo

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

Arrow Right Icon
Baixe o app para ganhar Certificação grátis e ouvir os cursos em background, mesmo com a tela desligada.