Lesson 2 – Say Something!

The number one goal of nearly all websites is to provide some kind of information.

In HTML there are a number of ways to display this information. We’ll take a look at some of the most common ones in this lesson.

Paragraphs

The most basic way to write something is with a paragraph element (<p>). A paragraph is a way to easily organize your information into related, more easily digestible chunks, exactly how a book does.

To use the paragraph element, you simply open a paragraph, place the text you want inside of it, and then end with a closing paragraph tag, like so:

<p>
  Hello World!
</p>

That would output “Hello World!” onto the screen. You, of course, would place the paragraph element within the body element in your page since it is something that is directly output to the screen.

Headers

The word Headers on this page is, unsurprisingly, a header. Headers, both in web pages and on other documents, is simply a short burst of text which describes the information below the text.

In HTML, there are 6 header elements, (<h1> through <h6>). Each of these elements, semantically speaking, is meant to be used to form a hierarchy, meaning that the <h1> should be found above <h2> and downwards.

Using the headers is identical to the paragraph element. You simply start with an opening header, add your text in between, and close with a closing tag, like so:

<h1>
  This is an upper header.
</h1>

<h6>
   This is the bottom header.
</h6>

Headers are great for helping your viewer be able to tell what they are reading about.

Lists

Another way to display your information is to list it. HTML has three varieties of lists: unordered, ordered, and definition lists.

Unordered and ordered lists are used in exactly the same way, simply switching whether you are using <ul> or <ol>. The difference between the two is that in unordered lists, the actual order of the elements is irrelevant, and in ordered lists, the order is important. Unordered lists are typically rendered with some sort of bullet point, while ordered lists are rendered with some sort of number or letter.

They both require the use of a list item element (<li>) which is where the actual contents of the list is contained within. You place what you want to display for one line in a list item, and put all of your list items within either an ordered or unordered list. Here are some examples:

<ul>
  <li>Something random</li>
  <li>Something else random</li>
  <li>Something else</li>
</ul>

<ol>
  <li>The first step</li>
  <li>The second step</li>
  <li>The third step</li>
</o>

You can control the symbol that appears next to each using CSS. There is also an HTML attribute which you can use, however, it has been deprecated in favor of CSS, so it is no longer proper to use it . We will cover the CSS in a future lesson.

The third type of list, the definition list, is a bit different from the other. It is meant to be used for definitions, or things similar in structure. Since a definition typically has a word and then it’s definition, the definition list is structured in that way. The element for a definition list is <dl> and it requires a closing tag. Within the definition list are pairs of definition titles (<dt>) and definition data (<dd>).

The definition title contains the thing we are defining, so you could think of it as the header of the definition list. The definition data contains the definition, or the text, so you can think of it as the paragraph of the definition list.

They are used by opening a definition list, then placing a definition title, which has an opening tag, the text of the title, and a closing tag, followed by the definition data which uses the same structure. Here is an example:

<dl>
  <dt>Deprecated</dt>
  <dd>to express disapproval of</dd>
  <dt>Web Design</dt>
  <dd>The art of making something from nothing</dd>
</dl>

All three types of lists can contain an unlimited number of elements within them, so you only have to worry about breaking them up when it serves some other purpose, like going to a new topic.

Related Extra Credit

Since HTML knows what tags are which because they are marked with <>, what happens if you try to output one of these characters to the screen? The answer is, if you just type it from your keyboard, that the web page blows up.

Whenever you want to use a special character, you must use a special key code. These key codes start with an ampersand (&) and end with a semi-colon (;). If you stop and think for a second, you’d realize this makes the ampersand a special character as well.

There are also some special characters like the copyright symbol (©) which are more convenient to use their special codes for too, instead of having to copy them from the character map (and risk incompatibility).

Here is a table of some common special characters and their respective codes. You use them by simply placing the code where you want the character to be: