Introduction to HTML

HTML (HyperText Markup Language) is the foundation of web development.
It structures web content using elements, each defined by tags.
Mastering these elements will give you a strong foundation in web development.
Below, we'll cover the essential sections every beginner should learn.

Basic HTML Structure

Every HTML document follows a standard structure that includes essential elements like <html>, <head>, and <body>.

   
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a basic HTML page structure.</p>
</body>
</html>


    

Divs and Spans for Layout

The <div> is a block container, while <span> is an inline container.

Example: Div and Span

   
    
<div style="background-color: lightblue; padding: 10px;">
    <h2>This is a div</h2>
    <p>Divs help structure content.</p>
</div>

<p>This is a <span style="color: red;">highlighted</span> word.</p>


    

Output:

This is a div

Divs help structure content.

This is a highlighted word.

Headings and Paragraphs

Headings (<h1> to <h6>) define the structure of a page, while paragraphs (<p>) are used for text content.

Example: Headings and Paragraphs

   
    
<h1>Main Title</h1>
<h2>Subheading</h2>
<p>This is a paragraph of text providing information to the user.</p>

Output:

Main Title

Subheading

This is a paragraph of text providing information to the user.

Lists in HTML

HTML supports ordered (<ol>) and unordered (<ul>) lists, which help in organizing content.

Example: Lists

   
    
<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>

<ol>
    <li>Step One</li>
    <li>Step Two</li>
    <li>Step Three</li>
</ol>

Output:

  • Apple
  • Banana
  • Cherry
  1. Step One
  2. Step Two
  3. Step Three

Links and Anchors

The <a> tag is used to create hyperlinks, allowing navigation to other web pages.

Example: Link

   
    
<a href="https://itpresent.com">Visit IT present</a>

Output:


Visit IT present

Images in HTML

The <img> tag is used to embed images.

Example: Image Tag

   
    
<img src="html_tutorial.png" alt="Logo HTML Tutorial" width="300">

Output:

Logo HTML Tutorial


Tables in HTML

Tables are created using <table>, with rows (<tr>) and columns (<td>).

Example: Table

   
<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>30</td>
    </tr>
</table>

Output:

Name Age
John 25
Jane 30



Forms in HTML

Forms allow user input through fields like text boxes, radio buttons, and buttons.

Example: Form

   
    
<form action="submit.php" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <br>
    <button type="submit">Submit</button>
</form>

Output:







Privacy Policy