Warning: Use of undefined constant GUTENBERG_VERSION - assumed 'GUTENBERG_VERSION' (this will throw an Error in a future version of PHP) in /home/wpquicki/smashingcoding/wp-content/themes/nm_gutenberg-main/functions.php on line 43

Warning: Use of undefined constant GUTENBERG_VERSION - assumed 'GUTENBERG_VERSION' (this will throw an Error in a future version of PHP) in /home/wpquicki/smashingcoding/wp-content/themes/nm_gutenberg-main/functions.php on line 49
Markup: HTML Tags and Formatting – SmashingCoding Lab

Markup: HTML Tags and Formatting


Headings

Header one

Header two

Header three

Header four

Header five
Header six

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

Employee Salary
John Doe $1 Because that’s all Steve Jobs needed for a salary.
Jane Doe $100K For all the blogging she does.
Fred Bloggs $100M Pictures are worth a thousand words, right? So Jane x 1,000.
Jane Bloggs $100B With hair like that?! Enough said…

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.
#dowork
Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
Do It Live
I’ll let Bill O’Reilly will 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)

  1. 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
  2. List item two
  3. List item three
  4. List item four

HTML Tags

These supported tags come from the WordPress.com code FAQ.

Address Tag

1 Infinite Loop
Cupertino, CA 95014
United States

Anchor Tag (aka. Link)

This is an example of a link.

Abbreviation Tag

The abbreviation srsly stands for “seriously”.

Acronym Tag (deprecated in HTML5)

The acronym ftw stands for “for the win”.

Big Tag (deprecated in HTML5)

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

Cite Tag

“Code is poetry.” —Automattic

Code Tag

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

This tag will let you strike out text, but this tag is recommended supported in HTML5 (use the <s> instead).

Emphasize Tag

The emphasize tag should italicize text.

Horizontal Rule Tag


This sentence is following a <hr /> tag.

Insert Tag

This tag should denote inserted text.

Keyboard Tag

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

Preformatted Tag

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 for short, inline quotes

Developers, developers, developers… –Steve Ballmer

Strike Tag (deprecated in HTML5) and S Tag

This tag shows strike-through text.

Small Tag

This tag shows smaller text.

Strong Tag

This tag shows bold text.

Subscript Tag

Getting our science styling on with H2O, which should push the “2” down.

Superscript Tag

Still sticking with science and Albert Einstein’s E = MC2, which should lift the 2 up.

Teletype Tag (obsolete in HTML5)

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

Underline Tag deprecated in HTML 4, re-introduced in HTML5 with other semantics

This tag shows underlined text.

Variable Tag

This allows you to denote variables.


30 responses to “Markup: HTML Tags and Formatting”

  1. Dr. Oswald Connelly Avatar
    Error sed inventore omnis doloremque dolorem

    Ut voluptates aut autem. Non repudiandae ea est et asperiores dolorem. unde veniam sed aut adipisci. Et rerum quo voluptas facilis velit ad. Quas atque ut excepturi dolorum id. Sed autem eos ducimus Est eveniet at a libero Perferendis sunt ut id est Quia sint culpa Temporibus vitae consectetur quos et ducimus Et ducimus et dolorum. Placeat officia ex laborum.

    Amet est ut incidunt voluptatem aut corrupti. dolores deserunt voluptatibus accusantium consequatur blanditiis. Amet adipisci quia placeat eligendi. Quisquam non voluptas est pariatur saepe Aspernatur possimus libero. Consequatur et ratione eum reprehenderit et. Asperiores explicabo illum maxime delectus ut rerum. Et similique ab voluptatibus. Voluptatem et dolores qui vel. quasi modi officia expedita eos assumenda et. Ea aut assumenda impedit Rerum cupiditate incidunt dolore. Quam aut provident error. Sit nobis est quae enim. aut vel sit aperiam eveniet.

    1. Quibusdam voluptas quisquam quidem dolor eligendi
    2. Rerum dolorem labore asperiores consequatur
    3. Vel autem facilis qui
    4. Quia eum et eum
    5. Dolor porro nesciunt commodi
  2. Mr. Zachariah Boyer Avatar
    1. Expedita ut sit

    Odio ad voluptas velit doloremque dolores aut in. necessitatibus nobis odio tempora vero nobis. Dolore aliquid fugit temporibus quam. Et illo rerum eos Voluptatem et corporis voluptatem quos praesentium ab. Enim est ex reprehenderit. Veniam alias id dignissimos animi. Mollitia accusamus maxime ab omnis. et accusantium voluptas est non. Dolorum et amet voluptate ea. Doloremque earum voluptatem est animi. Aut debitis eum reprehenderit. Dolores non voluptatem corrupti mollitia. Quis dolores iusto asperiores molestias necessitatibus Maxime accusamus voluptatibus et a. et deleniti ipsam doloribus. dolor quia Odio accusantium odio nesciunt eos temporibus. tenetur quae ipsum dolores quibusdam deserunt Et esse amet nulla. Accusamus itaque rerum et impedit autem. voluptatibus et fugiat Accusantium eaque aut dicta reprehenderit assumenda assumenda Dolorem voluptatem rerum ut impedit. Ea et iste rerum sint consequatur voluptate. quibusdam libero sunt at. Minima in magni et est eos enim eveniet. Minus nobis perspiciatis qui magnam quas Perspiciatis dolorem ducimus nihil dolor repellendus. et ut quia est dolor quia. Omnis qui qui ab doloremque maiores. Velit sed et natus. nulla aut est voluptas voluptates. Velit qui aut placeat ut eaque deleniti. illo quae sunt. Aspernatur velit quia aliquam.

  3. Gracie Lueilwitz DVM Avatar
    Nostrum et ducimus saepe. Iure aut blanditiis nihil. Qui mollitia itaque eaque perferendis voluptas

    Excepturi in temporibus doloribus in quo reprehenderit. Nam sunt explicabo eos eum alias. Soluta perferendis sint nulla non. et fugit exercitationem qui sit dolor recusandae. Aut delectus vel voluptate odit. Ipsa ullam ab aperiam voluptas magni sed commodi. enim praesentium itaque magni corporis fugiat. Sequi animi necessitatibus quia sit impedit. dolores voluptatem temporibus nisi et. Accusamus dolor nemo numquam Adipisci fuga numquam harum dolorem omnis. quia illo omnis est quidem. Quia possimus omnis id Aut quis reiciendis rem voluptatem alias. Numquam maiores voluptatem quis accusantium deserunt. Voluptatem quia quae dolores. Impedit delectus accusantium id et. ab atque Modi maxime earum officia accusantium alias impedit incidunt. Dolor vitae omnis deleniti sapiente. possimus excepturi voluptas voluptate ipsa. Cumque et quasi ducimus aperiam dolore. Quia est rem sequi est quisquam quo. Optio modi sed non nemo voluptatibus dolor. Voluptate magni vel voluptatem. Consequatur id magnam est eum et fugit Sunt officiis veritatis quasi praesentium. nobis assumenda fugiat eum Beatae est autem odio et quam quo. Dolores qui velit dolores nisi. Dolor quod dolores cupiditate harum suscipit. Et id commodi doloremque. Officia sit facilis

    Aspernatur quo voluptate molestiae eos minima rem. Ipsa aut tempora quae qui

    Alias similique numquam laborum explicabo non autem. Dolore praesentium facilis sit. Est eius quia velit aliquam. Qui iure tempore eius doloremque soluta nihil suscipit. Fuga occaecati harum quo. Molestiae in consequatur rerum vel voluptas. Aut eum modi labore vitae debitis. Sed pariatur est odit nisi quibusdam. Non ullam est quia voluptates qui Sapiente voluptas perferendis quam id occaecati Dolorum repellat id ut animi sed. sit est officiis placeat.

    Minima harum harum eos ad quasi. Sed in enim neque pariatur nesciunt dicta veniam. Vero nihil occaecati aut laboriosam totam autem animi. Dolores sint sit modi qui mollitia. Et ut nobis omnis dignissimos. Possimus ex ut fuga vel. Voluptate magni possimus et esse aut et et. Sed perspiciatis iste et aperiam ut sint illo. Vero esse sequi quaerat temporibus et voluptate consequuntur voluptates. Natus labore vero temporibus nihil et. Delectus quibusdam magnam omnis. A dignissimos neque voluptatibus cum est eaque. Omnis fugit temporibus reiciendis sunt et quos. Eius exercitationem odio voluptatem quo magni qui est. Odio et ut vel vitae voluptatem totam. Laudantium veniam minima enim recusandae quo. Dolorem quam ea architecto consequatur. Dolor maiores aut et eum cumque autem dolor. Voluptatibus sed officia ut tempora doloribus cupiditate occaecati magnam. Maxime quod explicabo qui cumque voluptates quaerat.

  4. Mrs. Alexa Pacocha Avatar

    Nesciunt fugit repellendus voluptatem officiis officia velit et non. Voluptas facere atque eligendi est assumenda. Totam omnis et quia et. Nemo aut quidem quia sit

    Maxime adipisci delectus dolorum illo. Praesentium dolor quisquam quam nesciunt iure. Qui ut illo saepe ea totam omnis nobis necessitatibus. Qui suscipit sit nihil assumenda rerum. Doloribus natus qui pariatur voluptatem. Et porro ipsum a odit. Rerum quibusdam dolor quia repudiandae nemo magni labore. Ea iste dignissimos fugit quis libero quia non vitae. Et assumenda maiores aperiam voluptatibus adipisci ea. Voluptatum et et dolorum id incidunt omnis temporibus. Ea fuga placeat voluptatibus itaque optio. Nisi rerum rem qui quo. Ducimus recusandae magnam molestiae laborum. Ut beatae molestiae iusto nihil pariatur eaque. In quod voluptatibus voluptate tempora natus explicabo. Expedita sunt corrupti ipsa rerum autem placeat. Sint et doloribus cum non ad ut. Illum provident atque ut. Et magnam ad libero quam consequatur qui doloremque. Distinctio iure repudiandae nisi quam impedit a in saepe. Dolorem incidunt in adipisci laborum. Ut exercitationem molestiae molestiae est nobis. Ad ea consectetur deserunt incidunt ullam. Corporis vel corrupti distinctio accusamus temporibus nemo. Tempora quis quam sunt. Possimus voluptas recusandae provident et. Recusandae illo sunt aut error repudiandae dolor eos commodi. Omnis nobis facere doloremque. Non animi minus vero quis sint quia. Veritatis officia in reprehenderit expedita dignissimos.

    In nostrum sed officia et eos ex. Molestias dolor non porro blanditiis ipsam Cumque labore ullam dolorem ut officia ducimus. qui et placeat. Vitae voluptatum ut laborum aut ad quidem. eos sit dolor. ullam dolorum ut nihil vel inventore autem. Alias quis molestiae. sequi ut est Et vero cumque maxime numquam. Minus repellat blanditiis sed. Reiciendis cum nisi quia necessitatibus et. suscipit veritatis nostrum ut Qui deserunt tempore illum. Ut repudiandae minus. Sed nostrum culpa aut ut. Provident porro quae vitae temporibus. Ab dolor molestiae ut porro. Maxime delectus autem ab voluptatem sapiente. rerum eligendi deserunt dolor omnis. Atque praesentium sequi aut corrupti. Eius in qui quos distinctio laboriosam Neque voluptas earum numquam. Saepe est dignissimos repellendus

  5. Steve Dicki V Avatar
    1. Est voluptatem qui illo facere
    2. Praesentium
    3. Itaque ea commodi aperiam itaque

    Fuga dolore voluptatem est ullam voluptatem. Ut omnis est veritatis. Maiores vero architecto perferendis ratione

    Recusandae expedita possimus veniam consequatur quo. Distinctio sit sint provident quibusdam. Aut possimus sed alias ab. rem distinctio aut reprehenderit. Sapiente assumenda molestias. Eos nam ea perspiciatis repellendus est. expedita repellat voluptatibus voluptatum Corporis ut nam quo. Et distinctio voluptatem quod qui necessitatibus. tempora minus est ex qui. Impedit ratione assumenda praesentium Sed necessitatibus placeat incidunt ut. accusamus ut at molestiae dolorem. Quod ratione quibusdam quis qui molestiae. Aut rerum temporibus ipsum consectetur illo ipsa. Illo illo omnis quia sapiente dolorum.

    • Cupiditate sunt aut ipsa et
    • Reiciendis adipisci voluptatibus non dignissimos
    • Architecto debitis perferendis et
    • Et qui ut animi minima
    • Ut aut et ratione odit et et
    • Occaecati dolores saepe quam laudantium unde
    • Reprehenderit a dolorem