How to use basic Hyper Text Markup Language (HTML)

On this page:

 

How to open the source to see the HTML code

  1. Open a New draft.
    New draft tab.
  2. In the toolbar, select Source.
    Source code button.
  3. The source with the HTML code will replace the What You See Is What You Get (WYSIWYG) editor.
    Source with HTML code open.

Formatting text

Bold

Place a <b> tag before the text that is to be bolded, and a </b> tag after the text.

Example:

This is my <b>favourite</b> song.

This is my favourite song.

 

Italics

Place an <i> tag before the text that is to be italicized, and a </i> tag after the text.

Example:

I am reading <i>Animal Farm</i> for an essay.

I am reading Animal Farm for an essay.

 

Lists

There are 3 types of lists: unordered lists, ordered lists and description lists.

Unordered list

An unordered list is a bulleted list. Use this type of list when the order does not matter.  

  1. Begin an unordered list with the <ul> tag.
  2. Start each new point with <li>, then close the line with </li>.
  3. Continue doing this until the list is finished.
  4. When the unordered list is done, end with </ul>.  

Example:

<p>Favourite musicians</p>

<ul>

<li>Taylor Swift</li>

<li>Ed Sheeran</li>

<li>First Aid Kit</li>

</ul>

Favourite musicians

  • Taylor Swift
  • Ed Sheeran
  • First Aid Kit
 

Ordered list

An ordered list is a numbered list. Use this when the order matters, for example, steps in a process.

  1. Begin the list with <ol>.
  2. Start each new point with <li>, then close the point with </li>.
  3. Continue doing this until the list is finished.
  4. End the ordered list with </ol>.

Example:

<p>Cha cha slide</p>

<ol>
<li>Slide to the left.</li>
<li>Slide to the right.</li>
<li>Take it back now y'all.</li>
<li>One hop this time.</li>
<li>Right foot let's stomp.</li>
<li>Left foot let's stomp.</li>
<li>Cha cha real smooth.</li>
</ol>

Cha cha slide

  1. Slide to the left.
  2. Slide to the right.
  3. Take it back now y'all.
  4. One hop this time.
  5. Right foot let's stomp.
  6. Left foot let's stomp.
  7. Cha cha real smooth.
 

Description list

A description list is a list of terms, with a description for each term.

  1. Begin the description list with <dl>.
  2. Insert <dt> to have a term, and close it with </dt>.
  3. Insert <dd> to define the term, and close it with </dd>.
  4. Continue doing this until your description list is done.
  5. End the description list with </dl>.

Example:

<p>Favourite beverages</p>

<dt>Water</dt>
<dd>Transparent liquid.</dd>
<dt>Tea</dt>
<dd>Prepared by pouring hot or boiling water over cured leaves.</dd>
<dt>Coffee</dt>
<dd>Prepared from roasted coffee beans.</dd>
</dl>

Favourite beverages

Water
Transparent liquid.
Tea
Prepared by pouring hot or boiling water over cured leaves.
Coffee
Prepared from roasted coffee beans.
 

Nested HTML List

Lists can also be nested within each other.

  1. Begin whatever type of list is desired.
  2. Insert the opening and closing tags for each line.
  3. When the nested list starts, begin the desired list with the appropriate tag.
  4. When the nested list is finished, end the list with the closing tag.
  5. Continue the list.
  6. End the list with the appropriate closing tag.

Example:

<p>Favourite books</p>

<ul>
<li>To Kill a Mockingbird</li>
<li>The Hunger Games Series
<ol>
<li>The Hunger Games</li>
<li>Catching Fire</li>                   <li>Mockingjay</li>
</ol>
</li>
<li>Pride & Prejudice</li>
</ul>

Favourite books

  • To Kill a Mockingbird
  • The Hunger Games Series
    1. The Hunger Games
    2. Catching Fire
    3. Mockingjay
  • Pride & Prejudice
 

Fixing problems with HTML

Paragraph tags

A paragraph tag <p> defines a new paragraph, and </p> is the ending tag. Sometimes a paragraph tag needs to be added to insert a space, or deleted to fix funny spacing.

Adding a paragraph tag to insert a space

Sometimes in expandable/collapsible content (marked up as <div class="expandable">) it is difficult to insert a space in order to add new content between areas. To insert a space:

  1. Open Source.
    Source code button.
  2. Locate where the space is to be inserted (after the final closing tag for the content on top and before the first opening tag for the bottom content).
    Place cursor after closing div tag.
  3. Press enter and insert <p>.
    Enter paragraph tag after closing div tag.
  4. By clicking source again, the WYSIWYG will turn back on, and there will be a space to insert content.

    Example, before:
    Expandable/collapsable content without a space.
    Example, after:
    Space between expandable/collapsable content.

Removing paragraph tags in a list

Sometimes the spacing can be strange in lists because of paragraph tags. To check to see if paragraph tags are the issue:

  1. Open Source.
    Source code button.
  2. Locate the HTML code with strange spacing.
    Paragraph tags circled.
  3. Remove any unwanted <p> and </p> tags.
    Paragraph tag deleted.
  4. Save.

    Example, before:
    WYSIWYG editor with paragraph spacing.
    Example, after:
    WYSIWYG editor with correct spacing.

Removing non-breaking spaces

Non-breaking spaces (&nbsp;) can sometimes show up in the HTML code (usually the result of pasting text in from another program). If you have any strange spacing, check for &nbsp; in the HTML code.

  1. Open Source.
    Source code button.
  2. Locate the strange spacing and check for &nbsp;.
    Non-breaking space code circled.
  3. Remove any &nbsp;.
    Non-breaking space code removed.
  4. Save.

    Example, before:
    Paragraph with double space after punctuation circled.
    Example, after:
    Single space circled.

Alternatively, if there is a lot of strange spacing:

  1. Open Source.
    Source code button.
  2. Place cursor anywhere and select all (Ctrl+A).All of the source selected.
  3. Copy (Ctrl+C) the HTML code.
  4. Open a word processing document.
  5. Paste HTML code (Ctrl+V).
  6. Use Find (Ctrl+F) to locate all instances of &nbsp;.
    Using the Find function to find all instances of &quot;&amp;nbsp;&quot;
  7. Open Replace menu.
    Selecting the Replace function.
  8. Insert &nbsp; in "Find what" and leave "Replace with" blank. Select Replace all.Replacing non-breaking space code with a blank space.
  9. All instances of &nbsp; will be deleted.
  10. Select all (Ctrl+A) of the updated HTML code.
  11. Paste (Ctrl+V) the updated HTML code back into the site source.
    Example, before:
    Double spaces after punctuation circled.
    Example, after:
    Single spaces after punctuation circled.