HTML Basic Web Page Coding - Tips for Designing the Basic Structure of a Web Page in HTML

Maureen Cutajar
Categories : Web development ,Internet
Tags : Internet web development topics HTML articles

Page content

Basic HTML Web Page Coding

The element contains all the information that pertains to the document that does not form part of the actual content. Information inserted in the element include the document’s title, the keywords used within the document, and other relevant data such as style sheets that do not form part of the document’s content. Elements that are inserted in the element are not rendered as content by Internet browsers.

The element contains the entire document’s content. As regards the presentation of the content, this can either be specified in the body of the document or via style sheets. The latter method is now the preferred method to specify the document’s presentation and thus the attributes relating to presentation have become scarce in the element. Everything relating to content including text, images and graphics is placed in the element.

A minimal HTML page follows:

Document Title

Some Data

The Head Element

Title

The element is a mandatory element in each HTML document. This title is the title that is displayed in the Internet Browser’s title bar. It is important that the titles chosen are context-rich to indicate to both users and search engines what the document is about.</p> <ul> <li>Used by search engines</li> <li>Should convey all the necessary information in a compact manner</li> <li>Ideally not more than 60 characters</li> <li>Focus on using main keyword phrases</li> <li>Should be written for human readers</li> </ul> <p>Good examples:</p> <ul> <li> <title>Section One of the Modern Music Guide

Cassia Estate | Your Mdina Real Estate Agent

Bad Examples:

Section One
Cassia Estate Broker for Mdina and neighboring towns real estate listings, home buying, selling, leasing and much more

Style

A style sheet (CSS) fragment affecting only a single page can be defined within

Link

The element defines the relationship between two linked documents. It is an empty element as it only contains attributes. The element can appear any number of times linking different resources.

The following are supported attributes that can be included in the element:

href - The target URL of the resource
media - on what device the document will be displayed (screen, ttv, tv, projection, handheld, print, braille, aural, all).
rel - the relationship between the current document and the targeted document (alternate, appendix, bookmark, chapter, contents, copyright, glossary, help, home, index, next, prev, section, start, stylesheet, subsection)
rev - the relationship between the targeted document and the current document (alternate, appendix, bookmark, chapter, contents, copyright, glossary, help, home, index, next, prev, section, start, stylesheet, subsection)
type - the MIME type of the target URL

Metadata

A element in an HTML documents is an important aspect for allowing search engines to recognize the content within the document. The tag is used to identify selected properties of a document including the description of the document, the author along with a list of key words. Meta tags are identified via the name and content attribute.

The name attribute identifies the property and the content attribute specifies the property’s value. For example, the following declaration sets a value for the Author property:

Some common elements are the following:

description – Page description. Used by some search engines
keywords – List of comma separated keywords. Ideally not more than 25 keywords. Used by a few search engines
robots – With a value of NOINDEX, a search engine will not index this page

The Body Element

Spaces in an HTML document are collapsed meaning that any number of spaces count as one. Also, in HTML a new line counts as one space.

All body tags support the following list of core attributes:

id – the identifier of the element
class – the CSS class of the element
title – the title of the element. Used as a tooltip in Internet browsers
style – inline CSS of the element

All body tags, except br, frame, frameset, hr and iframe support the following list of language attributes:

dir – the text direction for the element
lang – the language code

Headings and Horizontal Rule

The

to

tags define the headers that are inserted in a document.

defines the largest header in a document and this should be used solely for the top-level heading, whereas the

defines the smallest header.

The
tag inserts a horizontal line on the page.

Naturally in the element of a document users can define the font styles with HTML coding, create lists and tables as well as HTML forms. All these features involve HTML coding that will be visited in the HTML Web Page Coding series.

This post is part of the series: HTML Web Page Coding

This series will guide users through a number of articles that explain basic HTML web page coding starting from the basic elements of an HTML document to advanced HTML coding that includes how to insert a table and build forms in a web page with HTML code.