How to Use Basic HTML

jet-li-html

Knowing how to use basic HTML is not exactly lawyering, but it does come in handy. Most websites and forums (including our comments and the Lab) support HTML in their comment fields. All web pages and blog posts are in HTML, whether or not you draft them that way. (And if you guest post, most editors are grateful to get an HTML-formatted draft instead of a Word document.)

With a little HTML, you can add links, images, bulleted or numbered lists, and use bold or italic text. It’s not hard. With this article and a little practice, you will know all the HTML you need to look tech-savvy across the web.

HTML Tags

A markup language like HTML is a way of annotating text so that it is easy to distinguish the markup from the content. In the case of HTML, we do this with tags enclosed in angle brackets. For example, if you wanted to create a paragraph, you would surround the text of the paragraph with <p> tags, like so:

<p>[F]or though a Man doth a lawful Thing, yet if any damage do thereby befal[l] another, he shall answer for it, if he could have avoided it.</p>

The opening <p> is a tag that indicates the start of the paragraph. The closing </p> (notice the forward slash to distinguish it from the opening tag) indicates the end of the paragraph. Here is the result, when published:

[F]or though a Man doth a lawful Thing, yet if any damage do thereby befa[l] another, he shall answer for it, if he could have avoided it.

Not all tags need a closing tag, however. Some, like the image tag, are self-closing:

<img src="http://placehold.it/640x480.jpg" />

In this case, notice that the forward slash appears within the tag, at the end, and there is no separate closing tag. This only works for some tags, like the image tag and the line-break tag (<br />).

The image tag above shows another aspect of HTML tags. Many tags contain attributes with additional information, like the location (URL) of the image. You will see more of this in the tags that follow.

Now that you have the basic idea, here are the basic HTML tags you should know.

Boldface and Italics

The correct way to create bold or italic text is with the <strong> and <em> tags (not the <b> and <i> tags), like so:

<strong>This will be bold.</strong>
<em>This will be italic.</em>

Creating links using HTML is a basic Internet skill that everyone should know. It’s also easy. Here is how you would create a link with the words “Go to Lawyerist!” that goes to http://lawyerist.com:

<a href="http://lawyerist.com">Go to Lawyerist!</a>

The end result will look like this:

Go to Lawyerist!

Paragraphs

Normally you do not need to manually create paragraphs. Most websites will automatically create a paragraph whenever you leave a blank line between paragraphs of text.1

If you do want to manually designate paragraphs using HTML, this is how you would do it:

<p>This is a paragraph.</p>

Line Break

Sometimes you need to create a manual line break to get the spacing you want between paragraphs. To do this, just insert a <br /> between your two lines, like so:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu urna nec tellus bibendum pharetra sit amet sit amet purus.
<br />
Integer neque libero, commodo at rhoncus vitae, auctor vulputate nunc. Ut dictum, risus ut consectetur vehicula, dolor ante suscipit mauris, ut dapibus purus lacus nec ante.

You may have to do this more than once to get the space you want, depending on how the software you are using parses the text and HTML before displaying it.

Blockquote

The blockquote tag may be the most-obvious HTML tag. Here is how you use it:

<blockquote>[F]or though a Man doth a lawful Thing, yet if any damage do thereby befal[l] another, he shall answer for it, if he could have avoided it.</blockquote>

Lists

Creating lists in HTML is not complicated, but it requires a lot of tags. Here is what a bulleted (“unordered”) list looks like:

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

Here is the result:

  • List item 1
  • List item 2
  • List item 3

<ul> stands for “unordered list.” To create a numbered list, just use <ol> (“ordered list”) instead:

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

Here is the result:

  1. List item 1
  2. List item 2
  3. List item 3

An Alternative to HTML: Markdown

Because HTML has a tendency to obscure the text, it is not particularly good for writing for the web. It gets hard to see what you have written among all the tags. Rich-text editors (like Microsoft Word) are not ideal, either. Although they hide the markup, they tend to add a lot of formatting that can muck up the final, published result.

As a result, there are a number of alternative ways to add style to text without obscuring it. The most-popular and most-widely-supported of these is probably Markdown, developed by Daring Fireball’s John Gruber.

The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions.

That makes it an excellent makeup language for writing. Instead of worrying about formatting as you write, you can put it off until the stage when you actually need to worry what your published document will look like.

Here is an example of a paragraph formatted in HTML:

<p>To learn more about the term <em>markup language</em>, <a href="http://en.wikipedia.org/wiki/Markup_language">visit Wikipedia</a>. Here are some of the things in the article:</p>

<ul>
<li>History</li>
<li>Features</li>
<li>Alternative usage</li>
</ul>

And here is how the same paragraph would look in Markdown:

To learn more about the term _markup language_, [visit Wikipedia](http://en.wikipedia.org/wiki/Markup_language). Here are some of the things in the article:

* History
* Features
* Alternative usage

Both will look exactly the same when published:

To learn more about the term markup language, visit Wikipedia. Here are some of the things in the article:

  • History
  • Features
  • Alternative usage

The Markdown version, though, is not only more readable, it is much easier to type.

Markdown is especially popular among Mac users, but it is gaining enough traction that it is worth knowing, especially if you write for the web. WordPress, the most-popular content-management system on the planet, now supports Markdown in its editor, and Markdown is even supported by the forum software we use for the Lawyerist Lab, Vanilla Forums.

If you don’t particularly feel like learning two kinds of markup, just learn HTML. It is by far the most-widely-supported markup language, and anything that supports Markdown also supports HTML, by definition.

But if you do a lot of writing for the web, Markdown is well worth learning. To get the most from it, pick up a Markdown-compatible text editor like WriteMonkey (free for Windows) or Byword ($4.99 for iOS, $9.99 for OS X). Or use one of the great cloud-based Markdown editors, like Editorially and Draft, both free.

Learning a little HTML will increase your understanding of the Internet, and it will probably come in handy every day, once you get the hang of it.

Featured image: “Jet <li>” by Christian Dalager is licensed CC BY-NC 2.0.


  1. If you are using a rich-text editor like Word or the Visual editing tab in WordPress, you should not leave a blank line between paragraphs. It just leaves a bunch of extra space and makes the page look bad. 

, ,

  • Paul Spitz

    This is worth bookmarking!

  • Julia

    A good start, but a basic CSS tutorial would be helpful too!

    • http://samglover.net/ Sam Glover

      I might do that, at some point, but CSS is not nearly as essential to normal web browsing. HTML is useful every time you comment on a blog post. CSS is really only useful if you are designing a blog.

  • Chris

    Some great tips here Sam – thanks for taking the time to set them out!