Ok, vamos fingir que esse é um artigo ou um evento. O primeiro parágrafo vai falar de forma concisa o que o usuário vai ler na sequência. Informações como que cidade, país ou estado e o que está sendo realizado são bem relevantes.

O próximo passo é explanar um pouco mais sobre o assunto, dessa vez pensando que seu artigo começa aqui, terá um meio e fim. Geralmente essa parte trata da introdução do que vem a seguir, um video uma imagem, um print, um folder, um video.

É legal descrever o conteúdo acima, #pracegover.

Additionally, to add further confusion, images can be wrapped inside paragraph content, lets test some examples here.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.
Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.

And then… Finally, users can insert a WordPress

, which is kinda ugly and comes with some CSS stuck into the page to style it (which doesn’t actually validate, nor does the markup for the gallery). The amount of columns in the gallery is also changable by the user, but the default is three so we’ll work with that for our example with an added fouth image to test verticle spacing.

Titulo Exemplo 1	Titulo Exemplo 2	Titulo Exemplo 3
Texto curto	Texto curto	Table Footer Column Three
Texto curto	Texto curto	Agora você tem um espaço realmente legal pra descrever o conteúdo de uma forma interessante, mas lembre-se não muito.
Texto curto	Texto curto	Conteúdo tabela três
Texto curto	Texto curto	Table Row Column Three
Texto curto	Texto curto	Table Row Column Three
Texto curto	Texto curto	Table Row Column Three

1. Ordered list item one.
2. Ordered list item two.
3. Ordered list item three.
4. Ordered list item four.
5. By the way, WordPress does not let you create nested lists through the visual editor.

• Unordered list item one.
• Unordered list item two.
• Unordered list item three.
• Unordered list item four.
• By the way, WordPress does not let you create nested lists through the visual editor.

Currently WordPress blockquotes are just wrapped in blockquote tags and have no clear way for the user to define a source. Maybe one day they’ll be more semantic (and easier to style) like the version below.

HTML5 comes to our rescue with the footer element, allowing us to add semantically separate information about the quote.

O título tem que ser chamativo e resumir do que se trata, pode ter uma vírgula

Esse é o cabeçalho dois

Esse é um cabeçalho três

Cabeçalho quatro

Cabeçalho cinco

Cabeçalho seis

Esse é um parágrafo padrão do design.com.br. Nele você pode dar colocar em negrito, partes importantes do seu texto. Pode dar um mortal fazer um artigo bem completo. No entanto não aconselhamos que use texto sublinhado, isso porque eles são feitos para links. Ao você usar esse recurso, fode confunde o usuário portanto é bem importante lembrar. Você também pode usar caracteres especiais como C0₂, ou 2^nd example. If they are feeling non-semantic they might even use bold, italic, big or small elements too. Incidentally, these HTML4.01 tags have been given new life and semantic meaning in HTML5, you may be interested in reading this article by Harry Roberts which gives a nice excuse to test a link.  It is also worth noting in the “kitchen sink” view you can also add underline styling and set text color with pesky inline CSS.

Additionally, WordPress also sets text alignment with inline styles, like this left aligned paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.

This is a right aligned paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.

This is a justified paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.

Finally, you also have the option of an indented paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.

And last, and by no means least, users can also apply the Address tag to text like this:

123 Example Street,
Testville,
West Madeupsburg,
CSSland,
1234

…so there you have it, all our text elements

Level One Heading

Level Two Heading

Level Three Heading

Level Four Heading

Level Five Heading

Level Six Heading

OK, so images can get quite complicated as we have a few variables to work with! For example the image below has had a caption entered in the WordPress image upload dialog box, this creates a shortcode which then in turn wraps the whole thing in a div with inline styling! Maybe one day they’ll be able to use the figure and figcaption elements for all this. Additionally, images can be wrapped in links which, if you’re using anything other than color or text-decoration to style your links can be problematic.

The next issue we face is image alignment, users get the option of None, Left, Right & Center. On top of this, they also get the options of Thumbnail, Medium, Large & Fullsize. You’ll probably want to add floats to style the image position so important to remember to clear these to stop images popping below the bottom of your articles.

Additionally, to add further confusion, images can be wrapped inside paragraph content, lets test some examples here.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.

And then… Finally, users can insert a WordPress

, which is kinda ugly and comes with some CSS stuck into the page to style it (which doesn’t actually validate, nor does the markup for the gallery). The amount of columns in the gallery is also changable by the user, but the default is three so we’ll work with that for our example with an added fouth image to test verticle spacing.

Table Head Column One	Table Head Column Two	Table Head Column Three
Table Footer Column One	Table Footer Column Two	Table Footer Column Three
Table Row Column One	Short Text	Testing a table cell with a longer amount of text to see what happens, you’re not using tables for site layouts are you?
Table Row Column One	Table Row Column Two	Table Row Column Three
Table Row Column One	Table Row Column Two	Table Row Column Three
Table Row Column One	Table Row Column Two	Table Row Column Three
Table Row Column One	Table Row Column Two	Table Row Column Three

1. Ordered list item one.
2. Ordered list item two.
3. Ordered list item three.
4. Ordered list item four.
5. By the way, WordPress does not let you create nested lists through the visual editor.

• Unordered list item one.
• Unordered list item two.
• Unordered list item three.
• Unordered list item four.
• By the way, WordPress does not let you create nested lists through the visual editor.

Currently WordPress blockquotes are just wrapped in blockquote tags and have no clear way for the user to define a source. Maybe one day they’ll be more semantic (and easier to style) like the version below.

HTML5 comes to our rescue with the footer element, allowing us to add semantically separate information about the quote.

Level One Heading

Level Two Heading

Level Three Heading

Level Four Heading

Level Five Heading

Level Six Heading

This is a standard paragraph created using the WordPress TinyMCE text editor. It has a strong tag, an em tag and a strikethrough which is actually just the del element. There are a few more inline elements which are not in the WordPress admin but we should check for incase your users get busy with the copy and paste. These include citations, abbr, bits of code and variables, inline quotations, inserted text, text that is no longer accurate or something so important you might want to mark it. We can also style subscript and superscript characters like C0₂, here is our 2^nd example. If they are feeling non-semantic they might even use bold, italic, big or small elements too. Incidentally, these HTML4.01 tags have been given new life and semantic meaning in HTML5, you may be interested in reading this article by Harry Roberts which gives a nice excuse to test a link.  It is also worth noting in the “kitchen sink” view you can also add underline styling and set text color with pesky inline CSS.

Additionally, WordPress also sets text alignment with inline styles, like this left aligned paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.

This is a right aligned paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.

This is a justified paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.

Finally, you also have the option of an indented paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.

And last, and by no means least, users can also apply the Address tag to text like this:

123 Example Street,
Testville,
West Madeupsburg,
CSSland,
1234

…so there you have it, all our text elements

It’s not that I’m so smart, it’s just that I stay with problems longer.
– Albert Einstein

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1 (in section)

Heading 2 (in section)

Heading 3 (in section)

Heading 4 (in section)

Heading 5 (in section)

Heading 6 (in section)

Heading 1 (in article)

Heading 2 (in article)

Heading 3 (in article)

Heading 4 (in article)

Heading 5 (in article)

Heading 6 (in article)

Heading 1 (in hgroup)

Heading 2 (in hgroup)

Text-level semantics

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

Address: somewhere, world

---

---

The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The img element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The _{sub element} example
The ^{sup element} example
The u element example
The var element example

Embedded content

audio

img

svg

video

Interactive content

details / summary

More info

Additional information

• Point 1
• Point 2

Grouping content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

pre

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.

<html>
<head>
</head>
<body>
<div class="main"> <div>
</body>
</html>

blockquote

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

Even better philosophical quote marked up with just a <blockquote> element.

ordered list

1. list item 1
2. list item 1
   1. list item 2
   2. list item 2
      1. list item 3
      2. list item 3
   3. list item 2
   4. list item 2
3. list item 1
4. list item 1

unordered list

• list item 1
• list item 1
  • list item 2
  • list item 2
    • list item 3
    • list item 3
  • list item 2
  • list item 2
• list item 1
• list item 1

description list

Description name

Description value

Description name

Description value

Description value

Description name

Description name

Description value

figure

Tabular data

Jimi Hendrix – albums

Album	Year	Price
Album	Year	Price
Are You Experienced	1967	$10.00
Axis: Bold as Love	1967	$12.00
Electric Ladyland	1968	$10.00
Band of Gypsys	1970	$12.00

Forms

Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping.

Text input

Email input

Search input

Tel input

URL input

Password input

File input

Radio input

Checkbox input

Radio input

Checkbox input

Select field Option 01Option 02

Textarea Textarea text

Inputs as siblings of labels

Color input

Number input

Range input

Date input

Month input

Week input

Datetime input

Datetime-local input

Radio input

Checkbox input

Radio input

Checkbox input

Select field Option 01Option 02

Textarea Textarea text

Clickable inputs and buttons

Reset (button)

Button (button)

Submit (button)

Disabled (button)

box-sizing tests

Option 01Option 02

Textarea text

Reset (button)

Button (button)

Submit (button)