The purpose of this markup guide is to display the default settings for all possible HTML elements. This document ensures that no elements are missed and acts as a typographic style guide.
Check out our
HTML Best Practices for more.
(The "Latin" text used on this page is called Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text for over five centuries.)
The first-level header above is an
h1 element. Conventionally, no more than
oneh1 should be used per page. The Heading field at the bottom of every layout defaults to be the page's H1, so
you do not need to add any additional H1s to your page.
The secondary header above is an
h2 element, which may be used for your primary second-level header (since the Heading field defaults to your page's H1). More than one H2 may be used per page. Consider using an
h2 as a sub-header to your h1 or as subsequent equal-importance headers.
This is an
h3 element, which may be used for any form of header below the
h2 header in your content's hierarchy.
For all headers below third-level, follow the guidelines listed above.
Only use this lower header level when necessary.
Paragraphs
Naturally paragraphs are wrapped in
p tags. These should always be used as the default tag to wrap all of your regular content in.
Blockquotes
Additionally,
p elements can be wrapped with a
blockquote element
if the
p element is indeed a quote.
blockquote is intended for use with quotes. Here's an example of correct
blockquote class="blockquote1" usage:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras euismod fringilla arcu. Integer posuere. Aliquam ipsum. Donec eget massa ac orci tempus euismod. Donec quis neque nec neque consequat sollicitudin. Donec commodo tempor nulla. Suspendisse venenatis. Ut ut leo. Nunc placerat urna at libero. Nunc suscipit lacus.
Inline Text
em
Used for denoting emphasized text. In most instances where you'd want to italicize text (using the
HTML element
i or otherwise) you should use the
em element instead. Notable exceptions are stylistic italicizing of proper titles, foreign languages, etc. where italicizing is used for differentiation instead of emphasis. In those cases, no proper
HTML elements exist, so an
i element or a
span element with a custom class may be preferable. Example emphasized text and usage: You simply
must try the negitoro maki!
strong
Used for denoting stronger emphasis than the
em element. In most instances where you'd want to bold text (using the
HTML element
b or otherwise) you should use the
strong element instead. Notable exceptions are stylistic bolding of examples, first occurrences of names in an article, etc. where bolding is used for differentiation instead of emphasis. In those cases, no proper
HTML elements exist, so
b element or a
span element with a custom class may be preferable. Example strong text and usage:
Don't stick nails in the electrical outlet.
Lists
Lists are a great way to break up content and make it scannable.
ul denotes an unordered list (ie. a list of loose items that don't require numbering, or a bulleted list).
ol denotes an ordered list, and various numbering schemes are available through the CSS (including 1,2,3... a,b,c... i,ii,iii... and so on) - each item within the
ul or
ol tags.
Unordered List uses
ul which wraps around individual items
li
- This is an unordered list.
- It has several items.
- Here's an LI with a UL inside...
- Here's an LI with a OL inside...
- Kid 1
- Kid 2
- Kid 3
- and scene.
Ordered list uses
ol which wraps around individual items
li
- This is an ordered list.
- It has several items.
- Here's an LI with a UL inside...
- Here's an LI with a OL inside...
- Kid 1
- Kid 2
- Kid 3
- and scene