Open In App

HTML Course Basics of HTML

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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

HTML Paragraph 

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

Syntax:

<p>GeeksforGeeks</p>

Example:  This example shows the use of paragraph tag.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Paragraph tag</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 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. 

Syntax:

<hr>

Example:  This example shows the use of horizontal row tag in an HTML document.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Horizontal row</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: 

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. 

Syntax:

<img src="geeks.png" alt="image">

Example: This example shows the use of HTML images in an HTML document.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>HTML Images</title>
</head>
 
<body>
    <img src=
</body>
 
</html>


Output: 

HTML – Attributes 

An attribute is used to provide extra or additional information about an element. It takes two parameters name and value. 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.

Example: This example illustrates the use of href, height,width and src attribute in an HTML document.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>HTML Attributes</title>
</head>
 
<body>
 
    <h2>Link with href Attribute</h2>
       target="_blank" title="Geeks">
       GeeksforGeeks
      </a>
 
    <h2>Image with src, height, and width Attributes:</h2>
         alt="GeeksforGeeks Image" height="200"
         width="300">
 
</body>
 
</html>


Output:

Screenshot-2024-01-11-101757

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 gives help to coder / reader of code to identify pieces of code specially in complex source code.

Syntax: 

<!-- Write your comments here -->

Example:  This example shows the use of HTML comments in an HTML document.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>comment in HTML</title>
</head>
 
<body>
    <!-- there is a comment -->
    <p>GeeksforGeeks</p>
</body>
 
</html>


Output: 

Screenshot-2024-01-11-102108

HTML – Lists 

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 shopping list , To-do list etc. HTML offers three ways for specifying lists of information. All lists must contain one or more list 

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

Example: This example illustrates the use of HTML list with help of HTML document.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>HTML list</title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>HTML Lists</h3>
    <h2>Ordered List:</h2>
    <ol>
        <li>DSA</li>
        <li>MERN</li>
        <li>MEAN</li>
    </ol>
 
    <h2>Unordered List:</h2>
    <ul>
        <li>DSA</li>
        <li>MERN</li>
        <li>MEAN</li>
    </ul>
 
</body>
 
</html>


Output:

Screenshot-2024-01-11-093806

Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari


Last Updated : 29 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads