IT Open Helper

Estrutura e Metadados

Elementos essenciais que todo documento HTML deve conter para ser válido.

<!DOCTYPE> : Informa ao navegador a versão do HTML que está sendo utilizada (HTML5).
<html> : O elemento raiz. Contém todos os elementos do documento.
<head> : Cabeçalho do documento (invisível na página). Contém metadados, título e links para CSS.
<title> : Define o título da página que aparece na aba do navegador (Crucial para SEO).
<meta/> : Tag para inserir metadados (charset, viewport, description).
<body> : O corpo do documento. Tudo que é visível para o usuário fica aqui.

Tags introduzidas no HTML5 para dar significado às seções da página, substituindo o uso excessivo de divs genéricas.

<header> : Define um cabeçalho de página ou de seção.
<main> : Define o conteúdo principal e único da página.
<footer> : Define o rodapé.
<nav> : Seção de links de navegação (menus).
<article> : Conteúdo independente e autossuficiente (ex: post de blog).
<section> : Uma seção temática do documento.
<aside> : Conteúdo relacionado/secundário (ex: sidebar, glossário).
<div> : Container genérico de fluxo (sem valor semântico). Use para agrupar elementos para estilização.

Atributos que podem ser usados em praticamente qualquer tag HTML.

class="..." : Identificador não-único para estilização CSS (pode repetir na página).
id="..." : Identificador ÚNICO do elemento (não pode repetir).
style="..." : CSS inline (evite usar, prefira arquivos CSS externos).
hidden : Oculta o elemento visualmente.
lang="..." : Define o idioma do conteúdo do elemento.
title="..." : Texto de dica (tooltip) ao passar o mouse.
alt="..." : Texto alternativo para acessibilidade (obrigatório em imagens).

<h1> - <h6> : Títulos hierárquicos (H1 é o mais importante).
<p> : Parágrafo de texto.
<span> : Container genérico de linha (inline) para estilizar pedaços de texto.
<strong> : Texto com forte importância (semântica) -> Negrito.
<b> : Apenas efeito visual de negrito (sem semântica).
<em> : Ênfase no texto -> Itálico.
<i> : Apenas efeito visual de itálico.
<pre> : Texto pré-formatado (respeita espaços e quebras de linha).
<br/> : Quebra de linha forçada.
<hr/> : Linha horizontal temática (separador).

A tag `<a>` é a base da navegação na web.

html

<a href="https://google.com" target="_blank">Ir para o Google</a>

Elementos nativos para reprodução de mídia.

html

<video controls>
  <source src="filme.mp4" type="video/mp4">
</video>