Using HTML5 and CSS to Create a Website

Web Page Quick Reference

If you encounter terms about web page construction in your reading on this website that you don't understand, you can refer to our quick reference for more information.

Anchor Tag
Basic Code
Body Tag
Division Tag
Embedded Style sheets

Heading of Document
Head Section
Heading elements (1-6)
Horizontal Rule
Images as Hyperlinks
Images in Paragraphs

Intradocument Hyperlinks
Inline Style Sheets
Meta Tags
Paragraph Tag
Span Tag
Style Sheets
Title Tag

Anchor Tag

The anchor tag <a></a> is used to create hyperlinks on a web page. See Hyperlink.


The body section of an HTML document will actually include the document heading and the footer of the page. It will contain all the text that is visible on the web page.

Body Tag

The body tag <body></body> consists of 2 tags (open and close) that enclose or contain the code that produces the visible content of a web page.

Body Tag - HTML Code Tutor

Basic HTML Page Code

The actual HTML code for a basic web page is very simple:
Hello World

This code saved in a text file with a .html extension and viewed with a browser, would produce the words Hello World on your computer screen.

Basic HTML Page - HTML Code Tutor

Division Tag

The division tag <div></div> can be used to divide a web page into sections.

Division Tag - HTML Code Tutor

Embedded Style Sheets

Embedded style sheets are placed in the head section of a web page.

Embedded Style Sheets - HTML Code Tutor


Fonts are type faces. They should be designated using CSS (style sheets). Some of the most commonly used are arial, verdana, tahoma and times new roman.

Fonts - HTML Code Tutor


New in HTML 5. Previously, a footer was placed at the very bottom of a document. It would contain copyright information, company information and sometimes information about the age of a web page.

In HTML 5 you can use them with sections and have several footers on the same page.

Header Tag


New in HTML 5. Can be used as page or section header.

Header Tag (HTML 5)

Head Section

The head section of a web page is enclosed in these tags: <head></head>. It is very important. It contains your title tag, meta tags and other information for the visiting browser. It contains information for search engine spiders or bots that is used to index the web page and determine its ranking.

Heading Elements (1-6)

The heading element <h1></h1> is used to display large letters at the top of a page or paragraph. The heading element is important not only for good page structure, but is believed by some to be used by search engine spiders in page ranking. Heading elements should be keyword rich. They come in 6 different sizes. H1 is the largest.

Heading element (1-6) - HTML Code Tutor

Horizontal Rule Tag

The horizontal rule <hr>tag simply produces a line on the page for separating page sections or paragraphs.

You can also use borders for this purpose.

Horizontal Rule Tag - HTML Code Tutor

Hyperlinks are the underlined words on a web page. When they are clicked the user is sent to a desired location set in the anchor tag code.

Anchor Tag - HTML Code Tutor

Inline Style Sheets

Inline style sheets can be placed in the actual code of the web page. They are placed as an attribute of a tag. style="". Example: <h1 style="color: #ff0000"></h1>. They should be used sparingly, as they add to the size of a web page.

Using Inline Style Sheets - HTML Code Tutor

Intradocument Hyperlinks

Intradocument hyperlinks are often used to send a user to a location on the same web page that the hyperlink is located on. This document is an example. It requires the use of 2 anchor tags. They can also be used to send a user to a specific location on another web page, defined by the <a name=""></a> tag.

Intradocument Hyperlinks - HTML Code Tutor

Images as Hyperlinks

Images can be used as hyperlinks.

Images as Links - HTML Code Tutor

Images on Web Pages

Images are pictures that are placed on web pages. The most popular file formats for images are GIF, JPG and PNG. Other formats can be used but some browsers may not recognize them.

Images - HTML Code Tutor

Images in Paragraphs

Images can be placed right in your paragraphs. Their location is set using the align attribute.
Example: <p> <img align="right">Some text in the paragraph </p>

Images in Paragraphs - HTML Code Tutor

Layouts for Web Pages

Our basic layouts or web page structures are produced using single row tables.

Webpage Layout - Website Design Tutorial

Meta Tags

Meta tags <meta></meta>are placed in the head section of an HTML page. The most common are description and keywords. They are used to supply information about the content of the page for search engines. They do have other purposes.

Meta Tags - HTML Code Tutor

Paragraph Tag

Paragraphs on a web page are controlled using the paragraph tag <p></p>. The fonts and alignment properties for paragraphs are best set using style sheets. If you are still using an HTML editor that uses inline coding for defining fonts - GET RID OF IT!.

Paragraph Tag - HTML Code Tutor

Span Tag

The span tag <span style=""></span> is an inline tag that can be used to change the appearance of text within a paragraph. You can add color or bolding, change the size or even the style of the font for emphasis.

Style Sheets

Style sheets (CSS) are used to format the appearance of a web page. The can be placed in a separate text file, in the head section of a document or as inline code.

Style Sheets - HTML Code Tutor


Tables are structures on a web page that can be divided into rows and columns. They are used to display data in chart form.

Basic Tables - HTML Code Tutor

Template - Web Page Template - Website Template

A template, web page template or website template is a prebuilt web page that can be modified to suit a user's needs. The web page can be completed by adding your own text and images. Templates can be a single web page or they can be several linked web pages.

Build Template - Website Design Tutorial

Title Tag

The title tag <title></title> is one of the most important elements of a web page. It is found in the head section of all web pages. The text between the title tags appears on the blue bar on the top of the browser window.

It is one of the most important factors used by search engine spiders to index or rank your page. It should be keyword rich.

It should also be written in such a way that it attracts the attention of surfers who will see it in a list of pages returned by a search engine query.
Welcome, won't get it!.


Cascading Style Sheet - Code used to format the apperance of text and structures on a web page.


Liquid web pages are constructed in such a manner that they adapt to different monitor resolution settings and browser widths. Best results are obtained by setting page and element dimensions in percentages, rather than absolute values.