Style Guide

Semantic Text Formatting

Headings

Each page on a website can be structure based on importance of content, furthermore it’s often the case that each of these emerged sections can be made even more readable by introducing h1 to h6 elements, where the lower number signifies the most important heading while higher numbers mark the lower or the more inner subsections.


Level One Heading

This Heading is used mainly for main page titles. In some rare cases it's also used for defining main sections of the page, though in these cases it may be styled differently as it carries a different weight (local to the section rather than to the whole document).

Level Two Heading

All the detective's hopes and wishes were now centred on Hong Kong; for the steamer's stay at Singapore would be too brief to enable him to take any steps there. The arrest must be made at Hong Kong, or the robber would probably escape him for ever.

Level Three Heading

Fix thought over these probabilities during the long hours which he spent in his cabin, and kept repeating to himself, "Now, either the warrant will be at Hong Kong, in which case I shall arrest my man, or it will not be there; and this time it is absolutely necessary that I should delay his departure.

Level Four Heading

Fix made up his mind that, if worst came to worst, he would make a confidant of Passepartout, and tell him what kind of a fellow his master really was. That Passepartout was not Fogg's accomplice, he was very certain.

Level Five Heading

Who was this woman? What combination of events had made her Fogg's travelling companion? They had evidently met somewhere between Bombay and Calcutta; but where? Had they met accidentally, or had Fogg gone into the interior purposely in quest of this charming damsel?

Level Six Heading

But could he even wait till they reached Hong Kong? Fogg had an abominable way of jumping from one boat to another, and, before anything could be effected, might get full under way again for Yokohama.

Paragraphs


Certain articles will require initial paragraph to carry more importance and introduce the reader to the rest of the story. (…) Who was this woman? What combination of events had made her Fogg's travelling companion? They had evidently met somewhere between Bombay and Calcutta; but where?

Fix was fairly puzzled. He asked himself whether there had not been a wicked elopement; and this idea so impressed itself upon his mind that he determined to make use of the supposed intrigue. Whether the young woman were married or not, he would be able to create such difficulties for Mr. Fogg at Hong Kong that he could not escape by paying any amount of money.


There were sad, haggard women tramping by, well dressed, with children that cried and stumbled, their dainty clothes smothered in dust, their weary faces smeared with tears. With many of these came men, sometimes helpful, sometimes lowering and savage.

Links

There are few different types of hyperlinks available. Although structure-wise they are almost identical they may serve different purpose, e.g. linking to a different section within same page, pointing to a related page either under the same or different domain, or establishing connection with another applications through one of supported protocols.

Please note: br tags used in the code below are for presentational values only.


A link pointing to a specific [destination] section of the same page.
An internal link
A file download link
An external link
Clicking this link will open your default email client
Initiate Skype call with Testuser
Generic [destination] Section

Emphasis and Importance

Use and if it’s only visual change you’re after. For both visual and semantic values, go with and instead.


This must have been a family, running away from the contagion and perishing here on the Cliff House beach.

You will appear before Judge Obadiah at half-past eight"

Definitions and Abbreviations

Use dfn on the first occurrence of the word/phrase and abbr on the first occurrence of the abbreviated text. In both cases the explanation should be entered inside the title attribute and will be visible on mouse-over event.


This happens even though these systems are deterministic. (…) Thus any real time series, even if mostly deterministic, will contain some randomness.

Most recently, NASA announced a new Space Launch System that it said would take the agency's astronauts farther into space than ever before and provide the cornerstone for future human space exploration efforts by the U.S. (…) The most notable NASA activities are its space flight programs, both manned and unmanned.

Content Grouping

Lists

Very often your content will require a way to list a number of items. While it can be done by simple use of comma, for better user experience and increased readability you may want to use one of the available list types.

Ordered Lists


  1. This is an ordered list.
  2. This is another list item containing a sublist:
    1. This is the sub list
    2. and this is its second item
  3. This is the last item of the main list.

Unordered Lists


  • This is an unordered list.
  • This is another list item containing a sublist:
    • This is the sub list,
    • and this is its second item.
  • This is the last item of the main list.

Definition Lists

Sometimes instead of just listing items, you need to assign or organise them under specific terms—that’s exactly what dl element is for.


This is a term
This is the definition of that term
Here is a term that shares a definition with another term.
Here is a that another term
Here's the common definition for these 2 terms above.

There’s also a way to lay it out slightly differently by adding a specific class="dl-inline" attribute.


This is a term
This is the definition of that term.
Here is a another term
This is the definition of the second term.

Tabular Data

If semantically reasonable, tabular data should be always placed within table elements, instead of other elements with overcomplicated styling resembling them. For responsive design pleas use data-label attributes, otherwise they should be omitted.


Monitor Color Depth Statistics
Date 16,777,216 65,536 256
Average 93.83% 5.17% 0.83%
January 2012 98% 2% 0%
January 2011 97% 3% 0%
January 2010 97% 3% 0%
January 2009 95% 4% 1%
January 2008 90% 8% 2%

Media

Figures

The figure tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. While the content of the element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

The most common use of figure involves images, as shown below:


Image Description
This is a caption describing image contents or introducing content directly related to the visuals

But as mentioned above it’s semantically correct to use it for other purposes, e.g. quotes:


Few stopped and came aside from that flood. The lane opened slantingly into the main road with a narrow opening, and had a delusive appearance of coming from the direction of London.
H. G. Wells in The War of the World

Audio and Video

Similarly these 2 types of media should be also contained in the figure element:


  
An animated short set in a post-apocalyptic universe by Wes Ball

Inline Galleries

Depending on the content it may be required to display a set of images as a gallery. There are two ways to do it—either as a inline slider:



or as a thumbnail list with lightbox support:


Forms


This is help text under the form field.

Notifications
Music

Buttons






Navigation

Breadcrumbs

Please note that unless specified otherwise, breadcrumbs are not shown on smaller screens.



Pagination



Tag Lists

A very special type of unordered list you often see on websites is a Tag List. It allows for further, more abstract categorisation of each article and/or product, enriching it with keywords and ideally connecting to other content items. Although structurally it doesn’t differ much from the usual ul element, the applied styling often varies.


This product was tagged as:
  1. #tag1,
  2. #tag2,
  3. #tag3,
  4. #tag4,
  5. #tag5.

UI Patterns

Accordion

A simple CSS only Accordion menu consistent across all screen sizes


Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'

So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.

In another moment down went Alice after it, never once considering how in the world she was to get out again.

The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she found herself falling down a very deep well.

Tabs

A simple CSS only Tabs menu consistent across all screen sizes. It is JS enhanceable to support sliding’


  1. Title 1

    In another moment down went Alice after it, never once considering how in the world she was to get out again.

    The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she found herself falling down a very deep well.

  2. Title 2

    So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.

  3. Title 3

    Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'

  1. Title 4

    In another moment down went Alice after it, never once considering how in the world she was to get out again.

    The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she found herself falling down a very deep well.

  2. Title 5

    So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.

  3. Title 6

    Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'

Other Patterns and Microformats

Address

Refer to vcard documentation for details on usage.


Website
665 3rd St. Suite 207
San Francisco, CA 94107
United States
+44 (0)XXXX XXXXXX

Stay up to date

Be the first to find out about our latest news, tastings, special offers and more. Sign up to our newsletter here.

Be the first to find out about our latest news, tastings, special offers and more. Sign up to our newsletter here