HTML Quick and Dirty Tutorial

web code
 7io/Getty Images

HTML5 is the markup language that is used to write pages that appear on the web. It follows rules that may not seem obvious to you at first. However, in HTML5, there are only a few things you need to know in order to get started writing an HTML document, which you can do in any word processing program.

Opening and Closing Tags

With only a few exceptions, all instructions—called tags—come in pairs. They are opened and then closed in HTML5. Anything between the opening tag and the closing tag follows the instructions given by the opening tag. The only difference in the coding is the addition of a forward slash in the closing tag. For example:

<h1>Headline Goes Here</h1>

The two tags here indicate that all the content between the two should appear in headline size h1. If you forget to add the closing tag, everything that follows the opening tag will appear in the headline size h1.

The Basic Tags in HTML5

The basic elements necessary for an HTML5 document are:

  • doctype
  • HTML
  • head
  • body

The doctype declaration isn't a tag. It tells the computer that HTML5 is coming at it. It goes at the top of every HTML5 page and it takes this form:


The HTML tag tells the computer that everything that appears between the opening and closing tag follows the rules of HTML5 and should be interpreted according to those rules. Inside the tag, you'll usually find the tag and the tag. 

These tags provide the structure for your document, give the browsers something familiar to use and if you ever switch your documents over to XHTML, they are required in that version of the language.

The head tag is important for SEO, or search engine optimization. Writing a good title tag is the single most important thing you can do to attract readers to your page. It doesn't show on the page but it shows at the top of the browser. When you write the title, use keywords that apply to the page but keep it readable. The title goes inside the opening and closing tags.

The body tag contains everything you see on your computer screen when you open a web page. Almost everything you write for a web page appears between the opening and closing tags. Put these basics all together and you have:


Your title head goes here. Everything on the web page goes here. Note that each tag has a corresponding closing tag. 

Heading Tags

Heading tags determine the relative size of text on a web page. The h1 tags are the largest, followed in size by h2, h3, h4, h5 and h6 tags. You use these to make some of the text on a web page stand out as a headline or subhead. Without tags, all the text appears the same size. The headline tags are used like this:


Subhead Goes Here

That's it. You can set up and write a web page that consists of text with headlines and subheads.

After you practice with this a while, you'll want to learn how to add images and how to enter links to other web pages. HTML5 is capable of much more than this quick basic introduction covers.