Proper Text Formatting

Inside HTML

HTML is not a programming language. It's actually a rather simple markup language. If you've ever edited a Wikipedia article, HTML is similar. A typical HTML document, like the one being written here, is just a collection of paragraphs encapsulated by "tags" that define whether a paragraph is a heading or a normal paragraph. Words and phrases can also be encapsulated by tags, allowing them to become bold, italicized, or a hyperlink. There are additional tags for bulleted lists, images and so on.

An Example of HTML Code

This sentence, reproduced in the box below, contains italicized and bold words.

<h2>An Example of HTML Code</h2>

<p>This sentence, reproduced in the box below, contains
<em>italicized</em> and <strong>bold</strong> words.</p>

Notice that each tag consists of an opening (e.g. <h2>) and a closing tag (e.g. </h2>). These start and end points define what words its attributes are applied to.

Tags Used:

1. h2: This defines the line as a level 2 heading.
2. p: This defines the line as a normal paragraph. The majority of text on the internet is encapsulated in a <p> tag.
3. em: This grants the word emphasis.
4. strong: Makes things bold.

What You Need to Know

You will not need to know how to dissect HTML source code. You will never have to code HTML by hand (unless you want to) because you have Drupal's WYSIWYG editor at your disposal. What the WYSIWYG editor does is writes the code and tags for you, so you can concentrate on the content. You should, however, have some knowledge of the basic tags used in HTML.

Separated Content and Design

In modern web design, so-called "content" and "design" are separated. Design refers to fonts, font sizes, colors, layout, the surrounding interface of the web site and so on. Content refers only to the paragraphs and elementary tagging, such as italics and headings-- the bare essentials of a document. As you write paragraphs and define headings in your documents, an external style sheet and "masterpage" will wrap your document with the proper fonts, colors and layout when it's published.

On the right is an example of the Officers & Executive Board landing page as it appears in the WYSIWYG editor. It's black, white, and plain in the editor. Its source code only consists of paragraph tags, heading tags, hyperlink tags, and an image tag for its logo. When it's published on the live site however, it inherents the standard ALA.org colors and formatting, as well as navigation.

Headings

The wrong way to make headings is to bold, underline, and increase the font size of a line. First of all, this is unnecessary due to ala.org's separation of content and design. You must only tag a line as a heading. The document type will handle the details of styling for you upon publishing. Second of all, it will not be a "true" heading.

Headings are used for purposes beyond styling. Screen readers for the blind navigate pages by reading the heading tags of a page, compiling it into a table of contents. Search engines use heading tags to better catalogue its contents. For instance, a screen reader will "see" this webpage thus far as:

• Proper Text Formatting
  • Inside HTML
  • An Example of HTML Code
    • Tags Used
  • What You Need to Know
    • Separated Content and Design
    • Headings

As you can see, there are three levels of headings used. "Proper Text Formatting" is an h1 tag. Every page you create in Drupal should begin with an h1 heading containing the page title (this is taken care of by the stylesheet). "Inside HTML" is an h2 heading. "Tags Used" is an h3 and so on. As you deploy headings to break up the paragraphs of your page, you should make sure that the headings flow in a logical fashion.

HTML Tables

Tables like the one above are often an ideal way to present data. The WYSIWYG editor has a tool to generate them. However, HTML tables are commonly abused to subvert proper page formatting. This is not allowed as per the ALA Web Style Guide.

Fonts, Colors and Etc.

Custom styling is also discouraged on pages. It is not proper to subvert the standards of your doc type. Colors and formatting need to be defined in the masterpage and style sheet (aspects of the document type), which is outside the scope of this lesson.