HTML - Elementos Textuais

🧱 Cabeçalhos

HTML possui seis níveis de cabeçalhos, usados para indicar a importância do conteúdo.

headers 
<h1>Este é um título de nível 1</h1>
<h2>Este é um título de nível 2</h2>
<h3>Este é um título de nível 3</h3>
<h4>Este é um título de nível 4</h4>
<h5>Este é um título de nível 5</h5>
<h6>Este é um título de nível 6</h6>
<h1>Este é um título de nível 1</h1>
<h2>Este é um título de nível 2</h2>
<h3>Este é um título de nível 3</h3>
<h4>Este é um título de nível 4</h4>
<h5>Este é um título de nível 5</h5>
<h6>Este é um título de nível 6</h6>

📄 Parágrafos

Para criar um parágrafo, usamos a tag <p>. Cada parágrafo aparece em uma nova linha.

p 
<p>Um parágrafo consiste em uma ou mais frases que formam uma unidade de sentido.</p>
<p>Texto dividido em parágrafos é mais fácil de ler e entender.</p>
<p>Um parágrafo consiste em uma ou mais frases que formam uma unidade de sentido.</p>
<p>Texto dividido em parágrafos é mais fácil de ler e entender.</p>

🔠 Negrito e Itálico

b 
<p>Este é um <b>texto em negrito</b> e este é um <i>texto em itálico</i>.</p>
<p>Este é um <strong>texto importante</strong> e este é um <em>termo enfatizado</em>.</p>
<p>Este é um <b>texto em negrito</b> e este é um <i>texto em itálico</i>.</p>
<p>Este é um <strong>texto importante</strong> e este é um <em>termo enfatizado</em>.</p>

🔢 Sobrescrito e Subscrito

sub 
<p>Hoje é dia 4<sup>º</sup> de setembro.</p>
<p>A fórmula da água é H<sub>2</sub>O.</p>
<p>A teoria da relatividade: E = MC<sup>2</sup></p>
<p>Hoje é dia 4<sup>º</sup> de setembro.</p>
<p>A fórmula da água é H<sub>2</sub>O.</p>
<p>A teoria da relatividade: E = MC<sup>2</sup></p>

🧊 Espaço em Branco

O navegador ignora múltiplos espaços ou quebras de linha. Para espaços extras, use &nbsp;.

whitespace 
<p>A    lua    está    se    afastando    da    Terra.</p>
<p>A&nbsp;&nbsp;&nbsp;lua&nbsp;&nbsp;&nbsp;está&nbsp;&nbsp;&nbsp;se&nbsp;&nbsp;&nbsp;afastando&nbsp;&nbsp;&nbsp;da&nbsp;&nbsp;&nbsp;Terra.</p>
<p>A    lua    está    se    afastando    da    Terra.</p>
<p>A&nbsp;&nbsp;&nbsp;lua&nbsp;&nbsp;&nbsp;está&nbsp;&nbsp;&nbsp;se&nbsp;&nbsp;&nbsp;afastando&nbsp;&nbsp;&nbsp;da&nbsp;&nbsp;&nbsp;Terra.</p>

↩️ Quebra de Linha e Barra Horizontal

hr 
<p>A Terra<br />fica mais pesada todo dia<br />por causa da poeira espacial.</p>
<hr />
<p>Júpiter é maior do que todos os outros planetas juntos.</p>
<p>A Terra<br />fica mais pesada todo dia<br />por causa da poeira espacial.</p>
<hr />
<p>Júpiter é maior do que todos os outros planetas juntos.</p>

🧠 Marcação Semântica

Tags que dão significado ao conteúdo:

semantica 
<p><strong>Importante:</strong> Use marcação semântica para acessibilidade.</p>
<p><em>Este é um texto com ênfase.</em></p>
<blockquote>Citação com recuo, usada para trechos longos.</blockquote>
<p><strong>Importante:</strong> Use marcação semântica para acessibilidade.</p>
<p><em>Este é um texto com ênfase.</em></p>
<blockquote>Citação com recuo, usada para trechos longos.</blockquote>

🔤 Abreviações e Siglas

Use <abbr> para indicar abreviações. O atributo title mostra o significado completo.

abbr 
<p><abbr title="Professor">Prof.</abbr> Stephen Hawking foi um físico teórico.</p>
<p><abbr title="National Aeronautics and Space Administration">NASA</abbr> explora o espaço.</p>
<p><abbr title="Professor">Prof.</abbr> Stephen Hawking foi um físico teórico.</p>
<p><abbr title="National Aeronautics and Space Administration">NASA</abbr> explora o espaço.</p>

📚 Citações e Definições

cite 
<p><cite>Uma Breve História do Tempo</cite> vendeu mais de 10 milhões de cópias.</p>
<p><dfn>Buraco negro</dfn> é uma região do espaço da qual nada escapa.</p>
<p><cite>Uma Breve História do Tempo</cite> vendeu mais de 10 milhões de cópias.</p>
<p><dfn>Buraco negro</dfn> é uma região do espaço da qual nada escapa.</p>

🏢 Endereço de Contato

Use <address> para mostrar informações de contato.

address 
<address>
    742 Evergreen Terrace, Springfield.
</address>
<address>
    742 Evergreen Terrace, Springfield.
</address>

Atributo de tag

Formato de atributo de tag
attribute (chaves="valor")
   ┌─────┴────┐
<p lang="pt-BR">Lorem ipsum dolor.</p>
Formato de atributo de tag
attribute (chaves="valor")
   ┌─────┴────┐
<p lang="pt-BR">Lorem ipsum dolor.</p>
Tags sem conteúdos
<meta name="description" content="A description of the page" />
Tags sem conteúdos
<meta name="description" content="A description of the page" />
Mais exemplos: HTML attribute Reference | MDN
AtributosTags
accept<form>, <input>
accept-charset<form>
accesskeyGlobal attribute
action<form>
align<applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>
allow<iframe>
alt<applet>, <area>, <img>, <input>
async<script>
autocapitalizeGlobal attribute
autocomplete<form>, <input>, <select>, <textarea>
autofocus<button>, <input>, <keygen>, <select>, <textarea>
autoplay<audio>, <video>
background<body>, <table>, <td>, <th>
bgcolor<body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr>
border<img>, <object>, <table>
buffered<audio>, <video>
capture<input>
challenge<keygen>
charset<meta>, <script>
checked<input>
cite<blockquote>, <del>, <ins>, <q>
classGlobal attribute
code<applet>
codebase<applet>
color<font>, <hr>
cols<textarea>
colspan<td>, <th>
content<meta>
contenteditableGlobal attribute
contextmenuGlobal attribute
controls<audio>, <video>
coords<area>
crossorigin<audio>, <img>, <link>, <script>, <video>
csp Experimental<iframe>
data<object>
data-*Global attribute
datetime<del>, <ins>, <time>
decoding<img>
default<track>
defer<script>
dirGlobal attribute
dirname<input>, <textarea>
disabled<button>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea>
download<a>, <area>
draggableGlobal attribute
enctype<form>
enterkeyhint Experimental<textarea>, contenteditable
for<label>, <output>
form<button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea>
formaction<input>, <button>
formenctype<button>, <input>
formmethod<button>, <input>
formnovalidate<button>, <input>
formtarget<button>, <input>
headers<td>, <th>
height<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>
hiddenGlobal attribute
high<meter>
href<a>, <area>, <base>, <link>
hreflang<a>, <link>
http-equiv<meta>
idGlobal attribute
integrity<link>, <script>
intrinsicsize Deprecated<img>
inputmode<textarea>, contenteditable
ismap<img>
itempropGlobal attribute
keytype<keygen>
kind<track>
label<optgroup>, <option>, <track>
langGlobal attribute
language Deprecated<script>
loading Experimental<img>, <iframe>
list<input>
loop<audio>, <bgsound>, <marquee>, <video>
low<meter>
manifest Deprecated<html>
max<input>, <meter>, <progress>
maxlength<input>, <textarea>
minlength<input>, <textarea>
media<a>, <area>, <link>, <source>, <style>
method<form>
min<input>, <meter>
multiple<input>, <select>
muted<audio>, <video>
name<button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>
novalidate<form>
open<details>, <dialog>
optimum<meter>
pattern<input>
ping<a>, <area>
placeholder<input>, <textarea>
playsinline<video>
poster<video>
preload<audio>, <video>
readonly<input>, <textarea>
referrerpolicy<a>, <area>, <iframe>, <img>, <link>, <script>
rel<a>, <area>, <link>
required<input>, <select>, <textarea>
reversed<ol>
roleGlobal attribute
rows<textarea>
rowspan<td>, <th>
sandbox<iframe>
scope<th>
scoped Deprecated<style>
selected<option>
shape<a>, <area>
size<input>, <select>
sizes<link>, <img>, <source>
slotGlobal attribute
span<col>, <colgroup>
spellcheckGlobal attribute
src<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>
srcdoc<iframe>
srclang<track>
srcset<img>, <source>
start<ol>
step<input>
styleGlobal attribute
summary Deprecated<table>
tabindexGlobal attribute
target<a>, <area>, <base>, <form>
titleGlobal attribute
translateGlobal attribute
type<button>, <input>, <embed>, <object>, <ol>, <script>, <source>, <style>, <menu>, <link>
usemap<img>, <input>, <object>
value<button>, <data>, <input>, <li>, <meter>, <option>, <progress>, <param>
width<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>
wrap<textarea>

Referência:

Entidades do HTML (Símbolos)

CaracterDescriçãoNomeNúmero
”quotation mark&quot;&#34;
’apostrophe&apos;&#39;
&ampersand&amp;&#38;
<less-than&lt;&#60;
>greater-than&gt;&#62;
©copyright&copy;&#169;

Referências:

🧩 Juntando Tudo

Todos esses elementos podem ser combinados para montar uma página completa e bem estruturada.

📌 Resumo

Editar esta página