< Web Foundations
Internet word cloud

This lesson introduces HTML block elements.

Objectives and Skills

Objectives and skills for this lesson include:[1][2]

  • Use the most current version of Hypertext Markup Language (HTML5) to create Web pages.
  • Design Web pages to industry standards.

Readings

  1. Wikipedia: Block-level element
  2. Wikibooks: HyperText Markup Language/Paragraphs and Headings

Multimedia

  1. YouTube: HTML5 Tutorial for Beginners

Examples

Section Headings

<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>

Example:

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading
Level 6 Heading

Paragraph

<p>paragraph text</p>

Example:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Quotation (indented margins)

A block level quotation, for when the quotation includes block level elements.[3]

<blockquote>quotation</blockquote>

Example:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Pre-formatted Text

<pre>text</pre>

Example:

text
    goes
        here

Horizontal Rule

<hr>

Example:

Activities

  1. Complete the tutorial TutorialsPoint: HTML Blocks
  2. Complete the tutorial TutorialsPoint: HTML Elements
  3. Complete the tutorial TutorialsPoint: HTML Attributes

Key Terms

block-level element
heading tag

See Also

References

This article is issued from Wikiversity. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.