HTML
Toolkit > HTML > HTML
What is HTML?
Show
Hide
HTML stands for Hyper Text Markup Language and is the main publishing language of the World Wide Web (WWW).
It is a very simple language to use and understand, and anybody can come up with a simple web page within a short time using a simple text editor.
Explore Deeper
Hide
A brief history of HTML
HTML 2.0
HTML 2.0 (RFC 1866) was developed by the IETF's HTML Working Group, which closed in 1996.
HTML 3.2
This is the first recommendation for HTML by W3C which represented the consensus on HTML features for 1996.
HTML 4.0
This was first released in 18 December 1997 as a W3C recommendation. In 24 April 1998, a second release was then issued with changes limited to editorial corrections.
HTML 4.01
The latest version that most people are using today. It is a revision which fixes all the minor errors that have been found since HTML 4.0.
TOP
Getting Started
Show
Hide
If you are using Windows operating system, start with Notepad. For Mac OS, try Simpletext.
Save your home page as index.html. This is the default start page name used by the ThinkQuest server (and most open source web servers in the world) to depict the home page. Web browsers or servers are generally configured to look for index.html to load a URL.
For other pages, save them with meaningful names with the extension .html. Of course, saving in other forms, such as .htm works, but it is good practice to be consistent to reduce confusion when linking up the site.
Also, do not use long file names or spaces in the file name e.g. about the team.html. This gets translated to about%20the%20team.html when accessed from the browser location bar and diminishes the professionalism of the site. Adopt a lowercase naming convention as the ThinkQuest server is case-sensitive i.e. team.html is different from Team.html.
TOP
What makes up a HTML document?
Show
Hide
A HTML document consists of a starting "HTML" in an angled bracket: <html> and closes with an ending tag, </html>. This contain a header section <head> </head> followed by a body section <body> </body>.
In the header, it is recommended to include 3 important meta tags:
<meta name="keywords" content="thinkquest,website" />
This meta tag specifies the keywords of the page, and is an important item of information used by search engines when indexing the web.
<meta name="description" content="A web building guide for ThinkQuesters" />
This is the description that will be displayed on search results, an important tag accompanying the previous one.
<meta name=""revised" content="ttk, 08/04/07" />
This tag allows people to know when the page is last revised, which is an important infomation to user especially for dynamic content which changes rapidly with time.
View Flash illustration of the meta tag
The title tag <title> </title> is also included in the head section. It contains text that is displayed at the top of a browser window, on tab pages in tab-enabled browsers and also on the desktop's taskbar. It serves as important information to identify the page.
Other tags that are often used are the link tag and the script tag which links external files like CSS and JavaScript files used in the site. Check out our CSS and JavaScript sections for more details.
The body section contains other element tags to define the organization of the content. It should be defined meaningfully according to structure and not to presentational needs.
Here is a very basic template you can use:
<html>
<head>
</head>
<body>
</body>
</html>
Explore Deeper
Hide
<!DOCTYPE> Declaration
<!DOCTYPE> is not an element.
It is used to declare the Document Type Definition (DTD) being used to describe the current HTML page. The purpose of DTD is to define the legal productions of a particular markup language, defining details such as tags and attributes.
<!DOCTYPE> should be the first item in a proper HTML document. This is most useful for "parsers", as it declares the version of HTML the document is written in, and thereby allowi the parser to interpret the coding.
A rigorous HTML-checking program will reject any documents on the web that do not include it. Make sure this is included if you want your webpage if you want your website XHTML valid. Please refer to the XHTML section for more details.
This take the advantages of HTML's presentation feature to ensure backward compatibility for softwares that does not yet support Cascading Style Sheet. It allows us to use <iframes> but does not allow us to use frames.
You can refer to W3Schools Doctype page for reference. We would recommend that you use XHTML declarations instead, although these declarations allow deprecated features to be used, mostly for old browsers.
TOP
Why tags and what they really are
Show
Hide
The root element, the html tag, should be something like this:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">. This marks the document a XHTML one.
Tags define what is to be shown in a browser. It allows content to be structured, and subsequently formatted (in terms of size, style, color and other presentational attributes) by CSS.
Let us take a look at some examples:
<h1> Hello! </h1>
The h1 tag marks up the "Hello!" text, making it a heading element in the document.
For heading tags, h1 tag defines the highest level heading, while h6 tag defines the lowest (and the smallest too).
Here is another example:
<p> This text is a paragraph </p>
By putting a p tag in front of the text, it becomes a paragraph element. A paragraph element, by default, structures the text as a block. This may be similar to the previous h1 example. Thus, it is important to choose what tags is most appropriate to mark up the text. Remember to end it with a closing tag.
TOP
Empty Elements
Show
Hide
Empty elements such as the line break, <br /> or the horizontal rule, <hr /> contains no text. They are elements which add additional formatting to the document.
Examples:
<p> This <br /> is a para <br /> graph with line breaks </p>
Just to note, the br tag should be closed in itself with / since it is an empty element. Without closing, it works as well, but we recommend that you close it so your page will be XHTML valid. Visit the XHTML section for more information.
View Flash illustration of using line breaks
TOP
Comments
Show
Hide
You just need to put <!-- comment here --> to store comments in the HTML document. It will be ignored by the browser and will not be displayed.
Comments aid developers and other people maintaining the website by telling them what each element contains. It works exactly like comments in software source code. In ThinkQuest, there may be more than one person working on the HTML code, so comments will definitely make things clear for everyone in the team.
View Flash illustration of using comments
TOP
Attributes
Show
Hide
With the use of attributes, we will be able to extend the capabilities of elements, such as to control fonts, border spacing, text alignment and many more.
For example, <img src="image/image.jpg" />
With the src attribute set, the document will link the image from the specified target to the page, displaying the image on the page.
View Flash illustration of adding attributes
TOP
Nesting Elements
Show
Hide
Elements can be nested inside other elements.
For example,<div> <a>Text</a> </div>
The anchor element is contained in the division element. Nesting elements are common in a webpage. It is important to note that the order of nesting is IMPORTANT for proper display by the browser.
TOP
Some Gentle Reminders
Show
Hide
Using empty paragraphs (p tag) to insert blank lines is a bad habit. Use the br tag instead. Putting a p tag does not serve its real purpose.
It is always good practice to use a closing tag. The next version of HTML, the XHTML, is stricter in enforcing this markup rule.
References:
- "W3Schools Online Web Tutorials". W3Schools. 23/2/2007 <http://www.w3schools.com>
- "W3C". World Wide Web Consortium. 23/2/2007 <http://www.w3.org>
Visit the
References Page for all references used in the site.