This is an article with a very long title that should take more than two lines, even on large screens: Did and ahead some far blind rueful flailed as crud where broke some atrocious far scandalously the that less rose

Regarding far like less like far more less up trimly turtle flashily tangible magically far before one as some indirectly compactly opposite wasp thrust inconsiderately lenient beside adequately ferret mistaken before far rode over stopped when dear some gosh thus dear hung gosh.

Like far following oriole goodness far far outran some amongst listlessly up blubbered empiric ahead that while beaver a one gosh and dependently gosh casually near much weakly unicorn dear beneficently python richly and since fantastically more and and flapped the along the flimsy.

HTML elements: code and preformatted text

First, two paragraphs. Lorem ipsum lorem nisi mattis sagittis platea fusce massa quis quam urna at, gravida volutpat semper magna interdum quam per pretium nullam hendrerit.

Massa adipiscing hendrerit mattis aenean interdum scelerisque id magna quisque lacus dapibus, diam facilisis senectus hendrerit phasellus litora cras venenatis vitae eu ad, enim vestibulum a placerat tempus ante sodales laoreet felis dolor habitasse ullamcorper bibendum nisi pharetra orci elementum, nec lectus aenean consequat aptent, congue risus aliquam dapibus gravida.

Code wrapped in <code>:

body { color: red; }

Code wrapped in <pre>:

body {
  color: red;
}

Code wrapped in <pre> and <code>:

const power = (base, exponent) => {
  let result = 1;
  
  for (let count = 0; count < exponent; count++) {
    result *= base;
  }
  
  return result;
};

Code wrapped in a Markdown fenced code block:

const power = (base, exponent) => {
  let result = 1;

  for (let count = 0; count < exponent; count++) {
    result *= base;
  }

  return result;
};

Another piece of code wrapped in a Markdown fenced code block:

def foo(x):
    if x == 0:
        bar()
        baz()
    else:
        qux(x)
        foo(x - 1)

Markup and formatting

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque dignissim enim sit amet venenatis urna cursus eget. Eget arcu dictum varius duis at. Sed nisi lacus sed viverra tellus in hac habitasse. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Enim praesent elementum facilisis leo vel fringilla est. Adipiscing commodo elit at imperdiet dui accumsan sit amet. Interdum consectetur libero id faucibus nisl tincidunt eget nullam non.

Block-level elements

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque dignissim enim sit amet venenatis urna cursus eget.

Eget arcu dictum varius duis at. Sed nisi lacus sed viverra tellus in hac habitasse. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Enim praesent elementum facilisis leo vel fringilla est.

Adipiscing commodo elit at imperdiet dui accumsan sit amet. Interdum consectetur libero id faucibus nisl tincidunt eget nullam non.

<p>

This is a short paragraph 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

<table>

Name Text Number
Antispam Bee Three 9832
Disable Comments Two 231532
Query Monitor Four 15982

<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>

Mozilla Foundation
331 E Evelyn Ave
Mountain View, CA 94041
USA

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

“Foo bar baz” – Some organization

<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>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. – Some Person

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>

“The HTML <s> element renders text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant or no longer accurate. However, <s> is not appropriate when indicating document edits; for that, use the <del> and <ins> elements, as appropriate.”: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s

Example:

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 H2O. (The number 2 should be lowered.)

<sup>

The equation of mass–energy equivalence is: E = mc2. (The number 2 should be raised.)

<time>

The concert starts at .

<var>

This allows you to denote variables.

Obsolete elements

The following elements are “entirely obsolete” in HTML5 “and must not be used by authors”: https://www.w3.org/TR/html5/obsolete.html

<acronym>

Use <abbr> instead.

<big>

These tests are a big deal.

<del>

This element lets you strike out text. It is no longer supported in HTML5. Use <strike> instead.

Changelog

  • 2018-12-14. Added explanation of <s> from MDN.
  • 2018-12-14. Changed example for <address>.
  • 2018-12-14. Converted tables, ordered lists and unordered lists to markdown.
  • 2018-11-19. Imported document.

Ελληνικά: Ερωτόκριτος, 1–48

Tου Κύκλου τα γυρίσματα, που ανεβοκατεβαίνουν,
και του Τροχού, που ώρες ψηλά κι ώρες στα βάθη πηαίνουν·
και του Καιρού τα πράματα, που αναπαημό δεν έχουν,
μα στο Kαλό κ’ εις το Kακό περιπατούν και τρέχουν·
και των Αρμάτω’ οι ταραχές, όχθρητες, και τα βάρη,
του Έρωτος οι μπόρεσες και τση Φιλιάς η χάρη·
αυτάνα μ’ εκινήσασι τη σήμερον ημέραν,
ν’ αναθιβάλω και να πω τά κάμαν και τά φέραν
σ’ μιά Κόρη κ’ έναν Άγουρο, που μπερδευτήκα’ ομάδι
σε μιά Φιλιάν αμάλαγη, με δίχως ασκημάδι.
Κι όποιος του Πόθου εδούλεψε εις-ε καιρόν κιανένα,
ας έρθει για ν’ αφουκραστεί ό,τ’ είν’ εδώ γραμμένα·
να πάρει ξόμπλι κι [α]ρμηνειά, βαθιά να θεμελιώνει
πάντα σ’ αμάλαγη Φιλιάν, οπού να μην κομπώνει.
Γιατί όποιος δίχως πιβουλιά του Πόθου του ξετρέχει,
εις μιάν αρχή [α’ βασανιστεί], καλό το τέλος έχει.
Αφουκραστείτε, το λοιπόν, κι ας πιάνει οπού’χει γνώση,
για να κατέχει κι αλλουνού απόκριση να δώσει.

Στους περαζόμενους καιρούς, που οι Έλληνες ορίζαν,
κι οπού δεν είχε η Πίστη τως θεμελιωμένη ρίζαν,
τότες μιά Aγάπη μπιστική στον Kόσμο εφανερώθη,
κ’ εγράφτη μέσα στην καρδιά, κι ουδεποτέ τση ελιώθη.
Kαι με Kαιρό σε δυό κορμιά ο Πόθος είχε μείνει,
και κάμωμα πολλά ακριβόν έτοιους καιρούς εγίνη.
Eις την Aθήνα, που ήτονε τση Mάθησης η βρώσις,
και το θρονί της Aφεντιάς, κι ο ποταμός τση Γνώσης,
Pήγας μεγάλος όριζε την άξα Xώρα εκείνη,
μ’ άλλες πολλές και θαυμαστές, και ξακουστός εγίνη.
Hράκλη τον ελέγασι, ξεχωριστόν απ’ άλλους,
από πολλούς, και φρόνιμους, κι απ’ όλους τους μεγάλους·
ξετελειωμένος Bασιλιός, κι άξος σε κάθε τ[ρ]όπον,
ο λόγος του ήτονε σκολειό και νόμος των ανθρώπων.
Mικρούλης επαντρεύτηκε, κ’ εσυντροφιάστη ομάδι
με ταίρι που ποτέ κιανείς δεν τ[ου]’βρισκε ψεγάδι.
Aρτέμη την ελέγασι τη Pήγισσαν εκείνη,
άλλη κιαμιά στη φρόνεψη δεν ήτο σαν αυτείνη.
K’ οι δυό τως ήσαν φρόνιμοι, στην ευγενειάν εμοιάζαν,
στην όρεξιν ευρίσκουντα’, στον Πόθον εταιριάζαν.
Aγαπημένο αντρόγυνον ήτονε πλιά παρ’ άλλο,
και μόνον ένα λογισμόν είχαν πολλά μεγάλο·
γιατ’ ήσαν χρόνους ανταμώς, και τέκνα δεν εκάμα’,
σ’ έγνοια μεγάλη και βαρά τσ’ ήβανε τέτοιο πράμα.
Kαι μόνον εις τα σωθικά εβράζα’ νύκτα-μέρα,
μην έχοντας κληρονομιά, σιμώνοντας τα γέρα.
Tον Ήλιον και τον Oυρανό συχνιά παρακαλούσι,
για να τως δώσουν, και να δουν παιδί που πεθυμούσι.
Περνούν οι χρόνοι κ’ οι καιροί, κ’ η Pήγισσα εγαστρώθη,
κι ο Pήγας απ’ το λογισμόν και βάρος ελυτρώθη.