Terms, Tags, & Character Codes

Now that you've seen HTML in action, it's time for some vocabulary! This page will introduce you to some new terms, explain the purpose of some common tags, and highlight a couple of common character codes.

Terms

These are the four most basic HTML terms, and they're really all we need to work with the HTML Editor in Canvas.

Opening Tag
The first part of a pair of tags. (Ex: <p>)
Closing Tag
The last part of a pair of tags. (Ex: </p>)
Content
The text marked/altered by tags.
Element
The combination of an opening tag, content, and closing tag. (Ex: <p>I am happy to be sharing this with you!</p>)

Those are the bare basics. When you put content between an opening tag and a closing tag, it forms an HTML element. Don't worry, though, that's about as jargon heavy as this course gets!

Tags

A Note About Accessibility

There are several tags, like <p> (paragraph) and <h1> (heading 1), that may not seem to do much to the formatting of the text, especially in Canvas. However, these tags are indeed necessary, if not just for accessibility purposes.

Some tags, like heading tags, may do more to the formatting of your text depending on where you’re working. For example, in Microsoft Word, the ‘Styles’ of text come with many more pre-formatted settings than their corresponding tags do in Canvas. Regardless of where you are though, the purpose of structural tags isn’t just to tell your computer to display the text differently; it’s also to help screen readers understand how to navigate the text.

Imagine a book without a table of contents. Imagine a long, long webpage full of nothing but bland text when you know there should be headings to help you navigate. That’s kind of what a screen reader is like without structural tags!

There are lots and lots of different HTML tags, some more complicated to use than others, but the basic rules are the same. No tag will work, regardless of its function, without both an opening and closing tag! Here are some of the most basic tags (including those used in the example above!) to help you make sense of what you might see in the HTML editor.

Danielle's Note!

 

<p></p>
Paragraph - Structural tag, denotes a paragraph.
<h1></h1>
Heading 1 - Structural tag, denotes the first, highest level of heading. Headings 2 and beyond follow the same pattern: <h2>,<h3>, and so on.
<ul></ul>
Unordered List - More commonly referred to as a bulleted list.
<ol></ol>
Ordered List - More commonly referred to as a numbered list.
<li></li>
List Item - Used to differentiate list items in ordered and unordered lists.
<strong></strong>
Strong - Used to make text bold.
<em></em>
Emphasis - Used to italicize text.

Character Codes

But wait, Danielle! I'm looking at the HTML Editor for my page, and there's some weird gobbledygook that definitely isn't what I typed!

Have no fear! What you're probably seeing is a character code. In raw HTML code, some common characters display as named codes instead of the actual character. You don't have to memorize these codes; when you type a character with a character code in the Rich Content Editor, the HTML Editor knows what to do with it. The following is by no means an exhaustive list of character codes; I've only provided it here to clear up potential confusion when looking at the HTML Editor.

&nbsp;
Non-breaking space
&rsquo;
&lt;
Apostrophe
&gt;
Less than
Greater than

Now, let's go try it out!