friends of dufferin grove park
Website - Technical - Basic Block Level Elements
Related pages:
Resources

Files
People
Software

Web page creation

Overview
Creating a new page from a template
Block level elements overview
Basic block level elements
Custom block level elements
Organizational block level elements
Inline elements
Other components
Layout patterns
Process checklists

These are the block level elements that the custodian uses to begin the process of page layout, particularly the headings and paragraphs to enclose the headings and text of the page. The other elements on this page can be used to advance the process of layout.

On this page:

The class attribute

We make extensive use of the class attribute of HTML elements to modify and (in the case of the generic div element) define the style of the element. Class names are used by the browser to look up style rules for HTML elements in the Cascading Style Sheet (CSS). More than one class name can be applied to an element by separating the class names with spaces in the value assigned to the class attribute. Note that class attribute values are case-sensitive.

Most class definitions are introduced in this page, the Custom block level elements page, and the Organizational block level elements page. Class over-rides are introduced in the Other components page.

The use of the class attribute allows the custodian to specify the selection of HTML elements logically, leaving the physical rendering rules to the browser and the CSS. It greatly reduces the work and complexity for the custodian. In addition the consistent use of the class attribute by all custodians guarantees a consistent look to the website as a whole, making a better experience for the user. Also, the use of the class attributes allows the webmaster to make global changes to the appearance of the website solely by changing rules in one place, the CSS. For all these reasons, application of physical rendering rules at the HTML code level on this website is highly discouraged, and shouldn't be done. Use the class attribute as prescribed in these pages instead.

HTML Patterns

The rendering examples in these pages are accompanied by HTML pattern sidebars, which contain the HTML code for the rendering examples. The code in these pattern sidebars can be copied to your HTML code pages, and adapted to fit the circumstances. Patterns are guides as to form and structure, and are presented to allow modification of values to accomodate particular situations.

Headings: h1, h2, h3, h4, h5, h6

HTML pattern: headings, plain
<h1>Level 1 heading</h1>
<h2>Level 2 heading</h2>
<h3>Level 3 heading</h3>
<h4>Level 4 heading</h4>
<h5>Level 5 heading</h5>
<h6>Level 6 heading</h6>
<h6 class="heading-bright">
  Level 6 class="heading-bright"</h6>
<h6 class="heading-dark">
  Level 6 class="heading-dark"</h6>
<h6 class="heading-emphatic">
  Level 6 class="heading-emphatic"</h6>
<h6 class="subtitle">
  Level 6 class="subtitle"</h6>

There are six levels of headings, with 1 (one) being the highest logical heading, and 6 (six) the lowest:

Here are samples:

Level 1 heading

Level 2 heading

Level 3 heading

Level 4 heading

Level 5 heading

There are a few variations of level 6 headings:

Level 6 heading
Level 6 class="heading-bright"
Level 6 class="heading-dark"
Level 6 class="heading-emphatic"

Note that the last three have no lower margin.

Level 6 class="subtitle"
HTML pattern: headings, section dividers
<h1 class="section-divider-high">
  Level 1 heading</h1>
<h2 class="section-divider-high">
  Level 2 heading</h2>
<h3 class="section-divider-high">
  Level 3 heading</h3>
<h4 class="section-divider-mid">
  Level 4 heading</h4>
<h5 class="section-divider-mid">
  Level 5 heading</h5>
<h6 class="section-divider-low">
  Level 6 heading</h6>
<h6 class=
  "heading-bright section-divider-low">
  Level 6 class="heading-bright
   section-divider-low"</h6>
<h6 class=
  "heading-dark section-divider-low">
  Level 6 class="heading-dark
   section-divider-low"</h6>
<h6 class=
  "heading-emphatic section-divider-low">
  Level 6 class="heading-emphatic
   section-divider-low"</h6>
<h6 class=
  "subtitle section-divider-low">
  Level 6 class="subtitle
   section-divider-low"</h6>

You can further emphasize headings by adding the section-divider modifiers to them. The section dividers are named "high", "mid", and "low" in this case to indicate the logical order of importance the headings represent, as opposed to some physical positioning. Here are the headings again with section dividers:

Using class="section-divider-high":

Level 1 heading

Level 2 heading

Level 3 heading

Using class="section-divider-mid":

Level 4 heading

Level 5 heading

Using class="section-divider-low":

Level 6 heading
Level 6 class="heading-bright section-divider-low"
Level 6 class="heading-dark section-divider-low"
Level 6 class="heading-emphatic section-divider-low"
Level 6 class="subtitle section-divider-low"
HTML pattern: heading/subtitle pair
<h4 class="compact">
  Level 4 heading</h4>
<h6 class="subtitle">
  Level 6 class="subtitle"</h6>

You can create a heading/subtitle pair by adding the class="compact" modifier to the heading above the subtitle. This removes the lower margin from the heading, so that the subtitle will appear on the next line.

Level 4 heading

Level 6 class="subtitle"

Paragraph: p

HTML pattern: paragraph
<p>This is a paragraph.</p>

The paragraph element contains most non-header text on the web site. Most blocks of text should be enclosed in a paragraph tagset. The paragraph cannot contain other blocks, however. If you need to embed a small sidebar or imagebox in the middle of a block of text, use the text-block (see next section) instead.

HTML pattern: block embedded in text-block
<div class="text-block">
 This paragraph is enclosed in a 
 text-block tagset. It behaves 
 the same as a paragraph tagset, 
 <div class="sidebar-left-narrow">
  <p class="compact">
   This is a narrow sidebar 
   embedded in the text block.
  </p>
 </div>
 but allows the embedding of a block 
 element within the text-block, unlike 
 a paragraph. If you need a small 
 sidebar for example embedded in the 
 middle of a text block, you can do so 
 with the custom text-block div.
</div>

Text-block: a custom div

This paragraph is enclosed in a text-block tagset. It behaves the same as a paragraph tagset,

This is a narrow sidebar embedded in the text block.

but allows the embedding of a block element within the text-block, unlike a paragraph. If you need a small sidebar for example embedded in the middle of a text block, you can do so with the custom text-block div. For the more usual pattern of floating block inclusions, see Custom block level elements.

Block quotation: blockquote

HTML pattern: block quotations
<blockquote>
 <p>default blockquote</p>
</blockquote>

<blockquote class="letter-internal">
 <p>letter-internal</p>
</blockquote>

<blockquote class="letter-external">
 <p>letter-external</p>
</blockquote>

<blockquote class="document-internal">
 <p>document-internal</p>
</blockquote>

<blockquote class="document-external">
 <p>document-external</p>
</blockquote>
default

This is the default blockquote which can be used to offset some text blocks. Blockquotes cannot hold inline elements directly, but should rather contain other block elements, typically multiple paragraph elements.

letter-internal

A blockquote gives the opportunity to differentiate some text that comes from a specified source. We have four "flavours" of these. This is our "letter-internal" block quote, indicating that the text has been generated by one of our members representing the Friends of Dufferin Grove park, in the form of an email or a letter.

Blockquotes typically contain multiple paragraphs, but can contain other block elements such as sidebars or imageboxes (see Custom block level elements).

letter-external

This is our "letter-external" block quote, indicating that we have received a paper letter or an email from the source.

document-internal

Here is our "document-internal" block quote, indicating that the quoted material comes from another part of this website (or internal report or whatever).

document-external

And finally here is our "document-external" block quote, indicating that the quoted material comes from another website (or external report or whatever).

HTML pattern: horizontal rule
<hr>

<hr class="minor">

Horizontal rule: hr

The horizontal rule is a simple way of dividing minor sections. The line below is a horizontal rule:

We have defined one variant of the horizontal rule called "minor" for minor divisions, as follows:

The horizontal rule is one of three elements you'll be using that does not have a closing tag. The other two are img (inline image) and br (line break).

Block-divider: a custom div

HTML pattern: block-divider
<div class="block-divider"></div>
<h6>Some block level element</h6>

<div class="block-divider-left"></div>
<h6>Some block level element</h6>

<div class="block-divider-right"></div>
<h6>Some block level element</h6>

The block-divider is used to convince the browser to begin rendering the next block level item it encounters on a line that is clear to the left and to the right, in particular clear of any encroaching floating blocks. For example we placed a block-divider at the end of the "Text-block: a custom div" section above, so that the "Block quotation: blockquote" section would start underneath the "HTML pattern: block embedded in text-block" sidebar.

The block-divider is an "empty" div. It occupies a line on its own, with no elements or text (therefore nothing visible) between the opening and closing tags.

We also provide "block-divider-left" and "block-divider-right" variants if you want to begin the next line clear of elements only to the left or only to the right, respectively.

HTML pattern: division-compact
<div class="division-compact">

 <p>Smaller font-size content goes 
  here, as much as you want, with as many 
  block level elements as you want</p>
  
</div><!-- end of division-compact -->

Division-compact: a custom div

Normally the administrator would leave the font of the page as the standard size, or set it smaller for the page (see Creating a new page from a template). However if you want part of a page to have smaller fonts (such as a lengthy listing organized into short paragraphs), you can enclose that part in the division-compact div.

This is a paragraph embedded in a division-compact block.

  go to top