Web Design
HTML Exercise #3

Formatting Text with HTML5

Focus on:

Overview

There are three documents in this exercise to help you learn to format text using semantic markup. HTML is "semantic" and most tags communicate the meaning and/or structure of the content that they are marking up. For instance, the <p> or paragraph tag creates a paragraph of text. A paragraph is "a distinct section of a piece of writing, usually dealing with a single theme and indicated by a new line, indentation, or numbering." The browser indicates the paragraph element by causing it to display on its own lines, with new lines that separate it from the paragraphs above or below.

Page 1: Elements that create hierarchical headings

HTML documents are structured documents. Elements communicate meaning (semantics), but also structure. Heading tags are an important way to create structural hierarchy within your document. Heading tags work the way headlines and subheads work in journalism. Consider your average newspaper front page. You have the newspaper masthead: the most important heading on the page. Then you have the one major news story; the "headline news." But there will still be other news stories on the page, and they will have subheads inside them. In a print publication, the size of the headline indicates importance (biggest = most important). Smaller headlines are of lesser importance. In HTML the importance is communicated via the tag you choose: h1 is most important, and h2, h3, h4, h5, h6 are of sequential lesser importance.

On a typical web page, the site id (masthead) is the most important heading. The page name is the next most important heading. Sub-topics of the page are the next most important heading, and so on.

Mark up the html page 1heading-content.html with the headings tags. The content itself, as well as the screen shot, can help you choose the proper heading. You will not need all the heading tags, just headings for the first 4 hierarchical levels of importance.

You'll also need to put in all appropriate paragraphs. The paragraph tag can only group content that displays in the flow of text, so heading tags NEVER go inside a paragraph (and paragraphs never go inside a heading tag)

Don't worry about any markup for content "in the flow of text." This is for later pages.

Page 2: Elements for content "in the flow of text"

There are lots of tags that mark up words or phrases in your paragraphs of text because they mean something special. Those tags don't disrupt the display of the paragraph or other text block, because they display "in the flow of the text." In the html page 2phrasing-content.html, mark up the words/phrases in the text as appropriate using the following tags:

There are a few "presentational" tags in HTML 5 that mark up for appearance only, but conform to print conventions that don't need to be communicated to assistive technologies or the search engine (because the display doesn't indicate a shift in meaning, but is only about how something looks). Be careful with these. They look the same as strong or cite or em. Be sure you use proper semantic tags where needed, and proper non-semantic tags for print conventions when there is no semantic reason to use semantic tags.

Using the meaning of the text, what you learn from the notes and videos, and with help from the screenshot, mark up all the text in this page with each of the tags (semantic and presentational) above. Some tags are used more than once.

Page 3: Elements that group other text content

On the html page 3grouping-content.html, you'll want to use the tags that create larger groupings of text. The paragraph tag is one such tag; it takes multiple sentences and groups them together to form a unit with a single theme. The paragraphs will already be in most of the page, but you'll have to put in a few yourself. The meaning of the text and the screenshot will help you decide where and what to put in the markup to create these groups.