Skip to main content

Markup: HTML Tags and Formatting

Headings

Header one

Header two

Header three

Header four

Header five
Header six

Blockquotes

Single line blockquote:

Lorem ipsum dolor sit amet.

Multi line blockquote with a cite reference:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

— Jane Doe

Tables

Employee Salary Notes
Mary Doe $10,000 Lorem ipsum dolor sit amet, consectetur adipisicing elit
John Doe $5,000 Lorem ipsum dolor sit amet
Jane Blogs $20,000
Fred Blogs $18,000 Lorem ipsum dolor sit amet
Definition List Title
Definition list division.
UX
User experience design (UX, UXD, UED or XD) is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product.
RWD
Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it.
Pattern library
A pattern library is a collection of recurring user interface design patterns used to create identity, promote brand and solve common design problems.

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

HTML Tags

Address Tag

500 Lincoln Drive
Madison, WI 53706
United States

Anchor Tag (aka. Link)

This is an example of a link.

Abbreviation Tag

The abbreviation srsly stands for “seriously”.

Cite Tag

“Code is poetry.” —Automattic

Code Tag

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

Emphasize Tag

The emphasize tag should italicize text.

Insert Tag

This tag should denote inserted text.

Keyboard Tag

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

Preformatted Tag

This tag styles large 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 the PRE tag handles it and to find out how it overflows;
}

Quote Tag

Developers, developers, developers… —Steve Ballmer

Strike Tag  (deprecated in HTML5)

This tag shows strike-through text

Strong Tag

This tag shows bold text.

Subscript Tag

H2O — should push the “2” down.

Superscript Tag

E = MC— should lift the 2 up.