Complete HTML basics tutorial covering tags, attributes, structure, and examples. Best guide for beginners to learn web development from scratch.

 

HTML Basics (Tags & Attributes) – Easy Guide

 What is HTML?

HTML (HyperText Markup Language) is the standard language used to create web pages. It tells the browser how content should be displayed (text, images, links, etc.).

 Basic Structure of an HTML Page

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is my first web page.</p>
</body>
</html>

🔍 Explanation:

  • <!DOCTYPE html> → Defines HTML5 version

  • <html> → Root element

  • <head> → Contains meta info (title, links, etc.)

  • <body> → Visible content

 What are HTML Tags?

Tags are keywords enclosed in angle brackets < >. They define elements.

🔹 Types of Tags:

1. Paired Tags (Container Tags)

Have opening and closing tags.

<p>This is a paragraph</p>

2. Empty Tags (Self-closing)

No closing tag.

<br>
<img src="image.jpg">
<hr>

 Common HTML Tags

TagDescription
<h1> to <h6>Headings
<p>Paragraph
<a>Link
<img>Image
<br>Line break
<hr>Horizontal line
<ul> / <ol>Lists
<li>List item
<table>Table
<form>Form

 What are Attributes?

Attributes provide extra information about HTML elements.

📌 Syntax:

<tag attribute="value">Content</tag>

 Common Attributes

1. href (for links)

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

2. src (for images)

<img src="image.jpg">

3. alt (alternative text)

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

4. class & id

<p class="text">Hello</p>
<p id="main">Welcome</p>

5. style (inline CSS)

<p style="color:red;">Red Text</p>

 Example with Tags & Attributes

<!DOCTYPE html>
<html>
<head>
    <title>Practice</title>
</head>
<body>

<h1 style="color:blue;">Welcome</h1>

<p id="para1">This is a paragraph.</p>

<a href="https://google.com" target="_blank">Open Google</a>

<img src="photo.jpg" alt="My Photo" width="200">

</body>
</html>

 Important Points

  • Tags are case-insensitive (but lowercase recommended)

  • Always close tags properly

  • Attributes are always written inside opening tag

  • Use quotes " " for attribute values

 Quick Summary

  • HTML = Structure of webpage

  • Tags = Building blocks

  • Attributes = Extra info for tags

  • <html>, <head>, <body> = Main structure


Comments

Post a Comment

Popular posts from this blog

What is Microsoft Word ? Learn its features, uses and shortcut keys. Complete guide for beginners to create and format documents easily.

Image
   What is Microsoft Word ? (Complete Guide + Shortcut Keys) What is Microsoft Word ? Microsoft Word  is a word processing software developed by Microsoft. It is used to create, edit, format, and print documents.  It is part of Microsoft Office 2007 and is widely used in schools, offices, and businesses.  Microsoft Word 2007 Interface (Overview) Word 2007 uses a Ribbon Interface , which contains different tabs such as: Home Insert Page Layout References Review View What Can You Do in Microsoft Word ? ✍️ 1. Document Typing Write letters Create applications Make notes 🎨 2. Formatting Change font size and style Apply Bold, Italic, Underline Change text color 📊 3. Create Tables Organize data in table format Useful for school and office work 🖼️ 4. Insert Images Add pictures Insert shapes and charts 📄 5. Page Setup Set margins Change page size Choose orientation (Portrait / Landscape) 🖨️ 6. Printing Print documents directly 🔍 7. Spelling Check Automatically de...
Read more

Excel Inventory Management Dashboard – Complete Guide 2026

Image
  Excel Inventory Management Dashboard – Complete Guide 2026 Introduction In today’s digital world, every business needs a proper system to manage stock, purchases, sales, and inventory records. Managing inventory manually can create many problems such as calculation errors, stock mismatch, and data loss. That is why an Excel Inventory Management Dashboard is considered one of the most useful tools for small and medium businesses. In this article, we will understand a complete Excel Inventory Management Dashboard that includes customer details, vendor records, product management, purchase entries, sales records, and inventory tracking systems. This dashboard is very useful for small businesses, shop owners, wholesalers, retailers, students, and beginners who want to learn advanced Excel inventory systems. What is an Excel Inventory Dashboard? An Excel Inventory Dashboard is an automated spreadsheet system where businesses can manage and monitor all inventory-related data in one pla...
Read more

Microsoft Word Mailings Tab (full tutorial),Learn Microsoft Word Mailings Tab and Mail Merge in this complete guide. Create bulk letters, emails, labels, and envelopes easily with step-by-step instructions for beginners.

Image
  📧 Microsoft Word Mailings Tab  🔷 Introduction to Mailings Tab The Mailings Tab in Microsoft Word is a powerful feature that allows users to create and send documents to multiple recipients at once. It is mainly used for bulk communication , such as sending letters, emails, envelopes, and labels. This tab is especially useful in offices, schools, and businesses where the same message needs to be sent to many people with small variations like name, address, or contact details. The most important feature of the Mailings Tab is called Mail Merge . Mail Merge helps you combine a standard document (like a letter) with a data source (like an Excel sheet) to automatically generate personalized documents for each recipient. 🔷 Main Features of Mailings Tab 📌 1. Create Group The Create Group includes tools to design envelopes and labels. Envelopes : This option allows you to print addresses directly onto envelopes. You can enter the delivery and return address and print them in t...
Read more