HTML Basics

22 Jun, 2022
In this article, we will see the HTML Basics by understanding all the basic stuff of HTML coding. There are various tags that we must consider and include while starting to code in HTML. These tags help in the organization and basic formatting of elements in our script or web pages. These step-by-step procedures will guide you through the process of writing HTML.
Basic HTML Document: Below mentioned are the basic HTML tags that divide the whole document into various parts like head, body, etc.
Every HTML document begins with a HTML document tag. Although this is not mandatory, it is a good convention to start the document with this below-mentioned tag. Please refer to the HTML Doctypes article for more information related to Doctypes.
<!DOCTYPE html>
<html> : Every HTML code must be enclosed between basic HTML tags. It begins with <html> and ends with </html> tag.
<head>: The head tag comes next which contains all the header information of the web page or documents like the title of the page and other miscellaneous information. This information is enclosed within the head tag which opens with <head> and ends with </head>. The contents will of this tag will be explained in the later sections of the course.
<title>: We can mention the title of a web page using the <title> tag. This is header information and hence is mentioned within the header tags. The tag begins with <title> and ends with </title>.
<body>: Next step is the most important of all the tags we have learned so far. The body tag contains the actual body of the page which will be visible to all the users. This opens with <body> and ends with </body>. All content enclosed within this tag will be shown on the web page be it writings or images or audio or videos or even links. We will see later in the section how using various tags we may insert mentioned contents into our web pages.
The whole pattern of the code will look something like the below code example.
Example: This example illustrates the HTML basic structure.
HTML
<html> <head>    <!-- Information about the page -->    <!--This is the comment tag-->         <title>GeeksforGeeks</title></head> <body>    <!--Contents of the webpage--></body> </html>
This code won’t display anything. It just shows the basic pattern of how to write the HTML code and will name the title of the page as GeeksforGeeks. <! – – comment here – – > is the comment tag in HTML and it doesn’t read the line present inside this tag.
HTML Headings: These tags help us to give headings to the content of a webpage. These tags are mainly written inside the body tag. HTML provides us with six heading tags from <h1> to <h6>. Every tag displays the heading in a different style and font size.  
Most HTML heading tag that we use :- 
Heading 1 
Heading 2
Heading 3 
Example: This example illustrates the use of 6 heading tags from <h1> to <h6> in HTML.
HTML
<html> <head>    <title>GeeksforGeeks</title></head> <body>    <h1>Hello GeeksforGeeks</h1>    <h2>Hello GeeksforGeeks</h2>    <h3>Hello GeeksforGeeks</h3>    <h4>Hello GeeksforGeeks</h4>    <h5>Hello GeeksforGeeks</h5>    <h6>Hello GeeksforGeeks</h6></body> </html>
Output:
HTML Headings
HTML Paragraph: These tags help us to write paragraph statements on a webpage. They start with the <p> tag and ends with </p>.  
HTML Break: – These tags are used for inserting a single line type break. It does not have any closing tag. In HTML the break tag is written as <br>. 
Example: This example illustrates the use of the <p> tag for writing a paragraph statement in HTML.
HTML
<html> <head>    <title>GeeksforGeeks</title></head> <body>    <h1>Hello GeeksforGeeks</h1>       <p> A Computer Science portal for geeks<br>        A Computer Science portal for geeks<br>        A Computer Science portal for geeks<br>    </p>    </body> </html>
Output:
HTML Paragraph
HTML Horizontal Line: The <hr> tag is used to break the page into various parts, creating horizontal margins with help of a horizontal line running from the left to right-hand side of the page. This is also an empty tag and doesn’t take any additional statements.
Example: This example illustrates the use of the <hr> tag for the horizontal line in HTML.
HTML
<html> <head>    <title>GeeksforGeeks</title></head> <body>    <h1>Hello GeeksforGeeks</h1>       <p>        A Computer Science portal for geeks<br>        A Computer Science portal for geeks<br>        A Computer Science portal for geeks<br>    </p>        <hr>       <p>        A Computer Science portal for geeks<br>        A Computer Science portal for geeks<br>        A Computer Science portal for geeks<br>    </p>        <hr>       <p>        A Computer Science portal for geeks<br>        A Computer Science portal for geeks<br>        A Computer Science portal for geeks<br>    </p>        <hr></body> </html>
Output:
Adding horizontal line using the <hr> tag
HTML Images: The image tag is used to insert an image into our web page. The source of the image to be inserted is put inside the <img src=”source_of_image“> tag.
Image can be inserted in the image tag in two formats: – 
If the image is in the same folder, then we can just write the name of the image and the format as the path. 
If the image is in another folder, then we do need to mention the path of the image and the image name as well as the format of the image. 
Example: This example illustrates the use of the <img> tag for inserting the images in HTML.
HTML
<html> <head>    <title>GeeksforGeeks</title></head> <body>    <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png"></body> </html>
Output:
Adding image using <img> tag
Supported Browsers:
Google Chrome 93.0 & above
Internet Explorer 11.0
Microsoft Edge 93.0
Firefox 92.0 & above
Opera 79.0
Safari 14.1
There are also various other tags in HTML to insert links, audios, and various other formatting tags that we will be learning in the later sections.
This article is contributed by Chinmoy Lenka. If you like GeeksforGeeks and would like to contribute, you can also write an article using write.geeksforgeeks.org or mail your article to review-team@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please write comments if you find anything incorrect, or if you want to share more information about the topic discussed above.
HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
imdp
ysachin2314
bhaskargeeksforgeeks
jyotibujethiya
codingbeast12
HTML and XML
HTML-Basics
Web technologies-HTML and XML
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?