This page contains examples of many basic HTML elements and their styles.
Typography Headings, paragraphs, lists, and other inline type elements
Cody Flowers is an expert developer.
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Page Header <small>
Subtitle</small>
<h1 class="page-header"></h1> // or <div class="page-header"> <h1></h1> </div> // or <section> <h1></h1> </section>
HTML elements
Element | Usage | Note |
---|---|---|
<strong> |
For emphasizing a snippet of text with important | |
<em> |
For emphasizing a snippet of text with stress | |
<abbr> |
Wraps abbreviations and acronyms to show the expanded version on hover | Include optional title attribute for expanded text |
<address> |
For contact information for its nearest ancestor or the entire body of work | Preserve formatting by ending all lines with <br> |
<hr /> |
Represents a paragraph-level thematic break | Can be written as <hr> |
<ins> |
Represents an addition to the document | Include optional cite attribute to specify the address of a document that explains the change The datetime attribute may be used to specify the time and date of the change. |
<del> |
Represents a removal from the document | Same as for <ins> |
<mark> |
Represents a run of text in one document marked or highlighted because of its relevance in another context | |
<small> |
Represents side comments such as small print | |
<sub> |
Subscripts | Water is H2O: Water is H<sub>2</sub>O |
<sup> |
Superscripts | E = MC2: E = MC<sub>2</sub> |
Examples
Note: Feel free to use <b>
and <i>
in HTML5, but their usage has changed a bit. <b>
is meant to highlight words or phrases without conveying additional importance while <i>
is mostly for voice, technical terms, etc.
Abbreviations with a title
attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.
HTML is the best thing since sliced bread. An abbreviation of the word attribute is attr.
Elderflower cordial, with one part cordial to ten parts water, stands apart from the rest. This is marked using the <mark>
tag.
Oh no! I wrote something incorrectly. I’d better delete it, using the <del>
tag. I could alternately strike something out using the <strike>
tag, or strike something out using the <s>
tag. So many choices, which I emphasize using the <em>
tag.
Just to clarify, this is some inserted text, that I’ll highlight using the <ins>
tag.
Information obtained from Twitter Bootstrap and the HTML5 spec. I use the <small>
tag here.
Blockquotes
Element | Usage | Optional |
---|---|---|
<blockquote> |
For quoting content from another source | Add cite attribute for source URL Use .alignleft and .alignright classes for floated options
|
<small> |
Optional element for adding a user-facing citation, typically an author with title of work | Place the <cite> around the title or name of source |
To include a blockquote, wrap <blockquote>
around any HTML as the quote.
Include an optional <small>
element to cite your source and you'll get an em dash —
before it for styling purposes.
Example blockquotes
Default blockquotes are styled as such:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Someone famous in Body of work
To float your blockquote to the right, add class="alignright"
:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Someone famous in Body of work
Lists
Unordered
<ul>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
-
Vestibulum laoreet porttitor sem
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Purus sodales ultricies
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Ordered
<ol>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
-
Purus sodales ultricies
- Phasellus
- Purus ultricies
- Vestibulum
- Ac tristique
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Description
<dl>
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
Code Inline and block code snippets
Inline
Wrap inline snippets of code with <code>
.
For example, <code>section</code> should be wrapped as inline.
Basic block
Use <pre>
for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
<p>Sample text here...</p>
<pre> <p>Sample text here...</p> </pre>
Note: Be sure to keep code within <pre>
tags as close to the left as possible; it will render all tabs.
Google Prettify
The theme supports Google Prettify but it is not included in the download. Download google-code-prettify and view the readme for how to use.
Take the same <pre>
element and add two optional classes for enhanced rendering.
<p>Sample text here...</p>
<pre class="prettyprint linenums"> <p>Sample text here...</p> </pre>
Tables
Table markup
Tag | Description |
---|---|
<table> |
Wrapping element for displaying data in a tabular format |
<thead> |
Container element for table header rows (<tr> ) to label table columns |
<tfoot> |
Container element for table footer rows (<tr> ) to label table columns |
<tbody> |
Container element for table rows (<tr> ) in the body of the table |
<tr> |
Container element for a set of table cells (<td> or <th> ) that appears on a single row |
<td> |
Default table cell |
<th> |
Special table cell for column (or row, depending on scope and placement) labels Must be used within a <thead>
|
<caption> |
Description or summary of what the table holds, especially useful for screen readers |
Tag | Description |
<table> <thead> <tr> <th>…</th> <th>…</th> </tr> </thead> <tbody> <tr> <td>…</td> <td>…</td> </tr> </tbody> <tfoot> <tr> <td>…</td> <td>…</td> </tr> </tfoot> </table>
Forms
Images
<figure> <img src="" alt=""> <figcaption>Caption</figcaption> </figure>
Miscellaneous
The grid system
The grid system is a fluid grid, adapted from Twitter Bootstrap. It utilizes 12 columns and uses percents for column widths instead of fixed pixels.
<div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div>
As shown here, a basic layout can be created with two "columns", each spanning a number of the 12 columns.
Alerts Styles for success, warning, and error messages
<div class="alert"> ... </div>
<div class="alert alert-warning"> [...] </div>
Holy guacamole!
Best check yo self, you're not looking too good.
This is line two
<div class="alert alert-error"> [...] </div>
<div class="alert alert-success"> [...] </div>
<div class="alert alert-info"> [...] </div>
Wells
Use the well as a simple effect on an element to give it an inset effect.
<div class="well"> [...] </div>
Helper classes
Class | Usage |
---|---|
.alignleft |
Floats an element to the left |
.alignright |
Floats an element to the right |
.aligncenter |
Makes the element a block element and centers it |
.clearfix |
For clearing floats, see "A new micro clearfix hack" |
.assistive-text |
Hides text visually, but it will be available for screenreaders |
.hidden |
Hides from both screenreaders and browsers |
.invisible |
Hides visually and from screenreaders, but maintains layout |