Home » Blog » Web Development » HTML Basics: A Complete Guide to HyperText Markup Language

HTML Basics: A Complete Guide to Hyper Text Markup Language

Introduction to HTML

A blog is a website where individuals or groups regularly post articles, stories, opinions, or experiences. Blogs can be personal or professional, covering diverse topics such as travel, food, fashion, technology, and more.

History of HTML

HTML was developed by Tim Berners-Lee in 1991 to facilitate information sharing on the internet. Over the years, it has undergone several revisions:

HTML 1.0 (1993): The first version, simple and limited.
HTML 2.0 (1995): Introduced basic forms and tables.
HTML 3.2 (1997): Added support for scripting and complex tables.
HTML 4.01 (1999): Improved forms, scripting, and accessibility.
XHTML (2000): A stricter version of HTML based on XML.
HTML5 (2014 - Present): Introduced new elements, multimedia support, and semantic tags.

How to Create an HTML Page

Creating an HTML page is simple. Follow these steps:

Open a Text Editor: Use Notepad, VS Code, Sublime Text, or any preferred editor.
Write HTML Code: Start coding your HTML structure in the editor.


  <!DOCTYPE html>
  <html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple HTML page.</p>
  </body>
  </html>

Save the File: Save it with a .html extension, e.g., index.html.
Open in Browser: Double-click the file or open it with a web browser to view the page.

Basic Structure of an HTML Document

An HTML document consists of nested elements enclosed within tags. Below is the basic structure:


  <!DOCTYPE html>
  <html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple HTML page.</p>
  </body>
  </html>

Explanation:

<!DOCTYPE html>: Defines the document as an HTML5 file.
<html>: The root element of an HTML page.
<head>: Contains meta-information like title and styles.
<title>: Specifies the page title displayed on the browser tab.
<body>: Holds all visible content on the page.
<h1>: Defines the main heading.
<p>: Represents a paragraph.

Commonly Used HTML Tags

1. Headings

HTML supports six levels of headings:


  <h1>Main Heading</h1>
  <h2>Subheading</h2>
  <h3>Sub-subheading</h3>
  <h4>...</h4>
  <h5>...</h5>
  <h6>Smallest heading</h6>

2. Paragraphs & Line Breaks


  <p>This is a paragraph.</p>
  <br> <!-- Line break -->

3. Links


  <a href="https://www.example.com">Visit Example</a>

4. Images


  <img src="image.jpg" alt="Description of image">

5. Lists

Unordered List:


  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>

Ordered List:


  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
  </ol>

6. Tables


  <table border="1">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </table>

7. Forms


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

HTML5 Features

HTML5 introduced several new elements and attributes to enhance modern web development:

Semantic Elements: <header>, <footer>, <article>, <section> for better document structure.
Multimedia: <audio> and <video> for embedding media files.
Forms Enhancements: <input type="email">, <input type="date">, and <input type="number">.
Canvas & SVG: For drawing graphics.
Local Storage: localStorage and sessionStorage APIs for storing data locally.

Conclusion

HTML is the foundation of web development, allowing developers to create structured, interactive, and visually appealing websites. By mastering HTML, you can build static web pages and integrate them with CSS and JavaScript to enhance functionality and aesthetics. With the continuous evolution of HTML5, web development is becoming more efficient and user-friendly.

Looking to Grow Your Customer Base?

Hi, I’m Pradeep Singh Karki, and I’m committed to helping businesses expand. My question is simple: will yours be the next one to thrive?