Snippet paragraph. Alias perferendis praesentium beatae vel distinctio dolores ab suscipit eos atque asperiores mollitia ducimus natus quia quasi sequi sed laudantium autem qui consectetur non consequuntur. link text here

nemo perspiciatis itaque et quo consectetur est animi rerum quia est architecto voluptatem consequatur sunt aut similique dolores et dolorem et nulla recusandae pariatur ex modi laboriosam ea doloribus sequi Link text here.

optio non possimus eum est natus ipsum et voluptatem ab molestias expedita quaerat non quam dolores porro tempora quas rerum

Intro paragraph illo temporibus tenetur ut eveniet veniam praesentium doloribus rerum voluptatem sed voluptates quae optio asperiores labore animi ex dolor enim excepturi consequuntur architecto reprehenderit omnis link text here

eos nostrum quis et omnis fugit et voluptas iure sunt sit et neque magnam aliquam at mollitia ducimus debitis ad minima natus similique id cupiditate consequuntur ipsam ab impedit nisi rerum possimus hic excepturi consequatur in aut odit necessitatibus molestiae quasi tempora reprehenderit repellendus voluptas eum vel alias perferendis dolore

Blockquote temporibus quisquam consequatur ut sed quo maxime ut voluptas in nihil praesentium laboriosam ullam corrupti deserunt qui voluptatibus est repellat ratione iure numquam sequi consectetur velit nulla consequatur eum perspiciatis

Author name, Example Company name

H2 This is a Heading 2 with link text here

H3 This is a Heading 3 with link text here

H4 This is a Heading 4 with link text here

H5 This is a Heading 5 with link text here

H6 This is a Heading 6 with link text here

Paragraph: repellendus eum et quia explicabo est quia modi eligendi sint deserunt totam qui numquam voluptas officia aut fuga eos est facere sed culpa quia est inventore et vel corporis aperiam

An extra long H2 title with more text in so we can see line height and also what happens when the copy wraps onto a new line. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias, reprehenderit. With link text here.

An extra long H3 title with more text in so we can see line height and also what happens when the copy wraps onto a new line. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias, reprehenderit. With link text here.

An extra long H4 title with more text in so we can see line height and also what happens when the copy wraps onto a new line. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias, reprehenderit. With link text here.

sunt non incidunt quia illo dolores architecto dolore minus eaque quod ut consequatur tempore cumque officiis fuga possimus quos perferendis et nemo enim aperiam deserunt ut et aut a asperiores link text here

H2 with basic text before and after so can see margin

laudantium assumenda occaecati quae sunt fuga explicabo in quaerat eveniet temporibus quia dolores aliquam quia nostrum sit sed ipsa praesentium maxime est ut et optio quidem voluptatibus perferendis dolorum voluptates

H3 with basic text before and after so can see margin

nulla aut qui non veniam commodi minima minus vero cumque quod suscipit ut debitis eligendi at aut vitae ut pariatur sed consequatur et excepturi nihil fugit aspernatur dolorem repellat perspiciatis

H4 with basic text before and after so can see margin

suscipit maxime minima et pariatur neque tenetur facilis aperiam quas eligendi veritatis nulla eos itaque voluptatem earum omnis omnis officiis porro voluptatem aut necessitatibus alias nemo et et aut laudantium

H5 with basic text before and after so can see margin

labore et illum eius consequatur nobis et blanditiis non ad dolor iure aperiam itaque et quidem veniam nisi ut et vitae sequi atque inventore quia pariatur voluptatem qui quae adipisci

H6 with basic text before and after so can see margin

delectus tenetur reiciendis unde sunt qui voluptates velit ipsa voluptatem dolorem doloremque qui placeat corporis occaecati soluta qui maiores voluptas repudiandae quasi alias autem sapiente praesentium totam ea sunt impedit

• First list item is short but not really short
• Second list item wraps aut recusandae quam link text here est et quo quaerat facilis adipisci in nesciunt et laborum magnam debitis
• Third list item is short
• Fourth list item
  • Nested - First list item is short but not really short
  • Nested - Second list item wraps aut recusandae quam link text here est et quo quaerat facilis adipisci in nesciunt et laborum magnam debitis
  • Nested - Third list item is short
• Fifth list item
• Sixth list item

1. First list item is short but not really short
2. Second item wraps aut recusandae quam link text here est et quo quaerat facilis adipisci in nesciunt et laborum magnam debitis
3. Third list item is short
4. Fourth item
5. Fifth item
6. Sixth item
   1. Nested - First list item is short but not really short
   2. Nested - Second item wraps aut recusandae quam link text here est et quo quaerat facilis adipisci in nesciunt et laborum magnam debitis
   3. Nested - Third list item is short
7. Seventh item
8. Eighth item
9. Nineth item
10. Tenth item
11. Eleventh item
12. Twelth item
13. Thirteenth item
14. Fourteenth item
15. Fifteenth item
16. Sixteenth item
17. Seventeenth item
18. Eighteenth item
19. Nineteenth item
20. Twentyth item

Header one

Header two

Header three

Header four

Header five

Header six

In-page navigation

Section 1

Button text Disabled Button

Blockquotes

Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote with a cite reference:

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.

multiple contributors - MDN HTML element reference - blockquote

Tables

Section 2

Definition Lists

Definition List Title

Definition list division.

Startup

A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.

Do It Live

I'll let Bill O'Reilly explain this one.

Unordered Lists (Nested)

• 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

Ordered List (Nested)

8. List item one - start at 8
   1. List item one
      1. List item one -reversed attribute
      2. List item two
      3. List item three
      4. List item four
   2. List item two
   3. List item three
   4. List item four
9. List item two
10. List item three
11. List item four

HTML Tags

Address Tag (<address>)

1 Infinite Loop
Cupertino, CA 95014
United States

Anchor Tag aka. Link (<a href="">)

This is an example of a link.

Abbreviation Tag (<abbr>)

The abbreviation srsly stands for "seriously".

Acronym Tag (< acronym title="">) (deprecated in HTML5)

The acronym ftw stands for "for the win".

Big Tag (<big>) (deprecated in HTML5)

These tests are a big deal, but this tag is no longer supported in HTML5.

Cite Tag (<cite>)

The <cite> HTML element is used to mark up the title of a cited creative work. The reference may be in an abbreviated form according to context-appropriate conventions related to citation metadata

"Code is poetry." —Automattic

Code Tag (<code>)

This tag styles blocks of code.
.post-title {
margin: 0 0 5px;
font-weight: bold;
font-size: 38px;
line-height: 1.2;
and here's a line of some really, really, really, really long text, just to see how it is handled and to find out how it overflows;
}
You will learn later on in these tests that word-wrap: break-word; will be your best friend.

Delete Tag (<del cite="">)

This tag will let you strike out text. Use along with <ins> to show deleted text followed by inserted text

Insert Tag (<ins cite="">)

This tag should denote inserted text.

Emphasize Tag (<em>)

The emphasize tag should emphasize text. It will likely look the same as Italicized text

Italicize Tag (<i>)

The italicize tag should italicize text.

Horizontal Rule Tag (< hr >)

---

This sentence is following a <hr> tag.

Keyboard Tag (<kbd>)

This scarcely known tag emulates keyboard text, which is usually styled like the <code> tag.

Preformatted Tag (<pre>)

This tag is for preserving whitespace as typed, such as in poetry or ASCII art.

The Road Not Taken

 Robert Frost


  Two roads diverged in a yellow wood,
  And sorry I could not travel both          (\_/)
  And be one traveler, long I stood         (='.'=)
  And looked down one as far as I could     (")_(")
  To where it bent in the undergrowth;

  Then took the other, as just as fair,
  And having perhaps the better claim,          |\_/|
  Because it was grassy and wanted wear;       / @ @ \
  Though as for that the passing there        ( > º < )
  Had worn them really about the same,         `>>x<<´
                                               /  O  \
  And both that morning equally lay
  In leaves no step had trodden black.
  Oh, I kept the first for another day!
  Yet knowing how way leads on to way,
  I doubted if I should ever come back.

  I shall be telling this with a sigh
  Somewhere ages and ages hence:
  Two roads diverged in a wood, and I—
  I took the one less traveled by,
  And that has made all the difference.


  and here's a line of some really, really, really, really long text, just to see how it is handled and to find out how it overflows;

Quote Tag (<q>) for short, inline quotes

Developers, developers, developers… -Steve Ballmer

Strike Tag (<strike>) (deprecated in HTML5) and S Tag (< s >)

This tag shows strike-through text.

Small Tag (<small>)

This tag shows smaller text.

Strong Tag (<strong>)

This tag shows bold text.

Bring Attention To element (<b>)

This tag shows bold text. The <b> HTML element is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This was formerly known as the Boldface element. Historically, the <b> element was meant to make text boldface, and most browsers still draw the text in boldface. However, styling information has been deprecated since HTML4, so the meaning of the <b> element has been changed. You should not use <b> for styling text or granting importance. If you wish to create boldface text, you should use the CSS font-weight property. If you wish to indicate an element is of special importance, you should use the <strong> element.

Subscript Tag (<sub>)

Getting our science styling on with H₂O, which should push the "2" down.

Further use of sub_script which should push the "script" text down. This is just more text to see if the <sub> tag added extra line height to the line of text it's on. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec sed odio dui.

Superscript Tag (<sup>)

Still sticking with science and Albert Einstein's E = MC², which should lift the "2" up.

This is just more text to see if the <sup> tag added extra line height to the line of text it's on. Further use of super^script which should lift the "script" text up. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec sed odio dui.

Teletype Tag (<tt>) (deprecated in HTML5)

This rarely used tag emulates teletype text, which is usually styled like the <code> tag.

Underline Tag (<u>) (Re-introduced in HTML5 with other semantics)

This tag shows underlined text.

Variable Tag (<var>)

This allows you to denote variables.

Details and Summary elements

The <details> and <summary> elements when used together create a native accordian / revealed text pattern.

I have keys but no doors. I have space but no room. You can enter but can't leave. What am I?

A keyboard.

non asperiores dicta facilis eum voluptatem culpa tempora officiis sint ab accusamus saepe ut excepturi ut explicabo sapiente sit rem similique voluptatibus sit esse aliquid ipsam modi et minus porro possimus occaecati et architecto necessitatibus voluptatem corporis cum natus numquam

et et similique veritatis exercitationem eum velit hic quis illum non id ut sunt eaque dolores et laboriosam deserunt quibusdam aut eos pariatur quo sequi est voluptatem accusantium qui ex blanditiis unde facere ut perspiciatis nemo aperiam voluptates debitis inventore labore itaque sit quia est vel velit aut iure sed

autem repellat in excepturi cum sit odit nihil incidunt aut vero eveniet soluta qui quia consectetur at cumque iure qui maxime animi ea est accusantium non eum aut quos ut

nesciunt animi nostrum nihil ducimus enim voluptas aliquid officia voluptatem est voluptates totam iure quia doloribus ut nemo quidem maiores sed asperiores exercitationem harum odio aut inventore minima id laboriosam

The follwing details elements all have the same name attribute value, so only one can be open at a time.

I have keys but no doors. I have space but no room. You can enter but can't leave. What am I?

A keyboard.

ratione iste architecto sed in hic aliquam laboriosam minima non alias distinctio laborum totam voluptates delectus exercitationem cumque sit non porro explicabo vel veniam et eum asperiores quia ea amet recusandae similique eum aut repellat ducimus mollitia omnis maxime corporis

sint similique odio cum earum autem sunt eveniet omnis rerum dolor cumque voluptatem quidem sed iusto itaque placeat facere laboriosam consectetur modi eaque ut iste quis labore beatae suscipit fugiat est tempore delectus aut et vel numquam ea optio nostrum neque doloremque quos atque ut molestiae fuga perspiciatis voluptas nemo

eum quam aut possimus et consequatur numquam omnis ex sequi sed nihil aut quas aut ut dolorem necessitatibus id quis praesentium blanditiis quibusdam vel rerum veritatis et doloribus modi ipsum

cum ducimus officiis ab rerum similique nemo sit laboriosam velit omnis et doloribus sed ex reiciendis et deserunt adipisci aut aut inventore voluptate a fugit excepturi doloremque molestiae corrupti dolores

Section 3

Revealer text - hover me

This text is revealed when the Revealer text heading is hovered, we could do it on focused too. Be aware that if this element has top/bottom margin that it will still apply to the flow even when it's height is 0. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quidem molestiae distinctio provident in culpa sit debitis porro est magnam?