Cândido_Kuerten

Posted on Jul 14

HTML na Prática: 7 fundamentos essências para todos os iniciantes

#html #beginners #webdev #100daysofcode

Estou iniciando meu projeto para uma jornada de aprimoramento tanto de conhecimento, quanto de portfólio para formação como Dev Fullstack Junior e aqui vou documentar cada etapa - para também ajudar que precisar como eu!

Os 7 fundamentos são:

1. Estrutura básica do documento (Boilerplate):

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Minha Página</title>
</head>
<body>
  <!-- Conteúdo visível da página vai aqui -->
</body>
</html>

<!DOCTYPE html> -> informa o navegador que está lendo HTML5
<html lang="pt-BR"> -> elemento raiz que engloba todo o conteúdo, junto com o atributo lang, para definição sobre idioma da página
<head> -> a parte onde consta metadados, como as meta tags e o título da aba
<body> -> parte onde fica localizado todo o conteúdo que será exibido ao usuário

2. Tags Semânticas:

As tags semânticas funcionam para organizar as áreas do projeto e também ajudam os navegadores a fazerem a interpretação da página:

<header>
  <nav>
    <a href="#inicio">Início</a>
    <a href="#sobre">Sobre</a>
  </nav>
</header>

<main>
  <section>
    <h2>Sobre mim</h2>
    <p>Conteúdo da seção...</p>
  </section>
</main>

<footer>
  <p>&copy; 2026 - Todos os direitos reservados</p>
</footer>

<header> -> Seção específica para o cabeçalho da página
<nav> -> Seção para navegação como menu ou conjunto de links
<main> -> Seção com o conteúdo principal da página
<section> -> Seção para agrupar conteúdos por tema
<footer> -> Seção específica para o rodapé da página

Tratando de navegadores em específico, a semântica implica em 2 fatores principais que seriam o SEO (ajuda o navegador a entender melhor o conteúdo) e acessibilidade para facilitar o reconhecimento a leitores de tela.

3. Elementos de Texto:

Dentre esses elementos consta a parte estrutural e de significado da escrita na página:

<h1>Título Principal (só um por página)</h1>
<h2>Subtítulo de Seção</h2>

<p>Um parágrafo normal de texto.</p>

<p>Você pode dar <strong>ênfase forte</strong> numa palavra, 
ou uma <em>ênfase mais sutil</em> em outra.</p>

<blockquote>
  "Uma citação de outra fonte fica bem marcada aqui dentro."
</blockquote>

4. Links e Navegação:

O elemento <a> é o que permite acessar outras páginas ou até outras partes da própria página, a partir de um elemento.

<!-- Link externo, abrindo em nova aba -->
<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
  Documentação MDN
</a>

<!-- Link interno (âncora) -->
<a href="#secao-contato">Ir para Contato</a>

<!-- Link relativo, pra outra página do mesmo site -->
<a href="/sobre.html">Sobre</a>

href="" -> é o atributo que define o caminho que o elemento vai levar o usuário
target="_blank" -> faz a abertura do destino em uma nova página; ao utilizar esse atributo é considerado boa prática usar também rel="noopener noreferrer" por segurança (evita que a página aberta tenha acesso à página de origem via window.opener)

5. Meta tags básicas:

Como mencionado anteriormente, essas tags ficam alocadas dentro do elemento <head>:

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

charset="UTF-8" -> garante que acentos e caracteres especiais sejam exibidos corretamente
viewport -> é a meta tag responsável por fazer a página se comportar adequadamente em celulares

6. Atributos globais:

São atributos que podem ser utilizados em qualquer tag HTML para ajudar em identificação:

<div id="cabecalho" class="container destaque" title="Área principal">
  Conteúdo
</div>

id -> identificador único por página, muito utilizado para integração com JS
class -> identificador que pode ser replicado em diversos elementos, ideal para integração com CSS
title -> mostra uma dica ao usuário, caso passe com o mouse por cima

7. Comentários:

Como o próprio nome já declara, você pode utilizar para deixar anotações no código sem que se apareçam diretamente na página:

<!-- Isso é um comentário e não aparece pro usuário -->
<p>Isso aparece normalmente.</p>

<!-- 
  Comentários também podem
  ocupar várias linhas
-->

São muito utilizados para marcar grandes seções do código, como .

⚠️ Post de aprendizado: compartilho aqui o que estou estudando, não é documentação oficial. Feedbacks são super bem-vindos!

Se você também está começando agora, deixa aqui nos comentários: qual desses pontos você já domina e qual ainda gera mais dúvida? Também, se quiser deixar algum ponto da explicação que ficou faltando ou pode ser melhor, fique a vontade para comentar!

Esse post faz parte da minha jornada documentada rumo a Dev Fullstack Júnior. Me acompanha aqui no Dev.to pras próximas etapas!

DEV Community