HTML Introduction

Versions

There are many different versions of HTML. This site will teach HTML 5, the newest version, which isn’t fully supported yet on all major web browsers, but will become the standard version in about a year.

Tags

HTML uses Tags to define a content section in an HTML document. These tags almost always come in pairs, and the browser will display anything inside of the tags according to what the tag is. As a simple example the “<p>” tag defines a paragraph of text in an HTML document.

<p>This text, being between the paragraph tags, will be displayed by a browser as a paragraph.</p>

Note that the closing tag has a “/” in it, which tells the browser this is the end of the content section, specifically the paragraph in our example.

Certain tags, called self-closing tags, don’t come in pairs because there isn’t any information that needs to go between two tags, like text in a paragraph does. These tags are formatted a little differently. Horizontal Rules, the lines that run horizontally across a page to break up content, are an example of a self closing tag.

<hr />

Self closing tags have their slash at the end of the tag, like the example above. This tag instructs the browser to insert a Horizontal Rule, and there is no need for any additional information, so the tag closes itself. Other examples are Line Breaks (<br />) and images (<img />).

Attributes

Attributes provide additional information inside of a tag to define parameters for the element. An Image tag, for example, uses a Source attribute to define where the image file is that will be displayed. It also uses an Alternate Text attribute to define text that is displayed in place of the image if the image itself is missing or otherwise can not be displayed.

<img src=”smiley_face.jpg” alt=”Smiley Face” />

Attributes come in a pair of an Attribute and a Value, as seen above. The Attribute “src”, representing the image source file, has a Value of “smiley_face.jpg”. They are formated with the Attribute’s name followed by an equals sign and the value in quotation marks. Attributes can be added to all HTML tags, and are required by many, to add functionality to a site. Another example is an Anchor tag, also known as a hyperlink. The Anchor uses the attribute “href”, or Hypertext REFerence, to define where the link will go. The text inside of the Anchor tags is then read by a browser as a link, and is displayed as such.

<a href=”http://www.example.com”>Go to Example.com!</a>

Basic HTML Document Structure

An HTML document has two basic sections: the header, which contains information about the web page, and the body, which contains the page content. Tags are used to define what information is in the header and what information is displayed as part of the body of the page, as seen in the following example.

<html>
<head>
<title>This is the Page Title!</title>
</head>
<body>
<p>Here is a paragraph that will show on the page. It is all just normal text typed in here as a quick example for you to look at. <a href=”http://www.homestarrunner.com”>Check out Homestar Runner for some funny stuff.</a></p>
</body>
</html>

Notice how there is an HTML tag pair wrapping the rest of the code here, and that tags can be placed inside of other tags, or be wrapped by another tag pair. This is how we set up the structure of a web page, by nesting tags inside each other, like the Anchor inside of the Paragraph tags, and the Paragraph inside of the Body tags, and the Body inside of the HTML tags.