A charming Jekyll theme.
linus.arthr.dev/
jekyll-theme
remove test posts
-309
-10
_posts/2026-01-18-wikipedia.md
-10
_posts/2026-01-18-wikipedia.md
-17
_posts/2026-02-02-rss.md
-17
_posts/2026-02-02-rss.md
-13
_posts/2026-02-16-a-test-post.md
-13
_posts/2026-02-16-a-test-post.md
-269
_posts/2026-02-20-text-formatting.md
-269
_posts/2026-02-20-text-formatting.md
···
1
-
---
2
-
layout: post
3
-
title: Text formatting
4
-
author: arthur
5
-
tags:
6
-
- HTML
7
-
- semantics
8
-
- markup
9
-
---
10
-
11
-
{%- include link-preview.html url="https://paomortadela.com.br/2024/11/e-impossivel-descrever-o-clube-da-esquina/" -%}
12
-
13
-
Este é um parágrafo comum com **negrito**, *itálico*, ***negrito e itálico***, ~~tachado~~ e `código inline`. Também há [um link](https://example.com) e [um link com título](https://example.com "Título do link").
14
-
15
-
Texto com quebra de linha
16
-
forçada usando dois espaços.
17
-
18
-
19
-
# Título H1
20
-
21
-
## Título H2
22
-
23
-
### Título H3
24
-
25
-
#### Título H4
26
-
27
-
##### Título H5
28
-
29
-
###### Título H6
30
-
31
-
---
32
-
33
-
## Parágrafos e formatação inline
34
-
35
-
36
-
---
37
-
38
-
## Citações
39
-
40
-
> Esta é uma citação simples.
41
-
42
-
> Esta é uma citação com múltiplos parágrafos.
43
-
>
44
-
> Segundo parágrafo da citação.
45
-
>
46
-
> > Citação aninhada dentro de outra citação.
47
-
48
-
---
49
-
50
-
## Listas
51
-
52
-
### Lista não-ordenada
53
-
54
-
- Item um
55
-
- Item dois
56
-
- Sub-item A
57
-
- Sub-item B
58
-
- Sub-sub-item I
59
-
- Item três
60
-
61
-
### Lista ordenada
62
-
63
-
1. Primeiro item
64
-
2. Segundo item
65
-
1. Sub-item numerado
66
-
2. Sub-item numerado
67
-
3. Terceiro item
68
-
69
-
### Lista de tarefas
70
-
71
-
- [x] Tarefa concluída
72
-
- [ ] Tarefa pendente
73
-
- [x] Outra tarefa concluída
74
-
- [ ] Mais uma pendente
75
-
76
-
### Lista de definições (HTML puro)
77
-
78
-
<dl>
79
-
<dt>Termo</dt>
80
-
<dd>Definição do termo.</dd>
81
-
<dt>Outro termo</dt>
82
-
<dd>Definição do outro termo.</dd>
83
-
</dl>
84
-
85
-
---
86
-
87
-
## Tabelas
88
-
89
-
| Coluna A | Coluna B | Coluna C |
90
-
|:-------------|:------------:|-------------:|
91
-
| Alinhada esq | Centralizada | Alinhada dir |
92
-
| Dado 1 | Dado 2 | Dado 3 |
93
-
| Dado longo | Médio | Curto |
94
-
95
-
---
96
-
97
-
## Código
98
-
99
-
### Código inline
100
-
101
-
Use `console.log()` para depurar no JavaScript.
102
-
103
-
### Bloco de código sem linguagem
104
-
105
-
```
106
-
Texto pré-formatado
107
-
sem destaque de sintaxe.
108
-
```
109
-
110
-
### Bloco de código com linguagem
111
-
112
-
```html
113
-
<!doctype html>
114
-
<html lang="pt-BR">
115
-
<head>
116
-
<meta charset="UTF-8" />
117
-
<title>Exemplo</title>
118
-
</head>
119
-
<body>
120
-
<p>Olá, mundo!</p>
121
-
</body>
122
-
</html>
123
-
```
124
-
125
-
```css
126
-
:root {
127
-
--color-primary: #005fcc;
128
-
}
129
-
130
-
body {
131
-
font-family: system-ui, sans-serif;
132
-
color: var(--color-primary);
133
-
}
134
-
```
135
-
136
-
```js
137
-
const greet = (name) => `Olá, ${name}!`;
138
-
console.log(greet("Arthur"));
139
-
```
140
-
141
-
---
142
-
143
-
## Tags semânticas inline (HTML puro)
144
-
145
-
<p>
146
-
<abbr title="HyperText Markup Language">HTML</abbr> é a linguagem de marcação da web.
147
-
</p>
148
-
149
-
<p>
150
-
A fórmula da água é H<sub>2</sub>O e E = mc<sup>2</sup> é de Einstein.
151
-
</p>
152
-
153
-
<p>
154
-
<cite>Dom Casmurro</cite> é um romance de Machado de Assis.
155
-
</p>
156
-
157
-
<p>
158
-
<kbd>Ctrl</kbd> + <kbd>C</kbd> copia o texto selecionado.
159
-
</p>
160
-
161
-
<p>
162
-
O resultado foi <samp>Erro 404: Não encontrado</samp>.
163
-
</p>
164
-
165
-
<p>
166
-
<var>x</var> + <var>y</var> = 10
167
-
</p>
168
-
169
-
<p>
170
-
<mark>Este trecho está destacado</mark> como se fosse marca-texto.
171
-
</p>
172
-
173
-
<p>
174
-
<small>Texto em tamanho reduzido, usado para notas legais.</small>
175
-
</p>
176
-
177
-
<p>
178
-
<strong>Importância semântica forte</strong> vs. <b>negrito visual</b>.
179
-
</p>
180
-
181
-
<p>
182
-
<em>Ênfase semântica</em> vs. <i>itálico visual</i>.
183
-
</p>
184
-
185
-
<p>
186
-
<del>Texto removido/deletado</del> e <ins>texto inserido</ins>.
187
-
</p>
188
-
189
-
<p>
190
-
Texto com <span>span genérico</span> sem semântica própria.
191
-
</p>
192
-
193
-
---
194
-
195
-
## Figuras e imagens
196
-
197
-
### Imagem simples (Markdown)
198
-
199
-
200
-
201
-
### Figura com legenda (HTML puro)
202
-
203
-
<figure>
204
-
<img src="https://placehold.co/800x400" ="Imagem de exemplo" />
205
-
<figcaption>Legenda descritiva da figura.</figcaption>
206
-
</figure>
207
-
208
-
---
209
-
210
-
## Áudio (HTML puro)
211
-
212
-
<figure>
213
-
<audio controls>
214
-
<source src="audio.mp3" type="audio/mpeg" />
215
-
<source src="audio.ogg" type="audio/ogg" />
216
-
Seu navegador não suporta o elemento <code>audio</code>.
217
-
</audio>
218
-
<figcaption>Legenda do áudio.</figcaption>
219
-
</figure>
220
-
221
-
---
222
-
223
-
## Vídeo (HTML puro)
224
-
225
-
<figure>
226
-
<video controls width="800" poster="poster.jpg">
227
-
<source src="video.mp4" type="video/mp4" />
228
-
<source src="video.webm" type="video/webm" />
229
-
Seu navegador não suporta o elemento <code>video</code>.
230
-
</video>
231
-
<figcaption>Legenda do vídeo.</figcaption>
232
-
</figure>
233
-
234
-
<iframe width="640" height="360" src="https://www.youtube.com/embed/yko6jKJ6ROQ" title="The Top 10 Gaming Genres...According to You!" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
235
-
236
-
---
237
-
238
-
## Notas de rodapé
239
-
240
-
Esta é uma afirmação que precisa de referência.[^1]
241
-
242
-
Outra frase com nota de rodapé mais longa.[^nota-longa]
243
-
244
-
[^1]: Referência curta.
245
-
[^nota-longa]: Esta é uma nota de rodapé com um texto mais longo e detalhado, podendo conter `código inline` e [links](https://example.com).
246
-
247
-
---
248
-
249
-
## Linha horizontal / divisor
250
-
251
-
---
252
-
253
-
***
254
-
255
-
___
256
-
257
-
---
258
-
259
-
## Bloco de detalhes / sumário (HTML puro)
260
-
261
-
<details>
262
-
<summary>Clique para expandir</summary>
263
-
<p>Conteúdo oculto que aparece ao expandir o bloco.</p>
264
-
<ul>
265
-
<li>Item oculto 1</li>
266
-
<li>Item oculto 2</li>
267
-
</ul>
268
-
</details>
269
-