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>© 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émrel="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 <!-- INÍCIO DO FOOTER -->.
⚠️ 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!
SOCIAL SHARE CARD GENERATOR