How to view block formatting and source html tags

Webpages are made up of html markup. If you click the source button you will see these html elements enclosed in <> characters. All html elements have an opening and closing tag. Notice that the closing tag has a forward slash in it.

Here is what the source of a paragraph element looks like.

<p>This paragraph has an opening and closing tag </p>


After clicking the source button you will see these common tags.

<p>paragraph text</p>
<h2>Title of Page</h2>
<h3>Smaller Title</h3>
<h6>Smallest Header</h6>
<li>List Item<li>
<ul><li>Unordered List</li></ul>
<ol><li>Ordered List</li></ol>

The source button looks like this:

Image
source button

 

This is how the elements actually appear.

paragraph text

Title of Page

Smaller Title

Smallest Header
  • Unordered List
  • List item
  • Last list item
  1. Ordered List
  2. List item
  3. Last list item

To view the html blocks, click the show blocks button that looks like this: 
Image
show block button
Video file

 

Complexity
Intermediate