How to use basic Hyper Text Markup Language (HTML)
On this page:
How to open the source to see the HTML code
Open a New draft.
In the toolbar, select Source.
The source with the HTML code will replace the What You See Is What You Get (WYSIWYG) editor.
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.
Begin an unordered list with the <ul> tag.
Start each new point with <li>, then close the line with </li>.
Continue doing this until the list is finished.
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.
Begin the list with <ol>.
Start each new point with <li>, then close the point with </li>.
Continue doing this until the list is finished.
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
Slide to the left.
Slide to the right.
Take it back now y'all.
One hop this time.
Right foot let's stomp.
Left foot let's stomp.
Cha cha real smooth.
Description list
A description list is a list of terms, with a description for each term.
Begin the description list with <dl>.
Insert <dt> to have a term, and close it with </dt>.
Insert <dd> to define the term, and close it with </dd>.
Continue doing this until your description list is done.
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.
Begin whatever type of list is desired.
Insert the opening and closing tags for each line.
When the nested list starts, begin the desired list with the appropriate tag.
When the nested list is finished, end the list with the closing tag.
Continue the list.
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
The Hunger Games
Catching Fire
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:
Open Source.
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).
Press enter and insert <p>.
By clicking source again, the WYSIWYG will turn back on, and there will be a space to insert content.
Example, before:
Example, after:
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:
Open Source.
Locate the HTML code with strange spacing.
Remove any unwanted <p> and </p> tags.
Save.
Example, before:
Example, after:
Removing non-breaking spaces
Non-breaking spaces ( ) 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 in the HTML code.
Open Source.
Locate the strange spacing and check for .
Remove any .
Save.
Example, before:
Example, after:
Alternatively, if there is a lot of strange spacing:
Open Source.
Place cursor anywhere and select all (Ctrl+A).
Copy (Ctrl+C) the HTML code.
Open a word processing document.
Paste HTML code (Ctrl+V).
Use Find (Ctrl+F) to locate all instances of .
Open Replace menu.
Insert in "Find what" and leave "Replace with" blank. Select Replace all.
All instances of will be deleted.
Select all (Ctrl+A) of the updated HTML code.
Paste (Ctrl+V) the updated HTML code back into the site source.
Example, before:
Example, after: