HTML | Basics

In this article, we will go through 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 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 which divides the whole document into various parts like head, body etc.

  • Every HTML document begins with a HTML document tag. Although this is not mandatory but it is a good convention to start the document with this below mentioned tag:
    <!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 document like the title of the page and other miscellaneous information. These informations are enclosed within head tag which opens with <head> and ends with </head>. The contents will of this tag will be explained in the later sections of course.
  • <title> : We can mention the title of a web page using the <title> tag. This is a header information and hence 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>. Every content enclosed within this tag will be shown on the web page be it writings or images or audios 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 this:



filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
<head>
    <!-- Information about the page -->
    <!--This is the comment tag-->
    <title>GeeksforGeeks</title>
</head>
<body>
    <!--Contents of the webpage-->
</body>
</html>

chevron_right


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 reads 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.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:

HTML Paragraph

These tags help us to write paragraph statements in a webpage. They start with the <p> tag and ends with <p>. Here the <br> tag is used to break line and acts as a carriage return. <br> is an empty tag.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:

HTML Horizontal Lines

The <hr> tag is used to break the page into various parts, creating horizontal margins with help of a horizontal line running from left to right hand side of the page. This is also an empty tag and doesn’t take any additional statements.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:

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.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
<head>
    <title>GeeksforGeeks</title>
</head>
<body>
</body>
</html>

chevron_right


Output:

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 contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.



My Personal Notes arrow_drop_up

Improved By : imdp