HTML is the most popular markup language for creating web pages. Learning HTML is the first step in web design. In this lesson, you will learn parts of an HTML document, HTML tags, and contents of HTML document. At the end of this lesson try the example on your own to validate your learning.
There is no prerequisite to learn from this lesson, but before you begin to learn to create HTML example pages.
Parts of an HTML page
HTML document is divided into following sections. Each section has a purpose and specific HTML element goes into a particular section given below.
- Header Section
- Body Section
- Footer Section
Header section always stays at the top of the page. In this section, you display important elements like title of the document, header image, document type and version information, meta information. All the information related to the HTML document goes in header section.
The HTML elements go into the body section. Here you can place your text elements, image elements, videos files, audio files for users who will view your HTML page.
HTML uses markup tags to display information when viewed in a browser. A browser is a program to view an HTML document. There is two part to a simple HTML tag.
- Opening tag
- Closing tag
The html data is kept between the opening tag and the closing tag. The choice of tag depends on the kind of information.
For example, text element is kept between paragraph tags – <p> … </p> and image element is kept between <img> … </img> tags.
The syntax to use an HTML tag is as follows.
<h1> HTML page </h1>
<h1> is the opening tag and </h1> with a slash is the closing tag. The text element we want to display is “HTML page”.
The opening tag, closing tag and the content is called an HTML Element.
If you forget to add the closing tag for some element, HTML adds a closing tag automatically, unless you are using strict HTML version such as XHTML.
Contents of an HTML page
What kind of information is displayed in an HTML document? The contents of an HTML page is listed below.
- Audio files
- Video files
Text contents like headings, title, paragraph, quotes, italic text and bold text are common in an HTML document. The HTML also supports indentation, alignment of those elements.
When you click on a link or hyperlink, it takes you to another HTML page. HTML supports anchor text to display hyperlinks in a document.
Images are common way to aid text information and HTML allows embedding images using <img> elements. Also, you can control the width and the height of images to display.
Audio and Video files
You can embed audios and video files using <audio> and <video> elements. The HTML supports more than one format for Audio and Video files and also let us decide the size and format for the files.
Some video format like flash files are not recommended for performance issues, but still you can embed them inside an HTML document.
Example HTML page
In this example, we will create a simple HTML document and see the output in a browser. Visit the link below to know how to create an HTML page on your computer.
<! DOCTYPE html> <html> <head> <title> Example 1 – Simple HTML Page</title> </head> <body> <h1>Simple HTML Page</h1> <p>This is an example of simple HTML page and this is an example paragraph. </p> </body> </html>
Output – Example 1
- Duckett, Jon. 2011. HTML & CSS: Design and Build Web Sites. Wiley .
- W3Schools. n.d. HTML Tutorial. Accessed Jan 14, 2018. https://www.w3schools.com/html/default.asp.