Home » Web Site Design » HTML » Tutorials
Anatomy of an HTML File
HTML (HyperText Markup Language) is a document structure language. At least that was the intention of it’s creators. Applications like Microsoft Word which not only describe the struture of a document, but the appearance and formatting of all the fonts and styles. In it’s simplist form HTML was not made to describe the appearance and style of a document, but rather the structure of elements.
- Figure 1
- HTML Document Elements
HTML defines a set of elements for web pages. The examples used above are Heading, Paragraph, Bulleted List, and Paragraph. Tables are another one, but aren’t shown here. Character styles such as italics and boldface can also be defined.
HTML does not describe the page layout. It only describes the elements on the page. It’s up tot the web browser to display it with the style. Note: in HTML there are <font> tags and stylesheets, but these were thrown in as an afterthought to meet the need for more intriging layouts - ultimately it’s still up to the browser how the page is presicely displayed.
HTML was made to be cross platform - it is viewable across any operating system on any web browser. Some browsers do a better job than others.
Below is a break down of an HTML document outlining it’s major components followed by brief descriptions of each.
- Figure 2
- HTML Document outline
- DOCTYPE
- This is used to specify what HTML standard the document conforms to. This is used by web browsers, but is not neccessarily required to be viewed properly.
- HTML
- Every HTML file has to have this tag. It specifies the begining and the end of a document.
- Head
- The head is where things like the title, meta tags, javascript, and cascading stylesheets go. This portion of the document is never seen by the web surfer (unless they view the source).
- Title
- Each HTML page should have a title to describe what the page is about. Usually it is several words long. While it may not necessarilly help web page views in any way, it can help you get better rankings in some search engines - which translates into more traffic for your site because it can be found easier.
- Meta
- This is an element used within the Head element. It’s used to embed document meta-information that is not defined by other HTML elements. This Information can be extracted by servers/clients for use in identifying, indexing and cataloging information about the document. Meta tags are also helpful in obtaining higher rankings is some search engines (keywords and descriptions).
- CSS (Cascading Style Sheets)
- allow a designer to completely separate style from structure. CSS provides a very powerful way to present a web page from font size to absolute position of elements. Styles can be assigned to HTML elements which can then be viewed in most 4.0 and above web browsers. Browsers which don’t support CSS simply display the page with out the fancy styles. CSS was created with backwards compatibility in mind.
- Body
- contains all the elements that are visible to the web surfer. This is where all the elements, content, and layout of the page goes.
So that just about wraps up this tutorial.