This page is the content sampler of the various HTML headings and other formatting structures that have been styled for this site. Please don’t delete this page, as it’s a great reference.
The title is automatically set as a Heading 1. It doesn’t get any bigger than a Heading 1, so it is best not used elsewhere.
The excerpt below the title is set as Heading 2. Heading 2 is intended to be used just once on a page – right after the Heading 1 and before other page content. It’s good for holding a page excerpt/summary, or some other content that might be pertinent to SEO. I typically make it a little smaller than Heading 3, as Heading 3 is usually a short phrase while Heading 2 usually contains more text.
This is a Heading 3
Heading 3 is the top-level separator of content areas within a page. It might follow a Heading 1, Heading 2 or a paragraph.
This is a Heading 4
Heading 4 is used to break up sections that occur within a section already set apart by a Heading 3. It’s often a sub-heading to Heading 3, but not limited as such.
Occasionally, a Heading 4 will immediately follow a Heading 3. This depends on the nature of the content, and how it’s written.
This is a Heading 5
Heading 5 is best used to classify sections of similarly-structured content. For these situations, a Heading 3 or Heading 4 either seems like overkill (too much size & weight), or doesn’t sufficiently reinforce the “buckets” of similar-structured content.
This is a Heading 6
- Heading 6 is usually reserved for footnote-style headings
- It’s relatively small and is the last heading on a page.
- It is usually followed by a single short paragraph or bullet list.
OTHER FORMATS
Ordered List
- Here is the first item
- Here is the second item
- Here is the third item
- You get the picture now. Here is a longer item. Here is a longer item. Here is a longer item. Here is a longer item. Here is a longer item. Here is a longer item. Here is a longer item.
- Here is an item.
- Here is an item.
- Here is an item.
Links
A link looks like this. Go ahead and mouse over it.
Blockquote:
A blockquote separates a sentence or phrase worth highlighting and repeating!
MIKE HONDEL, CLUTCH MEDIA
For this site, the blockquote is styled to act like a pull-quote in which a primary sentence or phrase is displayed with great emphasis. Not to be overused – maybe once per page or so. The quote’s source is marked as a citation, with bold applied to the author name.
Citation:
A citation defines the title of a work (e.g. a book, a song, a movie, a TV show, a painting, a sculpture, etc.).
PHOTOS
There are several options for photo sizes. Photo sizes are largely driven by pixel width (the photo’s aspect ration determines the pixel height). There are pre-set options for both landscape and portrait orientation.
Landscape
This is a full-size image (greater than 600px), with no alignment. By setting to full size, the image will automatically be resized to fill the available width, based on the viewer’s browser & device.
- This is a medium image, aligned to the right. It will fit an image nicely beneath the dynamic lists of showcase projects.
Landscape oriented images can be sized to thumbnail, medium, and large. Medium sets a photo width that is a little less than half of the available width of the content column. A large image will fill the available width of the content column.
A photo caption can be optionally added. Thumbnail and medium can be aligned right or left.
Portrait
- Medium, portrait, aligned right.
Thumbnail size is good for portrait orientations, as the width is set to provide a similar overall area as a medium landscape image.
Like the medium size, these can be aligned right or left.
