Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] HTML atividade basica

por Vinicius Lelis Florencio
| 700 xp | 2 posts
Estudante

Olá a todos, fiz recente afora a primeira atividade de HTML, e fiquei um pouco confuso sobre o uso da meta, principalmente nas duas ultimas tags utilizadas. Eu demorei um pouco pra entender oque cada um representa e o porque de colocarmos.
ps: Não julguem o meu projeto atividade, fiz dessa forma mais para entender oque cada um pode fazer.

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, inicial-scale=1.0">
    <title>Atividade</title>        
            <body>
                <h1>APRENDER O CABEÇALHO</h1>
                <ul>
                    <li>item 1</li>        
                    <li>item 2</li>
                    <li>item 3</li>
                </ul>
                <h2>Atividades 1</h2>
                    <p>aprender o paragrafo</p>
                        <img src="html.png" alt="Logo html5">
                        <ol>
                            <li>Primeiro item</li>
                            <li>Segundo Item</li>
                            <li>Terceito item</li>
                            <li>Quarto Item</li>
                        </ol>
                
            </body>
    </head>
</html>
2 respostas
solução!
por Lorena Garcia
| 13419.7k xp | 19907 posts
Instrutor

Oii, Vinicius!

Fico feliz que você esteja explorando o mundo do desenvolvimento. Não se preocupe com a simplicidade do projeto, o começo é exatamente para testar e entender como cada peça se encaixa.

As tags <meta> são instruções que passamos diretamente para o navegador ou para motores de busca. Elas não aparecem visualmente na página, mas definem como o site deve se comportar.

1. X-UA-Compatible

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Antigamente, o navegador Internet Explorer tinha muitas versões diferentes que interpretavam o código de formas distintas. Essa linha serve para dizer ao navegador: "Use a versão mais recente disponível do motor de renderização".

Hoje em dia, com os navegadores modernos (Chrome, Edge, Firefox), ela se tornou menos necessária, mas ainda é comum vê-la em projetos para garantir que versões antigas do Edge ou do IE não entrem em um "modo de compatibilidade" que poderia quebrar o seu visual.

2. Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Essa é uma das tags mais importantes hoje em dia. Ela cuida da responsividade, ou seja, faz com que seu site se ajuste corretamente em celulares, tablets e computadores.

  • width=device-width: Diz que a largura do site deve ser igual à largura da tela do aparelho.
  • initial-scale=1.0: Define que o zoom inicial será o padrão (100%), evitando que o site abra "pequeno demais" em um celular.

Sem essa tag, um smartphone tentaria carregar o site como se fosse um computador gigante, deixando as letras minúsculas e difíceis de ler.

Pequeno ajuste no seu código

Notei um detalhe na estrutura do seu HTML. A tag <body> deve ficar fora e depois do <head>, e não dentro dele. O correto seria:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Atividade</title>
</head>
<body>
    <h1>APRENDER O CABEÇALHO</h1>
    </body>
</html>

Isso garante que as configurações do site sejam lidas primeiro (no head) e o conteúdo visual apareça logo em seguida (no body).

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
por Vinicius Lelis Florencio
| 700 xp | 2 posts
Estudante

Muito obrigado de verdade pela explicação a tag meta. Não tinha reparado nesse erro na tag body no codigo kkkk obrigado denovo

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA