Block-level elements

<p>

This is a short paragraph. It is followed by three paragraphs of Lorem Ipsum text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non est ista, inquam, Piso, magna dissensio. Quasi ego id curem, quid ille aiat aut neget. Duo Reges: constructio interrete. Aut, Pylades cum sis, dices te esse Orestem, ut moriare pro amico?

Quod cum dixissent, ille contra. Cum praesertim illa perdiscere ludus esset. Bestiarum vero nullum iudicium puto. Ut optime, secundum naturam affectum esse possit.

Progredientibus autem aetatibus sensim tardeve potius quasi nosmet ipsos cognoscimus. Simul atque natum animal est, gaudet voluptate et eam appetit ut bonum, aspernatur dolorem ut malum. Ita multa dicunt, quae vix intellegam. Tollitur beneficium, tollitur gratia, quae sunt vincla concordiae. Tecum optime, deinde etiam cum mediocri amico. Quod praeceptum quia maius erat, quam ut ab homine videretur, idcirco assignatum est deo. Primum quid tu dicis breve? Aut haec tibi, Torquate, sunt vituperanda aut patrocinium voluptatis repudiandum.

<blockquote>

Single-line blockquote:

Contrary to popular belief, Lorem Ipsum is not simply random text.

Multi-line blockquote with a cite reference:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Demetris Kikizas, 2017

Another single-line blockquote:

This is a very short quote.

Another multi-line blockquote:

This is a multi-line quote with tho paragraphs.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

<table>

A table written in Markdown:

A table written in HTML:

<dl>

banana

A long, curved fruit with a yellow skin and soft, sweet, white flesh inside.

lemon

An oval fruit that has a thick, yellow skin and sour juice.

orange

A round sweet fruit that has a thick orange skin and an orange centre divided into many parts.

watermelon

A large, round or oval-shaped fruit with dark green skin, sweet pink flesh, and a lot of black seeds.

<ul>

• List item one
  • List item one
    • List item one
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four
• List item two
• List item three
• List item four

<ol>

1. List item one
   1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
   2. List item two
   3. List item three
   4. List item four
2. List item two
3. List item three
4. List item four

<address>

Inline elements

<a>

This is an example of a link.

<abbr>

The abbreviation Dr stands for “Doctor”.

<cite>

“The <cite> element represents a reference to a creative work. It must include the title of the work or the name of the author (person, people or organization) or an URL reference, or a reference in abbreviated form”: https://www.w3.org/TR/html51/textlevel-semantics.html

“One two three four five six seven eight.” – Some person

<code>

You will learn later on in these tests that word-wrap: break-word; will be your best friend.

<em>

This element is used to put emphasis on something. It is usually styled as italicized text.

<ins>

The ins element represents an addition to the document. This sentence is wrapped in <ins> tags.

<kbd>

This represents keyboard text, which is often styled like the <code> element.

The <kbd> element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands). When the <kbd> element is nested inside a <samp> element, it represents the input as it was echoed by the system. When the <kbd> element contains a <samp> element, it represents input based on system output, for example invoking a menu item. When the <kbd> element is nested inside another <kbd> element, it represents an actual key or other single unit of input as appropriate for the input mechanism. https://www.w3.org/TR/html51/textlevel-semantics.html

<mark>

The <mark> element is used to highlight text.

<pre>

.post-title {
    margin: 0 0 5px;
    font-weight: bold;
    font-size: 38px;
    line-height: 1.2;
}

<q>

It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife. – Jane Austen

The <q> element represents some phrasing content quoted from another source.

Quotation punctuation (such as quotation marks) that is quoting the contents of the element must not appear immediately before, after, or inside <q> elements; they will be inserted into the rendering by the user agent.

Content inside a <q> element must be quoted from another source, whose address, if it has one, may be cited in the cite attribute. The source may be fictional, as when quoting characters in a novel or screenplay.

– https://www.w3.org/TR/html51/textlevel-semantics.html

<s>

Buy our Iced Tea and Lemonade!

Recommended retail price: $3.99 per bottle

Now selling for just $2.99 a bottle!

<strong>

This element is usually styled as bold text. When one is nested inside another, the text becomes even bolder.

<sub>

The chemical formula of water is H₂O. (The number 2 should be lowered.)

<sup>

The equation of mass–energy equivalence is: E = mc². (The number 2 should be lifted.)

<time>

The concert starts at 20:00.

<var>

This allows you to denote variables.