HTML Quick Reference Guide

HTML is a simple markup language used for designing web pages. There are rules to what can be done and what cannot be done with HTML.

All HTML markup, with a few exceptions, begins with an opening tag enclosed in brackets “< >”. Within these brackets contains the information that will tell the Internet browser what to display. Each tag must be closed to inform the browser when to stop the mark up for a particular part of the HTML document. Tags encompass functions like setting a paragraph, “<p>”, or creating a line break, “<br>.” The line break is considered a self terminating tag and does not require a closing tag.

An HTML document is split into sections or areas. First, the HTML document must be defined as an HTML document by the opening tag “<html>” and closes at the end of the document with “</html>”. All of the information and mark up will be contained within these tags.

After declaring the document as an HTML document the header section is introduced. This area contains the title of the document and looks like this: “<head><title>This is My Page</title>”. The text “This is My Page” will be displayed as the title of the page at the very top of the browser; it is also displayed in tabs if the user has tabbed browsing. The header section is also where a user will attach a style sheet or set up scripting such as javascript or php for dynamic pages.

Headings are used to denote sections of the web page; sections for content and text. Heading sizes are predetermined and have weight added to them; weight is essentially making the text bold. There are six headings and the largest is “h1”. They get smaller as the number gets larger. For example “<h4>” is smaller than “<h3>”.

These headings allow a designer or author to place emphasis on a particular section of the web page such as:

<h4>About Us</h4>

or

<h5>New Products</h5>

Each of these tags are referred to as elements and there are two kinds of elements in HTML; block and inline sometimes referred to as text elements. All of the information of an HTML page is contained in the “<body>” tags; that is all of the information that is to be displayed to a visitor of the web page. Block level elements include paragraphs, address tags, lists (both ordered and unordered), as well as headings, divs and forms. Within these block elements the inline or text elements are placed. These include such tags as bold, italics, image tags, links, line breaks and many others. It is important to note that inline elements cannot contain block level elements. For instance, “<i><p><br>italic</p></i>” would be incorrect and the browser will not display the mark up as intended. There are some exceptions to this.

Images are a special breed of mark up language; they are self terminating tags and require no closing tag. An image tag has several parts to it and starts with “<img />”. Notice the trailing forward slash; this tells the browser that it is a self terminating tag. with the image tag an HTML author needs to tell the browser where to get the image with the “src” attribute. So the tag will look something like this: “<img src=”” />”. The quotes in the img tag will contain the address or location of the image, “http://www.webaddresshere.com.” Along with the src attribute, an image could have several other attributes as well like alt=”” or title=””. The alt attribute will display alternate text if the image cannot be displayed and the title is the title of the image itself.

Forms allow for information to be passed from the page to the server and is used on virtually every web page. Forms require a few special tags such as <input checked=”0″ disabled=”true” readonly=”true” type=”text”>” where the information to be transferred is to be entered, and “<button>”, which is a button, to submit said information. Forms can be controlled by scripting as well as basic HTML. Along with these attributes like “type” and “value” may be used to signify different areas in the form. It is also important to note that special characters, such as &, <, and > need to be given special treatment in HTML. These characters will be recognized as part of the markup if not given special treatment. For instance “&” needs to be coded as “&” and “<” needs to be “<“. The beginning “&” tells the browser that it is a special character and the “;” tells the browser that the character has ended. Many more characters need to be handled in this way to achieve proper representation on the web page.

LINKS:
Special Characters in HTML
An Overview of HTML Elements
HTML Tutorial from W3C
Web Design Course
Structure of HTML Documents
HTML Forms Tutorial
HTML Headings Basics
Web Site Programming and Development
HTML Header Resources
Headers in HTML Documents
A List of HTML Attributes