Getting Down with ...

by ...

Lesson n:

Elements come in two varieties: block-level elements, which mark up larger sections, or blocks, within your document, and inline elements, which are for smaller bits, usually contained within one line.

The web browser puts new lines (think Enter key on the keyboard) around block level elements so that they appear on their own line.

The following source:

<p>p element</p><div>div element</div>
<section>section element</section>
<b>b element</b>
<i>i element</i>
<span>span element</span>
<code>code element</code>
<p>p element</p><p>p element</p><p>p element</p>

Renders like this:

p element

div element
section element
b element i element span element code element

p element

p element

p element

Notice that the block-level elements render on their own line (with extra space below the p element), while the inline elements are all on the same line.

In older versions of html, the distinction between block-level and inline elements was a firm part of the html language, together with a rule that inline elements had to be enclosed inside a block-level element to be syntactically valid.

With html 5, this distiction is greatly relaxed, and it is possible to use CSS to convert a given element to either block-level or inline.

Block-level Elements

Here are some of the most common (and most useful) elements with default block-level behavior:

<p></p>
Paragraph. Probably the most common tag you will use, it marks the beginning and end of a paragraph of text.
<pre></pre>
Preformatted text. This tag is good for examples of source code.
<div></div>
Block-level logical division. No default attributes.
<h1></h1>...<h6></h6>
All of the heading tags are block-level tags.

The following semantic elements were added in HTML 5:

<header></header>
Marks the top section, or header, of a web page.
<footer></footer>
Marks the bottom section, or footer, of a web page.
<nav></nav>
Used for marking a navigation section.
<main></main>
Marks the main content area of the body of a web page.
<section></section>
Used for enclosing other elements that make up a section of a web page.
<article></article>
Used for enclosing a self-contained composition within a web page.

Inline Elements

Here are some of the most common inline elements together with their uses and default attributes:

<strong></strong>
Used for text that you want to stand out, like this.
<b></b>
Bolded text, like this.
<em></em>
Gives emphasis to the encoded text, like this.
<i></i>
Italicized text, like this.
<q></q>
Marks the beginning and ending of a quotation, like this.
<code></code>
Indicates that the enclosed text is source code, like this.
<kbd></kbd>
Indicates enclosed text is input by the user from a keyboard, like this.
<sup></sup>
Encloses superscript text, like this.
<sub></sub>
Encloses subscript text, like this.
<a></a>
Sets a hyperlink to another document or location within a document.
(see Lesson 6).
<span></span>
Inline logical division. No default attributes.

Object Elements

These three elements are special, because they insert objects rather than enclosing text. Since there is nothing to contain, they do not have a closing tag:

<br>
Line break. This tag forces a line return.
<img>
Image tag. Used to display an image. (see Lesson 7).
<hr>
Horizontal rule. Places a horizontal line across the page.

Special Characters

Since <, >, and & have special meanings in HTML, you can't use them to represent themselves in an HTML document. When you do want to use them literally (as in HTML source examples), you need to mark them up with special codes:

MARK-UP RENDER
&lt; <
&gt; >
&amp; &
&nbsp; non-breaking space

The markup for an example like this:

<h2>Using Special Characters to Mark-up HTML Source</h2>
<p>
Marking-up HTML source requires special characters to replace
occurances of <, >, and &.
</p>

looks like this:

&lt;h2&gt;Using Special Characters to Mark-up HTML Source&lt;/h2&gt;
&lt;p&gt;
Marking-up HTML source requires special characters to replace
occurances of &lt;, &gt;, and &amp;.
&lt;/p&gt;

It's not pretty, but it works.

Exercises:

  1. Copy minimal_page.html to a page called block.html and do the following in the new document:
    • Set the title and a top level heading (<h1></h1>) to Block-level Elements.
    • Create a subsection (with an <h2></h2> element) labeled Text in a Preformatted Element. Copy and paste the following text between <pre></pre> tags: 
      This             text

        spans              several
   lines

                     and             has             lots
  of         extra              

whitespace.
    • Add a paragraph element (in <p></p> tags) with text describing what you see above.
    • Create a subsection below the paragraph you created in the previous exercise labeled Same Text in a Paragraph Element. Copy and paste the same text from the previous exercise, but put it inside a paragraph element (<p></p>) instead of a preformatted (<pre></pre>) element.
    • View your page in your browser. Add a new paragraph element with text describing what you see.
    • Add two more paragraphs of any text you like (this would be a great time to learn about lorem ipsum text and to use it here). Put these two paragraphs inside a division (<div></div>) element. Look at the page in the browser again. Has anything changed? Add one more paragraph describing the effect of the div.
    Your completed block.html page should look something like this.
  2. Copy minimal_page.html to a page called inline.html and do the following:
    • Set the title and a top level heading to Inline Elements.
    • Add several paragraphs to the document, with examples of each in-line element from the lesson (except for <a></a>, which will be introduced in lesson 6). Include text describing the use of each element where it is used.
    • Add a paragraph describing what happens to text that is included in span elements.
    Your completed inline.html page should look something like this.
  3. Copy minimal_page.html to a page called object.html. Set the title and a top level heading to Object Elements. Experiment with <br> and <hr> elements. Add a paragraph to this document describing what they do. Use a few more paragraphs with lyrics to one of your favorite songs, using <br> elements to insert newlines at the appropriate places.

    Your completed object.html might look something like this.
  4. Copy minimal_page.html to a page called special.html. Set the title and a top level heading to Special Characters. Add the following paragraph to your document:

    Image of paragraph with special characters

    You will need to use the special characters to do this.
  5. Check your page on with the W3C Markup Validation Service. If your page has syntax errors, fix them.