​A simplified how to guide to format content for brampton.ca

Using the Markup Styles

Markup Styles are not only defined to help you organize and enhance the presentation of your textual content, but also to provide a proper HTML page structure without the use of any coding knowledge. When using headings for example, If you were to read the HTML markup of our pages they would be represented as <h1> <h2> <h3> tags. Assistive technology like screen readers use these tags to properly navigate and read the page’s content to people with disabilities.

Headings and Subheadings

Use headings to structure the content of your page. Properly used headings allow your users to be able to see the highlights or topics of the page quickly and focus on the points they are interested in.

To add headings and subheadings, select the “Markup Styles” dropdown included as part of the Ribbon’s "Editing Tools" tab, and select from the available options.

Do's and Don'ts

Do use headings to break up and organize your content into groups following a logical order (Heading --> Subheading -->Sub-Subheading).

Make sure your headings clearly describe the purpose of the section that follows; don’t use a particular heading type to pursue a particular font style to achieve only visual results. Likewise, don’t bold regular text to give the visual appearance of headings.

Taglines

Use taglines if necessary to help clarify the your page or site's message. Above in this page, the line of text right that reads “​A simplified how to guide to format content for brampton.ca” is the tagline.

To add a tagline along with the page title, insert your desired text as the first item of the page's content, select it and apply the Markup Style “Tagline”.

Callouts

For side notes, important comments or content that needs emphasizing, use the “Callouts”. These elements will wrap your text selection inside of a left, right aligned or full width box in respect with the rest of your content.

The use of these elements  callouts should be limited to once or twice maximum on any given page. Avoid switching their location or moving them around after created as this might alter the natural flow of your text when read using a screen reader.

Quotations

When inserting a section of content that has quoted from another source, select your text and use the Markup Style "Quotation", for example:

More and more people are using social media like Facebook, Twitter and blogs to have conversations about what matters to them.

Article Footer

Use the "Article Footer" option to markup any extra information about the preceding article  or page content. A footer would typically contain information about its preceding content, such as who wrote it, links to related documents, copyright data, etc. Contact info and addresses can also be inserted here.

Note: Scroll down to the bottom of this page to see this article's footer.

Figure Captions

Image Caption or legend - ie. Purple Clematis shown in full bloom

If needed, captions or legends could be added to briefly describe your images. To do this, place the cursor next to your image and insert the text that will act as image caption. Once you are happy with your caption text, select it using the "Select"  tool making sure your image is part of the selection as well. Then click the "Markup Styles" dropdown and select "Image Caption" from the menu. Finally save your changes and preview your page.

Working with Graphics

Graphics (photographs, charts, diagrams etc.) should provide support, add meaning and clarity to your content rather than simply serve as decoration. Adding unnecessary graphics pushes your content down the page and reduces the space available to present other important information. Additionally, images increase the size or weight of a web page making it slower to download. 

Selecting an image on the page will activate the Ribbon’s “Picture Tools” tab. Use the available options here to add your image’s alternative text, apply formatting styles, and change it's position.

Image Styles

A set of dropdown buttons under the Picture Tools tab allows you format and fine tune how and where your image will display on your page. The “Image Styles” (picture frame options) dropdown options are rather self-explanatory: No border, Thin line border, Table border, Dark border, and Light border.  Select your image and move your mouse over the drop-down menu options to preview each one of the available styles. The last option, "Responsive Image", will make your image as wide as the content area where it's located.

As with all style elements, select one or none, and stick to your selection of choice to provide consistency across your web content.

Image Position

To change the position of an image on your page, relative to its surrounding content, select from the available options under the “Position” drop-down. There are two sections with options to choose from: Float (Left and Right), and Inline (Top, Middle, or Bottom).

Note: The selected position style for the image showing the "Position" tab, is Float-->Right.