HTML basics
HTML documents have a particular structure and use what are called tags to markup data.
This lesson focuses on:
- What is a tag?
- What is an attribute?
- What is an element?
- Including comments
- The beginning of an HTML document
- The head section of an HTML document
- The body section of an HTML document
- The end of an HTML document
- A complete HTML document
What is a tag?
The tag is the most fundamental concept in HTML.
- Tags are sorrounded by < and > symbols (called angle brackets)
- Most tags in HTML have an end tag, some do not
- Tags are NOT case sensitive, so whether you use upper case or lower case tags is up to you
Example:
<i>this text will be italic</i>
Output:
This text will be italic
The above example is of the <i> tag - a tag which produces italic text. In this example, the <i> tag is used with its end tag </i>. The text sorrounded by these two tags will become italic.
When using a tag that has an end tag, its end tag will be the same but with a / symbol in front of the first angle bracket.
Example:
<b>bold text</b>
One tag in HTML that does not have an end tag is the <hr> tag. The <hr> tag is used to create a horizontal line across a webpage.
Example:
<hr width="40%" />
Output:
You probably noticed the extra data in the <hr> tag from the above example - specificially the width="40%" part. This is called an attribute.
NOTE: When using a tag that does not have an end tag, use the / symbol before the closing angle bracket as in the example above.
What is an attribute?
An attribute is a piece of data within a tag which sets the value for a certain property of the tag.
NOTE: Attributes provide details about the elements on pages and are located in start tags only, not in end tags.
Example:
<font size="6" color="blue" face="Times New Roman"> Some text </font>
Output:
The tag from the above example is the <font> tag. This tag is used for working with text and is covered in detail in the next lesson.
NOTE: The <font> tag is deprecated in HTML 4.01
What is an element?
An element in HTML is the grouping of a start tag, the data that comes after it and an end tag.
Example:
<b>bold text</b>
Including comments
Comments:
- are declared so that code would be easier to understand and navigate
- are not seen on a webpage, only within the source code
- can be placed anywhere within HTML source code
- can span as many lines as necessary
- declared with a starting <!-- and an ending -->
Syntax for creating comments:
<!-- comment(s) here -->
Example:
<!-- This comment will span five lines here is the second line of the comment here is the third line of the comment this comment will not be seen on a webpage, but only within the source code of a webpage. -->
The beginning of an HTML document
An HTML document begins with the <html> tag.
The head section of an HTML document
The head section of an HTML document contains important information about a webpage such as the pages title and meta tags. The head section of an HTML document begins with the <head> tag and ends with the </head> tag.
Example:
<head> <title>Page 1</title> </head>
In the above example, we introduce the <title> tag. This tag declares the title for a webpage. In this example, the title is set to 'Page 1'. The title of a webpage can be seen in the top left corner of the web browser.
The body section of an HTML document
The body section of an HTML document is where all the content is placed that will actually be seen on a webpage. The body section of an HTML document begins with the <body> tag and ends with the </body> tag.
Example:
<body> <h1>Here is some text in a big header size</h1> <br /> Here is an image of a swan: <br /><br /> <img src="swan.jpg"> </body>
The above example will create a webpage which contains two lines of text and an image. The first line of text will be in a big heading size followed by a line break. The second line of text will be in a regular text size followed by two line breaks. An image will be displayed under the second line of text.
Output:
Here is some text in a big header size
Here is an image of a swan:
The end of an HTML document
An HTML document ends with the </html> tag.
A complete HTML document
An example of a complete HTML document:
<html> <head> <title>An HTML document</title> </head> <body> This is an HTML document. </body> </html>
The title of the document created by this code will be 'An HTML document'. The text 'This is an HTML document.' will be printed to the screen.
Tutorial
A step-by-step guide to writing your first HTML document
Examples
Document background color
This examples demonstrates how to make the background of a webpage a certain color.
Including comments
This example demonstrates declaring comments on a webpage.
Exercises
Create a webpage that prints your name to the screen. [See solution]
Create a webpage that prints the numbers 1 - 10 to the screen. [See solution]
