What is HTML?
Firstly, HTML is short for “HyperText Markup Language”. That may sound scary, but it simply means it is a language for describing web-pages using ordinary text. HTML is not a complex programming language.
Every web page is actually a HTML file. Each HTML file is just a plain-text file, but with a .html file extension instead of .txt, and is made up of many HTML tags as well as the content for a web page. A web site will often contain many html files that link to each other. You can edit HTML files with your favourite editor.
Once you have the essential tags sorted out, there are a number of basic tags you will use a lot in order to add content such as:
- Headings and Subheadings
- Paragraphs of Text
- Links to Other Pages
- Images or Photographs
All of these must appear between the
</body> tags, and you can learn more about them by following the links shown.
<h1> A Heading </h1>
Use headings for titles and subtitles, and make some text stand out from others. See text formatting tags.
<p> Some text </p>
Most content on a simple web page will appear in paragraphs or sections. See division tags.
<a href="home.html"> My homepage </a>
Links are necessary for users to jump from one page to another. See linking tags.
Adding your holiday photos or other images to your web page is fairly simple. See image tags.
Below is an example of some of the basic tags explained above
<html> <head> <title>this is the title</title> </head> <body> <h1>My Heading</h1> <p>This is the first paragraph of text.</p> <p>This is the second paragraph of text.</p> <p>An image: <img src="photo.jpg"> </p> <p>A link: <a href="http://www.simplehtmlguide.com"> html guide </a></p> </body> </html>
HTML tags are the hidden keywords within a web page that define how your web browser must format and display the content.
Most tags must have two parts, an opening and a closing part. For example,
<html> is the opening tag and
</html> is the closing tag. Note that the closing tag has the same text as the opening tag, but has an additional forward-slash ( / ) character. I tend to interperet this as the “end” or “close” character.
There are some tags that are an exception to this rule, and where a closing tag is not required. The
<img> tag for showing images is one example of this.
The rest of the HTML file can contain as little or as many tags as you want to display your content.
Attributes allow you to customise a tag, and are defined within the opening tag, for example:
<img src="image1.jpg"> or
<p align="center"> ... </p>
Attributes are often assigned a value using the equals sign, such as
width="50%", but there are some that only need to be declared in the tag like this:
Most attributes are optional for most tags, and are only used when you want to change something about the default way a tag is displayed by the browser. However, some tags such as the
<img> tag has required attributes such as
alt which are needed in order for the browser to display the web page properly.
Below is a basic html document, containing all the essential tags. You can copy the code below, paste it into your editor, and save as
mypage.html to start your own web page.
<html> <head> <title>My Page Title</title> </head> <body> This is where all my web page content goes! </body> </html>
Essential HTML Tags
- Definition –
- This basically defines the document as web page. It also identifies the beginning and end of the HTML document. All other tags must fall between the
- Header –
- The header contains information about the document that will not appear on the actual page, such as the title of the document, the author, which stylesheet to use and also meta tags.
- Title –
titletag defines the title that will appear in the title bar of your web browser. The
titlemust appear between the
- Body –
bodytags contain all the information and other visible content on the page. All your images, links and plain text must go between the
These four tags are special. There must only be one set of each and they must be in the correct order like in the example below. The fun and creative part comes when using the basic tags for adding content and headings.
Below is a basic html document. Notice that everything falls between the
html tags, the
title appears within the
head of the document, and that the
body comes after the
<html> <head> <title>My Page Title</title> </head> <body> This is where all my web page content goes! </body> </html>
Sections, Divisions & Lines
These are the tags used to divide your page up into sections. Effective use of these tags will mean that the page has a good structure and layout, making it more user friendly and easier to read.
- Division –
divtag defines a section or division within a HTML file. It typically contains headings, paragraphs, tables or other elements that need to be grouped together. Commonly used with css by setting the
<div class="?">attribute to set the look and feel of a section of your web page.
- Paragraph –
- Used to define paragraphs of text, much like you would see in a book. A lot of text can appear within the
</p>tags, and browsers will automatically wrap the text onto the next line once it reaches the edge of the screen. When another
<p>tag is used to start the next paragraph, the browser will add some blank space between the paragraphs. It has the following attributes:
align="?"– Alignment of text in the paragraph:
width="?"– Paragraph will occupy a fixed width or percentage of the page, default 100%
- Span –
- Used to group inline elements together, such as a few words within a sentence, in order to apply a css style to those words only. The
spantag can be used within
ptags as it does not create a new horizontal block boundary.
- Line Break –
- Equivalent to one carriage return, it is used to start text on a new line. Multiple
<br>tags in a row will create a large vertical space on a web page.
- Horizontal Line –
- The horizontal rule, often referred to as the HTML line separator tag, creates a horizontal line commonly used to visually separate sections on a page. It has the following attributes:
width="??%"– The line will occupy a fixed width or percentage of the default 100% width.
color="#??????"– Colour of the line (*)
noshade– Prevent the 3D ‘etched’ look and create a flat, solid line separator.
- No Breaks –
- If for some reason you want text to continue in one straight line, and not to wrap at the edge of the screen screen, you can use the
nobr. Note: this will force a user to scroll to the right to see the rest of the line, which is considered bad design.
Below is an example of some of the tags explained above
<html> <body> <p align="right">The first paragraph of text, aligned to the right.</p> <p>This text is now in the second paragraph. <br>A new line, but still part of the second paragraph.</p> <p>A third paragraph, and then a horizontal line</p> <hr> <p>Some modified horizontal lines:</p> <hr width="50%" size="8" align="center"> <hr noshade> </body> </html>
Text Formatting Tags
The following HTML tags are used to format the appearance of the text on your web page. This can jazz up the look of the web page, however, too much variety in the text formatting can also look displeasing.
- Header –
- There are 6 levels of headings available, from
h1for the largest and most important heading, down to
h6for the smallest heading.
- Bold –
- The text in between the tags will be bold, and stand out against text around it, the same as in a word processor.
- Italic –
- Also working the same way as a word processor, italics displays the text at a slight angle.
- Underline –
- Again, the same as underline in a word processor. Note that html links are already underlined and don’t need the extra tag.
- Strike-out –
- Puts a line right through the centre of the text, crossing it out. Often used to show that text is old and no longer relevant. Also works by using
- Preformatted Text –
- Any text between the
pretags, including spaces, carriage returns and punctuation, will appear in the browser as it would in a text editor (normally browsers ignore multiple spaces)
- Source Code –
- Text is displayed in a fixed-width font, commonly used when showing source code. I have used it on this site, along with stylesheets, to show all tags.
- Typewriter Text –
- The text appears to have been typed by a typewriter, in a fixed-width font. (*)
- Block Quote –
- Defines a long quotation, and the quote is displayed with an extra wide margin on the left hand side of the block quote.
- Small –
- Instead of having to set a font size, you can use the
smalltag to render text slightly smaller than the text around it. Useful for displaying the ‘fine-print’.
- Font Colour –
<font color="#??????"> </font>(*)
- Change the colour of a few words or a section of text. The 6 question marks represent the hex color code, see this list of colours and codes for some samples. (*)
- Font Size –
<font size="?"> </font>
- Replace the ? with a number from 1 to 7 to change the size of the font. One being the smallest and seven the largest. (*)
- Font Size Change –
<font size="+/-?"> </font>
- For an immediate change of font size with respect to the font size preceding it, this tag increase or decreases the size of the font by the number you specify. Eg:
<font size="-1">Some Text
- Change Font Face –
<font face="?"> </font>
- To show text in a particular font, use the font name such “Helvetica” or “Arial” or “Courier”. Be aware that using some fancy font from your computer means that the person viewing that page must also have that font installed on their computer too, otherwise it will look totally different to them. (*)
- Centre –
- A useful tag, as it says, it makes everything in between the tags centred (in the middle of the page). (*)
- Emphasis –
- Used to emphasize text, which usually appears in italics, but can vary according to your browser.
- Strong Emphasis –
- Used to emphasize text more, which usually appears in bold, but can vary according to your browser.
Images are used in HTML documents to one: make the page visually effective and two: display information. Images can also be used as links, but this is discussed in the topic on linking.
Although images are good for a number of things, a page with too many images often looks too cluttered and can take too long to load, which can be frustrating, and as a business aspect it could lose clients.
- An image –
- To display an image you need to specify the URL of the image using the
urlwith the filename of your image. There are several ways this can be done:
src="picture.jpg"– the filename if the image is in the same directory as the html file.
src="images/picture.jpg"– a relative path when the image is in another directory.
src="http://www.simplehtmlguide.com/images/photo.jpg"– a full URL can also be used.
- Alternate Text –
<img ... alt="?">
altattribute defines the text shown in place of an image when the image cannot load. This is actually a required attribute for valid html, and should briefly describe what the image normally would.
- Image Size –
<img ... width="?" height="?">
- An image will normally be shown actual size, but by using the
heightattributes you can change the displayed size. You can specify the size in pixels or as a percentage. Tip: specify the size using the actual size of the image in pixels to force browsers to allocate space for the image before it is even loaded, ensuring you page layout remains the same with or without images displayed.
- Border –
<img ... border="?">
- Add a border by specifying the thickness in pixels. You can also set
border="0"to remove the border added when images are used as links. (*)
- Image Alignment –
<img ... align="?">
- By default an image appears at the place specified in the html code(as with any other tag). However, you can align an image with the surrounding text or paragraph by setting any of
align="left | right | top | bottom | middle". (*)
- Spacing –
<img ... vspace="?" hspace="?">
- Adjust the whitespace (or runaround space) around an image, in pixels. Use
vspaceto adjust the vertical spacing above and below, or
hspacefor the left and right sides. (*)
Show an image using html
<html> <body> <p><img src="photo.jpg" alt="parakeet"></p> </body> </html>
HTML Linking Tags
Learn how to create links on your web page. Links allow you to jump from one page to another by clicking on the link text. You can also jump to places on the same page (called fragments), to different sections of your site, or to another web site alltogether.
- Basic Link –
<a href="url">link text</a>
- There are two main parts to a link tag: the text a user can click, and the web address they go to if they click it. The bit between the
</a>tags is the link text, and is generally displayed in blue and underlined by web browsers. The
href="url"part is the web address, where
urlcan be set in several ways:
href="example.html"– another page in the current directory
href="example/page.html"– a relative location
href="http://www.example.com/page.html"– a full address (URL).
- Link to a Fragment –
- It is often usefull to link to other places on the same webpage, such as other sections or chapters further down the page. The technical term for this is linking to a Fragment, where browsers will automatically try and scroll to that part of the page.
Fragments first need to be defined somewhere in a webpage by giving them a name, for example
<a name="fragment_name">, then links to this fragment are created by using the hash (#) character:
<a href="#fragment_name">Link</a>. To link to a fragment on another page you would simply append the fragment name to the address, for example:
- Target Window –
<a href="url" target="???">link</a>
- You may not always want to link to a page and have it load up over the one you are currently viewing. Thats where the
targetattribute comes in handy. By setting the
target="_BLANK"the page you link to will load up in a new window (or new tab in some newer browsers). Similary,
"_self", "_parent", or "_top"will open the link in the current window, the parent window (used with frames) or the top level window, respectively.
- Image as a Link –
<a href="url"><img ...></a>
- By placing an image tag between the
</a>tags, you can turn an image into a link, and clicking on that image will then load the referenced page. You may notice that the image gets a blue border just as link text became underlined. This can be resolved by setting the
border="0"attribute of the image, or using css.
- Email Link –
- A special kind of link, the
mailtonotation link instructs the browser to compose and email to the specified address using the default email program. It but does not actually send any emails automatically. You can also set a subject for the email by using
<a href="mailto:firstname.lastname@example.org?Subject=Linking">email me</a>. You may notice that I have used this type of link over on the contact me page.
Learn how to create lists on a web page. Lists are the preferred way to display items one after the other, instead of using
<br> tags. Lists have a tag to start and end the list itself, as well as a tag for each item in the list.
An unordered list is a bulleted list, similar to the menu on the right (although the menu has been altered using stylesheets to use images instead of the standard bullets.)
- Define Unordered List –
<ul> ... </ul>
- Use the
<ul>tags to define the start and end of an unordered list. A number of list items (
lielements) will go within the
- Unordered List Item –
<li> some item </li>
- Add the text for each item in between some
</li>tags. Each list item must have its own
- Bullet Type
<ul type="disc | circle | square">
- By default a browser will show a round bullet. This can be changed by using the
typeattribute of the
ultag, which will change the bullet type for the entire list.
- Item Type
- You can set the type of bullet for an item in the middle of the list by setting the
typeattribute of an
<html> <body> <ul> <li>An item</li> <li>Another item</li> </ul> </body> </html>
This list is used to create and indexed list, such as a numbered or alphabetical list.
- Define Ordered List –
<ol> ... </ol>
- Use the
<ol>tags to set the start and end of the list. A number of list items will then go between the ordered list tags.
- Ordered List Item –
<li> an item </li>
- Each item must use the
<li>tags the same as with an unordered list. But this time the browser will number each item automatically, instead of showing bullets.
- List Type
<ol type="A | a | I | i | 1">
- Set the type of list index by using the
type="?"attribute. The default style is numeric, and you can also choose from upper or lowercase, alphabetic or roman numerals.
- List Starting Position
- Set the starting number (or letter) if you dont want the list to start at
- Item Value
- You can set the value of an item in the middle of the list manually, if you do not want it to follow the previous letter or number. Simply set the
valueattribute of the item you wish to change. Note: subsequent items will follow the new value.
<html> <body> <h3> Ordered List </h3> <ol> <li>Item one</li> <li>Item two</li> </ol> <h3> Modified Ordered List </h3> <ol type="A" start="6"> <li>List item 1</li> <li>List item 2</li> <li value="12">List item 3</li> <li>List item 4</li> </ol> </body> </html>
This type of list is used to define and describe terms, much like a dictionary. Typically an entry in the list consists of a term, and a definition of that term. A browser will usually bold the term, and indent the definition.
- Define a Definition List –
- Set the start and end of a definition list. All entries go within the
dltags. Each entry will usually consist of one
- Definition Title –
- The title of a term being defined. Note: you may have a term with no definition, or multiple terms with the same definition.
- Definition Description –
- The definition of a term. Note: you can have multiple definitions for a single term.
<html> <body> <dl> <dt>Term 1</dt> <dd>Definition of term 1</dd> <dt>Term 2</dt> <dd>Definition of term 2</dd> </dl> </body> </html>
Table tags are used for displaying spreadhseet-like data neatly formatted in rows and columns. They can also be used to design page layouts by placing content into invisible rows and columns of a ‘table’.
- Table –
<table> ... </table>
- Used to define a table, it contains all row and column tags along with their content. Think of it like the
bodytag, although there must always be at least one row in a table. It has some attributes to define the table layout.
border="?"– The size of the border (in pixels) surrounding the table
cellspacing="?"– The space (in pixels) between each cell, eg. between rows or columns
cellpadding="?"– The space, or margin, between the content of a cell and its border
- Table Row –
- To start a table row, the
trtags must appear within the
- Table Cell –
- A table cell is where the content goes. Cells must exist within rows, where the number of cells in a row determines the number of columns in the table. Cell properties can be set using the attributes:
align="?"– Alignment of text in the cell:
valign="?"– Vertical alignment of the cell:
width="?"– Specify a fixed with of a cell, by default they will only take up as much space as they need.
colspan="?"– Column spanning allows a cell to take up more than one column, in order to match layouts of other rows. Replace
?with the number of columns to span.
rowspan="?"– Row spanning, similar to column spanning, forces a cell to occupy more than one row.
nowrap– No text in the cell will be wrapped onto the next line. Similar to the
nobrtag for paragraphs
- Header Cell –
- Similar to a table cell, a header cell must appear within a table row. Normally found in the first row, header cells are usually shown in bold and centered by the browser.
A simple table with three rows and two columns.
<html> <body> <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Cell A1</td> <td>Cell B1</td> </tr> <tr> <td>Cell A2</td> <td>Cell B2</td> </tr> </table> </body> </html>
Forms allow us to automate sending and receiving data from a web page, and are useful for: website and forum logins; signing guest books; web based email; online questionnaires etc.
- Form –
<form> ... </form>
- All form elements such as inputs and buttons must go within the
formtags. In most cases, a form must have the
name, action & methodattributes set.
name="?"– A unique name identifying the form, used by the action script.
method="?"– The method used by the action script,
get. For example,
postwould be used to submit data to a user-registration form, and
getis used for searches or forms that must return information.
- Input Field –
- Used to create a simple text-entry field for your form, but is also the basis for many other form input types using the
name="?"– Unique name for the input to be used by the action script.
type="?"– There are several types of form input fields,
text, password, checkbox, radio, file, image, & hiddenare among the most common.
value="?"– Initial value or data displayed in the input field when the form is first loaded.
size="?"– Defines the input size or width, typically defined in terms of number characters wide instead of pixels.
maxlength="?"– Maximum length of input field, such as the maximum number of characters for a text input.
checked– Used with
radioinputs, it sets the field default to be already checked.
- Button –
- A form button is similar to other form inputs but has it’s own set of attributes:
name="?"– Unique name for the button to be used by the action script.
type="?"– The button type, either
reset, determines whether the form is to be submitted or cleared upon pressing it.
value="?"– Text that appears on the button, such as OK or Submit.
size="?"– Determines the length (or width) of the button.
- Selection List –
<select> ... </select>
- A drop-down list, also refered to as a combo-box, allowing a selection to be made from a list of items.
name="?"– Selector name
size="?"– The minimum size (width) of the selection list, usually not required as the size of the items will define the list size.
multiple– Allows a user to select multiple items from the list, normally limited to one.
- Selection Item –
optiontag is needed for each item in the list, and must appear within the
selecttags. The text to be shown for the option must appear between the
value="?"– The value is the data sent to the action script with the option is selected. This is not the text that appears in the list
selected– Sets the default option that is automatically selected when the form is shown.
- Large Text Area –
- An input that allows a large amount of text to be entered, and allows the height of input box to be a specified unlike the standard
name="?"– The unique name assigned to the form field.
rows="?"– The number of rows of text, defines the vertical size of the text area.
cols="?"– The horizontal size of the text box, defined as the number of characters (ie. columns).
A form where you can leave your name, rating and comments
<html><body> <h3>Leave a comment:</h3> <form name="formExample1" action="formaction.php" method="post"> Name: <br> <input type="text" name="name" value="Jon Doe"> <br> Rating: <br> <input type="radio" name="rating" value="1"> 1 <input type="radio" name="rating" value="2"> 2 <input type="radio" name="rating" value="3"> 3 <br> Comment: <br> <textarea name="comment">enter comments here ...</textarea> <br><br> <input type="submit" value="Submit Comment"> </form> </body></html>
<html><body> <form name="formExample2"> <select name="selectorName" onchange="window.location=document.formExample2.selectorName.value"> <option selected>[please choose one]</option> <option value="/index.php">home</option> <option value="/cheatsheet.php">cheat sheet</option> <option value="/examplesheet.php">html examples</option> <option value="/contact.php">contact me</option> </select> </form> </body></html>
Miscellaneous HTML Tags
Tags that don’t seem to fit in any other section …
- Comment –
<!-- hello world -->
- Anything between the comment tags is not displayed by the browser, so they are used to document your html code, or sometimes for hiding sections of html that you don’t want to delete just yet.
- Document Type –
<!DOCTYPE ... >
- The purpose of the
DOCTYPEdeclaration is to define the type of HTML document to web browsers, more specifically, which versions of HTML to use. The
DOCTYPEshould appear on the first line of a file, even before the
htmltag, and will typically be similar to one of the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- META Tags –
- Meta tags contain information about the page that does not need to be displayed, but it still used by search engines and other web crawlers. They are typically used to give search engines a brief description of the page, as well as the important keywords on it. Meta tags must appear within the
headsection of the html, and have usually have two of the following attributes:
name="?"– The name of the meta tag, such as
content="?"– The actual content or value of what was specified in the
nameattribute. Can also be used along with
http-equiv="?"– An alternate way of defining names for some special meta tags such as content-type and language.
- Also see the table of Page Transition Meta Tags.
Basic use of
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta name="description" content="Meta Tags Example"> <meta name="keywords" content="html, meta, tags, example"> <meta name="author" content="Robert Duncan"> <meta http-equiv="Content-Language" content="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <!-- this page should look empty --> </body> </html>