In this chapter, we will learn some basic and essential HTML tags that are important and widely used in creating an HTML document. To understand them efficiently, let's take the example of an HTML document with basic tags.
Don't be afraid if you come across unfamiliar tags. We will explain them in detail in the coming chapters.
Have a habit of clicking the 'Try on Editor' button to see the result of the code. It will build a better understanding.
Some basic rules for an HTML document:
1. The first line of all HTML documents is a document-type declaration. <!DOCTYPE html>
tells the browser that the document is an HTML 5 document.
It is mandatory to include a doctype declaration in your HTML document. So don't forget to add <!DOCTYPE>
.
2. HTML document begins with the start of <HTML>
tag and ends with </html>
tag. We have discussed the same in the previous chapter of Basic HTML Page.
3. All tags whose contents are visible on the screen are placed between the <body>
and </body>
tags.
Now let's discuss some important tags mentioned in this example in more detail.
<!DOCTYPE>
DeclarationThe <!DOCTYPE>
declaration always appears on top of the HTML document. It is always written at the start of the HTML code at line first. It can't be written anywhere else in the document. It is the first tag in an HTML document.
It is a document-type declaration. It helps browsers in understanding the tags and codes properly. For better rendering and displaying, you must include <!DOCTYPE>
declaration in your HTML code.
The document type declaration for HTML5 is:
Though HTML is not a case-sensitive language, it is always a good practice to declare <!DOCTYPE>
as shown above. i.e. The keyword DOCTYPE in uppercase letters and its type html
in the lowercase letter.
<h1>
to <h6>
are HTML heading tags. These tags define the headings in an HTML page.
The most important heading of the page is defined with <h1>
tag and the least important heading of the page is defined with <h6>
tag.
Browsers display the contents of headings in different sizes. See the example below:
<h1>
to <h6>
Tags Example
Click 'Try on Editor' to view the result of the above code.
<p>
tag defines the paragraph of an HTML page. A paragraph starts with an opening <p>
tag and ends with a closing </p>
tag.
An HTML document can have multiple paragraphs and, hence multiple <p>
tags. See the example below for a better understanding.
<p>
Tag Example
Let's discuss some more basic HTML tags.
To add a comment in HTML codes, we use the HTML comment tag <!– comment –>
. After <!-
we write a comment and end it with ->
.
Comments are kept hidden from the browser's visible screen and they are not displayed.
An image is included in the document with HTML <img>
tag. The <img>
tag has different sets of attributes to be defined.
For example: src (The source file), alt (alternative text), width and height.
<img>
Tag Example
An HTML Link is defined with <a>
tag. The <a>
tag has an attribute 'href' where the destination is specified. Don't worry about these attributes. You will learn them in detail in upcoming chapters.
<a>
Tag Example
In the next chapters, you will study other HTML tags in detail.
1. HTML Tutorial |
2. Introduction to HTML |
3. Basic HTML Page |
4. HTML Editors |
5. Web Browser |
6. HTML History |
7. Basic HTML Tags |
8. HTML Elements |
9. HTML Attributes |
10. HTML Headings |
11. HTML Paragraphs |
12. HTML Text Formatting |
13. HTML Styles |
14. HTML Comment |
15. HTML Quotation |
16. HTML Colors |
17. HTML RGB Colors |
18. HTML HEX Colors |
19. HTML HSL Color |
20. HTML CSS |
21. HTML Links |
22. HTML Link Colors |
23. Link within Page |
24. HTML Images |
25. HTML Background Image |
26. HTML Image Map |
27. HTML Picture Element |
28. HTML Favicon |
29. HTML Table |
30. HTML Table Border |
31. HTML Table Size |