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

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:

The Head Element


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.

  • Used by search engines
  • Should convey all the necessary information in a compact manner
  • Ideally not more than 60 characters
  • Focus on using main keyword phrases
  • Should be written for human readers

Good examples:

Bad Examples:


A style sheet (CSS) fragment affecting only a single page can be defined within tags. However, it is important to note that a style sheet which is shared amongst multiple pages should be defined externally, and linked using the tag.

Example of style tag:


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


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.

  1. The Structure of an HTML Document
  2. Basic Formatting Codes in HTML
  3. Advanced Formatting in HTML
  4. How to Build Forms in HTML