HTML Basics: How to construct a HTML document if you never have!

HTML Basics

Note: The context of this introduction to HTML is aimed at version 4 of HTML.

What is HTML?

HTML is an acronym, standing for Hypertext Markup Language. Its a language that can be transferred around the Internet and read by a Web Browser, such as Microsoft Internet Explorer, or Netscape Navigator. Markup tells your browser how your document is structured, and to varying extents, what it looks like. All content is defined by the markup "tags" of HTML.

An HTML tag is a container for whatever you put within that tag. For example, the bold tag <b> is used to make text bold. If you want the words "Hello everyone" to be in a emboldened style on your document, you would then encapsulate it within bold tags. For example:- <b>Something Important to remember</b>*

Before we go any further, we'll run through the required steps to create a valid HTML document.

Basic Document structure

Every page must contain an opening <HTML> "tag" - thus indicating to the browser that the of code is markup to be rendered.

The <HEAD> section follows, which will contain whats known as document headers. These headers don't actually render anything visible to the end user, but provide information about that document (Metadata) and varying other references to scripts or stylesheets.

The head section also contains the <TITLE> tag which displays on the blue bar at the top left of the browser window and also provides the text for a favourites listing. After the title tag is opened and the text inserted, the tag must be closed using </TITLE>. When all the page headers are set, the head section is closed, by entering </HEAD>.

The section of a web document where the majority of content and markup is displayed and rendered, is within the <BODY> tag. Commonly, the body tag will contain the bulk of tables, images and links. After the content of the webpage has finished, the body tag is then closed (</BODY>), and the whole document closed by </HTML>

Tip: HTML elements (for HTML 4) are not case sensitive, so something scripted as <hTmL> will work just as <html> or <HTML> would. However, using the same case across documents is good practice for scripting/programming as a whole, as consistency is a good asset. XHTML, which is the future of HTML, will require "well-formed" documents and as such will not allow upper case tags or combinations of upper and lower case.

Fig 1: Generic HTML page structure
basic HTML document structure

As you can see in the illustration above, there is another essential piece at the very top. This is a piece of metadata again, and its not even within the structure of the document, so as you would expect, it displays nothing on screen. This is a very important inclusion as it defines the document type - which is not a requirement, but it should be included as part of every web document.

This particular document states HTML PUBLIC, which is pretty self explanatory, the W3C are the body who regulate and standardise markup languages such as HTML, DTD is the "document type definition" HTML4.0 is the particular specification of HTML we are using, transitional is the type of document we have created and finally, EN shows that the language is English.

For an HTML document to validate correctly, it MUST have this document type line, before the <HTML> tag.

HTML elements, attributes and structure

HTML elements can be manipulated using attributes contained inline, within a block of source code.

For example:
The anchor element <a> is for defining hyperlinks. On its own, it does very little, but by adding the href attribute (<a href="page.html">), the anchor now has a reference to a document, which when clicked, would load that document.

It could be added to further by including a definition for the target of the link: <a href="page.html" target="_blank"> which instructs the browser to open a new browser window, before loading the document within that window.

Almost all HTML elements can be customised by the use of attributes and there are a great many attributes at the disposal of a developer to use.

Structure and nesting

HTML tags are opened and closed in a structured, hierarchical way. The nesting of HTML is important in order for the output to appear how you expect it to in your browser.

Fig 2: Some correct markup?

The above example is incorrect. the closing </a> should be before the closing </p> tag. Internet Explorer has the capacity to "fix" markup errors, but if viewed in a stricter browser such as Netscape or Opera - incorrect markup will not appear as expected.

Fig 3: Corrected markup.

The line is now correct, as the paragraph and anchor tags have been opened and closed correctly. There are a few cases where nesting can take place, but this is predominantly within tables, which are made up of multiple tags. For the most part, HTML tags must be opened and closed in a structured fashion.

That concludes this introduction to HTML 4.0. HTML and its new incarnation, XHTML are simple languages, but can be made increasingly complex with the use of stylesheets, scripts and server side languages. For more on HTML and XHTML, check out the useful links below.

Go to: Home | Client side tutorial links | Top |

Useful Links: (External links open in a new window)

Advanced Web design specification - great site for language specification.
The world wide web consortium - The people who define document standards.
htmlhelp.com - A good site for all things HTML related.
htmlgoodies - Get more out of your documents with some cool tutorials and lessons.

Remember, if you get stuck or need to ask any questions, register with the forums and tell us about it!

Partners

Advertise here!

Ads

Reseller Web Hosting