Elements in the Body:

The body element is where all of the “meat & potatoes” (if you will) of the site gets placed. This is the data that is rendered by the browser and displayed on the client’s local computer.

Within the body there will generally be 2 types of markup used;

  1. Structural markup
  2. Semantic markup

Structural Markup

Structural markup embeds information about the structure of a document. Structure includes elements such as:

  • Headings
  • Paragraphs
  • Breaks
  • Lists

These elements will help guide a user visually and provide information about the type of content through a document. These elements are also used by the browser and DOM to understand the content of a document. A browser will use this structural markup to assist screen readers and other accessibility-based software.

Reveiw of Basic Structure and the Body

Remember? The most basic of structured documents should include tags identifying headings and paragraphs. These two markup elements are used in almost every document editing application and are crucial in authoring web content.

Headings

Headings are defined with the <h1> to <h6> tags, and are written <h1>...</h1>.

<h1> defines the most important heading. <h6> defines the least important heading. <h1 headings are considered to be Main Headings. While, <h2> headings are usually considered sub-headings and so forth through <h6>.

Basic Paragraph

Any text between the paragraph tags <p>...</p> belongs to the same paragraph.

Almost all non-heading text will be placed within a paragraph element in a web document.

Semantic Markup

Semantic markup us used to reinforce the semantics, or meaning, of the information in a document. Semantic markup might be used to place emphasis on a word or phrase, identify a word as being strong, provide citations or quotations, link to definitions, or distinguish editorial changes.

More on semantic markup on the next page.

{ TODO: }

  1. Read pages 26-39 of Chapter 01 in Duckett.
  2. Read pages 40-44 of Chapter 02 in Duckett.

Previous section:
Next section: