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
The anchor tag <a></a> is used to create hyperlinks on a web page. See Hyperlink.
Body
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.
Basic HTML Page Code
The actual HTML code for a basic web page is very simple:
<html>
<head></head>
<body>
Hello World
</body>
</html>
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
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.
Footer
<footer></footer>
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
<header></header>
New in HTML 5. Can be used as page or section header.
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
Hyperlink - Anchor Tag
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.
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 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.
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
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!.
CSS
Cascading Style Sheet - Code used to format the apperance of text and structures on a web page.
Liquid
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.