Start Your Web Development Journey with HTML Basics

Shaik SoniaShaik Sonia
3 min read

Introduction

What is HTML?
HTML stands for Hyper Text Markup Language So Lets explore what it means?
The HYPER TEXT means hyperlinks or hyper-text.
these hyperlinks are blue-colored when you create a file in HTML.
When you click on this it will take you to other pages of your website like these.

Here’s an example of a hyperlink:
Hello World! – this is a hyperlink.
When you click on it, it will redirect you to www.google.com.

Below, you can see what hyperlinks typically look like on a webpage.

Here, you can check out the HTML page of a website from 1998. Without any CSS styling, it shows the basic structure of an HTML page.
Now that you understand hypertext, let’s move on to the next part of the word:Markup

What is Markup Language?

A markup language refers to a way of labeling a document's content to define its structure, presentation, or behavior.
In HTML, there are many tags used to achieve this. Some common examples include:

  1. <html>: The root tag that contains the entire HTML document.

  2. <head>: Contains metadata and links to stylesheets or scripts.

  3. <title>: Sets the title of the webpage (displayed on the browser tab).

  4. <body>: Contains all the visible content of the webpage.


Text Formatting Tags

  1. <h1> to <h6>: Headings, with <h1> being the largest and <h6> the smallest.

  2. <p>: Paragraphs.

  3. <b>: Bold text (for emphasis).

  4. <i>: Italic text (for emphasis).

  5. <u>: Underlines text.

  6. <br>: Line break.

  7. <hr>: Horizontal rule (a divider line).


Lists Tags

  1. <ul>: Unordered list (with bullet points).

  2. <ol>: Ordered list (with numbers).

  3. <li>: List item (used inside <ul> or <ol>).


  1. <a>: Creates a hyperlink.

     htmlCopy code<a href="https://example.com">Click here</a>
    
  2. <img>: Embeds an image.

     htmlCopy code<img src="image.jpg" alt="Sample Image">
    
  3. <video>: Embeds a video.

  4. <audio>: Embeds audio content.


Table Tags

  1. <table>: Creates a table.

  2. <tr>: Defines a row in a table.

  3. <td>: Defines a cell in a table.

  4. <th>: Defines a header cell.


Form Tags

  1. <form>: Defines a form for user input.

  2. <input>: Creates an input field.

  3. <label>: Labels an input field.

  4. <button>: Creates a clickable button.

  5. <textarea>: Creates a multi-line text input field.


Semantic Tags

  1. <header>: Defines the header section.

  2. <footer>: Defines the footer section.

  3. <article>: Represents an independent piece of content.

  4. <nav>: Defines a navigation section.

  5. <section>: Represents a section of a document.

These tags are fundamental to structuring and styling web content.

This is the basic structure of HTML file:

<!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 Blog</h1>
    <p>This is my first HTML page. Excited to learn more!</p>
</body>
</html>

This was all about HTML and its tags…
Conclusion
Learning to code is not just about acquiring technical skills; it’s about problem-solving, creativity, and resilience. The web is a constantly evolving landscape, and I’m excited to continue exploring new technologies and trends that will shape the future of web development.

9
Subscribe to my newsletter

Read articles from Shaik Sonia directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Shaik Sonia
Shaik Sonia