Hypertext Markup Language (HTML) consists of a set of special computer codes referred to as “tags,” which instruct a web browser how to display a webpage. Think of it is as a collection of formatting commands (indicated by markup tags) that define the various components of a web page. The documents are written in plain text (ASCII) format, making them universally readable by different web browsers running on different computer operating systems.
Tags
HTML tags consist of a left angle bracket (< or “less than” symbol) followed by the name of the tag and closed by a right angle bracket (> or “greater than” symbol). Most tags are paired with an ending tag that has a forward slash (/ or “divided by” symbol) added to it. So a paragraph would consist of an opening tag (<p>), the contents of the paragraph, and then a closing tag (</p>). It works the same way with other tags, like the top level header tag, h1:
<h1>This Is a Top Level Header!</h1>
There are some tags, however, that stand alone. To indicate this, they include their own forward slash, like an ending tag, but at the end. For example, a horizontal rule is indicated with <hr />, and a line break by <br />.
Attributes
Tags can also have attributes. These are little sub-commands that tell the tag how to behave. They are always added inside the opening tag and have the format: attribute=”value.” Many tags require certain attributes. Take, for example, the <img /> tag. It is used to place an image on a webpage. But it must be told what that image is. So it would be coded like this:
<img src=”CoolPhoto.jpg” />
All HTML tags can accept a number of global attributes. The two most important have to do with cascading style sheets (CSS). The “style” attribute allows coders to add formatting information right in the HTML. The “class” attribute allows them to format the tag based upon a predefined CSS class.
Basic Tags
The world of HTML is extensive and varied. But there is a great deal that you can do with the most basic tags. Here is a list of paired tags:
- p: paragraph
- h1, h2, h3, h4, h5, h6: header, layers 1 through 6
- em: emphasized (normally italics) text
- b: bold text
- a: anchor (link)
Here's an example, using some of these tags:
<h2>Our subtitle is almost as exciting</h2>
<p>One of the words in this sentence is <em>really</em> exciting! It even <a href=”http://learnthenet.com/”>links to another page</a>!</p>
And it would display as follows:
Our Exciting Top Headline
Our subtitle is almost as exciting
One of the words in this sentence is really exciting! It even links to another page!
And here are the important self-paired tags:
- img: image
- br: line break
- hr: horizontal rule
Behind the Scenes
HTML documents also have a number of tags that don't have a direct effect on the way that the webpage is displayed. But they are very important. The very first one in an HTML file isn't technically a tag. It is a declaration that tells whatever program is reading it what kind of a document this file is: <!DOCTYPE html>. After that, the HTML can begin.
The first HTML tag is <html>, and it is paired with </html> at the very end of the document. Inside these tags, the code is broken up into two different parts: the head and the body. Inside the paired head tags go a number of tags that set up the document — things like loading CSS and JavaScript files. But the most basic thing the head includes is the title tag. Every HTML document needs a title — so be sure to add one.
The body part of the HTML document contains all the content that the user will see. Here is a very basic html document format:
<html>
<head>
<title>The Name of This Webpage</title>
</head>
<body>
[This is where all the content goes…]
</body>
</html>
There's a wealth of information on the internet that explains just about anything you want to know about HTML. A good place to start is the HTML Tutorial.
Code Your Own Page
These days, it's not really necessary to know HTML in order to create web pages. Word processing programs like OpenOffice can automatically convert your documents into HTML. But it can be limiting in terms of control. There are also many specialized HTML editors that make all the parts of HTML coding easier while not sacrificing control. To download HTML editors and file conversion programs visit Download.com.
But if you're feeling adventurous, why not give raw HTML coding a whirl? All you need is a text editor like Notepad and a web browser. Compose your HTML pages with your text editor and save it as a text-only file with an .html extension. Then open the file in your browser to see what it looks like. (Keep in mind that an HTML document may look different when viewed with different browsers.) You can go back to the original HTML file to edit it as often as you like. See for yourself how simple and even fun it is.