Skip to main content

Introduction to HTML: HTML

A bare bones introduction to HTML coding



The most important characters in HTML are:

1 -- angle brackets (<    >), which enclose HTML codes, and

2 -- the forward slash (/), which is used to "close" HTML expressions

HTML tags enclose the elements or sections of the web page they're intended to affect. Tags are differentiated -- and hidden -- from the content of the web page by the presence of angle brackets, i.e., < >. If I wanted to bold the word HTML in code it would look like <b>HTML</b>, or <strong>HTML</strong>

Note that tags affecting a section of the text must be closed. This means adding a forward slash (/) before the tag is repeated at the end of the section, e.g., </p>

Attributes & Values


Attributes are added to simple HTML tags that change how that tag behaves. Most tags have default attributes, but attributes can alter those. For example, the tag that produces a horizontal rule, <hr />, produces a line that looks like this:

Its default is to be centered, extend across 100% of the available width, and be one pixel thick. But adding an attribute, such as "height," which affects thickness, or "width," in addition to a value, a numerical quantity or percentage, will change its appearance, e.g.,

<hr width="50%" align="right" /> produces this horizontal line:




Specific values are placed in quotation marks following the attribute. A value can be a specific size, color, font face, etc. Attributes and values can be applied to tags such as <font>, <img> (e.g., image height and width), <p> and many others, for example:

<font color="red"> produces red text.

<font size="+2"> doubles the size of the default text.

HTML Syntax = Tags, Attributes, and Values

In summary, here's the syntax of a typical HTML expression:

<tag attribute="value">


<font size="+2" color="red">

font is the tag
size and color are attributes
"+2" and "red" are values.

And of course you must close the tag when you want those style characteristics to end, e.g.:

<font size="+2" color="red">This is big red text.</font>

Size values can be expressed as either relative (percentage, proportion) or absolute (a specific numerical value). In the example above, the "+2" means the font should appear at twice the size of the default.