HTML Course | Basics of HTML

Course Navigation

In this article, we will go through all the basic stuff required to write HTML. There are various tags that we must consider and know about 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.

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:

HTML – Attributes

An attribute is used to provide extra or additional information about an element.

  • All HTML elements can have attributes. Attributes provide additional information about an element.
  • It takes two parameters : a name and a value. These define the properties of the element and is placed inside the opening tag of the element. The name parameter takes the name of the property we would like to assign to the element and the value takes the properties value or extent of the property names that can be aligned over the element.
  • Every name has some value that must be written within quotes.

HTML – Comments

It is used for inserting comments in the HTML code. Using comments, specially in complex code, is the best practice of coding so that coder and reader can get help for understanding.

  • It is simply piece of code which is wiped off by web browsers i.e, not displayed by browser.
  • It gives help to coder / reader of code to identify piece of code specially in complex source code.

Syntax of HTML Comments :

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- Write your comments here -->

chevron_right




Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
  
   <!-- there is a comment -->
   <p>geeksforgeeks.</p>
  
</body>
  
</html>

chevron_right


Output:

geeksforgeeks.

HTML – Lists

What is a list?
A list is a record of short pieces of information, such as people’s names, usually written or printed with a single thing on each line and ordered in a way that makes a particular thing easy to find.

For example:

  • A shopping list
  • To-do list

Lists in HTML

HTML offers three ways for specifying lists of information. All lists must contain one or more list
elements.

The types of lists that can be used in HTML are :

  • ul : An unordered list. This will list items using plain bullets.
  • ol : An ordered list. This will use different schemes of numbers to list your items.
  • dl : A definition list. This arranges your items in the same way as they are arranged in a dictionary.

For More on HTML, Please refer: https://www.geeksforgeeks.org/html-tutorials/



My Personal Notes arrow_drop_up

Senior Technical Content Engineer | GeeksforGeeks

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 Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.