Emphasis tags (<strong> and <em>) should be used to add visual distinction between a word or phrase and its surrounding copy. Use <strong> for plain old attention and <em> for slick attention and titles.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
+Note: It's still okay to use <b> and <i> tags in HTML5, but they don't come with inherent styles anymore. <b> is meant to convey importance while <i> is mostly for voice, technical terms, etc.
The address element is used for—you guessed it!—addresses. Here's how it looks:
The address element is used for contact information for its nearest ancestor, or the entire body of work. Here's how it looks:
Note: Each line in an address must end with a line-break (<br />) to properly structure the content as it is read in real life without any styles applied.
Note: Each line in an address must end with a line-break (<br />) or be wrapped in a block-level tag (e.g., p) to properly structure the content.
For abbreviations and acronyms, use the abbr tag (acronym is deprecated in HTML5). Put the shorthand form within the tag and set a title for the complete name.
<blockquote>
<p>
- <cite>
+ <small>
Be sure to wrap your blockquote around paragraph and cite tags. When citing a source, use the cite element. The CSS will automatically preface a name with an em dash (—).
Be sure to wrap your blockquote around paragraph and small tags. When citing a source, use the small element. The CSS will automatically preface a name with an em dash (—).
-Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
- Dr. Julius Hibbert +Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
+ Dr. Julius Hibbert
<ul><ul><ul.unstyled><ul.unstyled><ol>dlAll tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.
| # | -First Name | -Last Name | -Language | -
|---|---|---|---|
| 1 | -Some | -One | -English | -
| 2 | -Joe | -Sixpack | -English | -
| 3 | -Stu | -Dent | -Code | -
| # | +First Name | +Last Name | +Language | +
| 1 | +Some | +One | +English | +
| 2 | +Joe | +Sixpack | +English | +
| 3 | +Stu | +Dent | +Code | +
<table class="common-table"> @@ -466,34 +467,34 @@Example: Zebra-striped
Get a little fancy with your tables by adding zebra-striping—just add the
.zebra-stripedclass.
| # | -First Name | -Last Name | -Language | -
|---|---|---|---|
| 1 | -Some | -One | -English | -
| 2 | -Joe | -Sixpack | -English | -
| 3 | -Stu | -Dent | -Code | -
| # | +First Name | +Last Name | +Language | +
| 1 | +Some | +One | +English | +
| 2 | +Joe | +Sixpack | +English | +
| 3 | +Stu | +Dent | +Code | +
<table class="common-table zebra-striped"> @@ -503,34 +504,34 @@Example: Zebra-striped w/ TableSorter.js
Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column's header to change the sort.
| # | -First Name | -Last Name | -Language | -
|---|---|---|---|
| 1 | -Your | -One | -English | -
| 2 | -Joe | -Sixpack | -English | -
| 3 | -Stu | -Dent | -Code | -
| # | +First Name | +Last Name | +Language | +
| 1 | +Your | +One | +English | +
| 2 | +Joe | +Sixpack | +English | +
| 3 | +Stu | +Dent | +Code | +
<script src="js/jquery/jquery.tablesorter.min.js"></script>
@@ -808,8 +809,8 @@
Example buttons
Button styles can be applied to anything with the .btn applied. Typically you'll want to apply these to only a, button, and select input elements. Here's how it looks:
-
-
+
+
Alternate sizes
Fancy larger or smaller buttons? Have at it!