Markup: HTML Tags and Formatting (BLOCKS)

Home 🏌️‍♂️ News 🏌️‍♂️ Classic

Headings

Header one

Header two

Header three

Header four

Header five
Header six

Blockquotes

Single line block­quote:

Stay hun­gry. Stay fool­ish.

Multi line block­quote with a cite ref­er­ence:

The HTML <blockquote> Element (or HTML Block Quotation Element) indi­cates that the enclosed text is an extend­ed quo­ta­tion. Usually, this is ren­dered visu­al­ly by inden­ta­tion (see Notes for how to change it). A URL for the source of the quo­ta­tion may be giv­en using the cite attribute, while a text rep­re­sen­ta­tion of the source can be giv­en using the <cite> ele­ment.

mul­ti­ple con­trib­u­tors — MDN HTML ele­ment ref­er­ence — block­quote

Tables

EmployeeSalary 
John Doe$1Because that’s all Steve Jobs need­ed for a salary.
Jane Doe$100KFor all the blog­ging she does.
Fred Bloggs$100MPictures are worth a thou­sand words, right? So Jane x 1,000.
Jane Bloggs$100BWith hair like that?! Enough said…

Definition Lists

Definition List Title
Definition list divi­sion.
Startup
A start­up com­pa­ny or start­up is a com­pa­ny or tem­po­rary orga­ni­za­tion designed to search for a repeat­able and scal­able busi­ness mod­el.
#dowork
Coined by Rob Dyrdek and his per­son­al body guard Christopher “Big Black” Boykins, “Do Work” works as a self moti­va­tor, to moti­vat­ing 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 sup­port­ed 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 exam­ple of a link.

Abbreviation Tag

The abbre­vi­a­tion srsly stands for “seri­ous­ly”.

Acronym Tag (dep­re­cat­ed in HTML5)

The acronym ftw stands for “for the win”.

Big Tag (dep­re­cat­ed in HTML5)

These tests are a big deal, but this tag is no longer sup­port­ed in HTML5.

Cite Tag

“Code is poet­ry.” –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 lat­er 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 rec­om­mend­ed sup­port­ed in HTML5 (use the <s> instead).

Emphasize Tag

The empha­size tag should ital­i­cize text.

Horizontal Rule Tag


This sen­tence is fol­low­ing a <hr /> tag.

Insert Tag

This tag should denote insert­ed text.

Keyboard Tag

This scarce­ly known tag emu­lates keyboard text, which is usu­al­ly styled like the <code> tag.

Preformatted Tag

This tag is for pre­serv­ing white­space as typed, such as in poet­ry 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, devel­op­ers, devel­op­ers… –Steve Ballmer

Strike Tag (dep­re­cat­ed in HTML5) and S Tag

This tag shows strike-through text.

Small Tag

This tag shows small­er text.

Strong Tag

This tag shows bold text.

Subscript Tag

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

Superscript Tag

Still stick­ing with sci­ence and Albert Einstein’s E = MC2, which should lift the 2 up.

Teletype Tag (obso­lete in HTML5)

This rarely used tag emu­lates tele­type text, which is usu­al­ly styled like the <code> tag.

Underline Tag dep­re­cat­ed in HTML 4, re-intro­duced in HTML5 with oth­er seman­tics

This tag shows under­lined text.

Variable Tag

This allows you to denote variables.