DEV Community

Vairavan
Vairavan

Posted on

HTML

#html #css #webdev #programming

HTML (HyperText Markup Language) is the standard language used to create web pages. Every website starts with HTML. It helps structure the content of a webpage such as headings, paragraphs, images, links, and more.

What is HTML?

HTML is not a programming language. It is a markup language used to organize and display content on a webpage.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>Welcome to HTML.</p>
</body>
</html>

HTML Document Structure

Every HTML page has a basic structure:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    Content goes here
</body>
</html>

Explanation

<!DOCTYPE html> → Tells the browser this is an HTML5 document.
→ Root element of the webpage.

→ Contains page information.
→ Title shown in browser tab.<br> → Visible content of the webpage.

Headings

HTML provides six heading tags.

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Smaller Heading</h3>

h1 is the largest heading and h6 is the smallest.

Paragraph

Paragraphs are created using the p tag.

<p>This is a paragraph.</p>

Links

Links are created using the a tag.

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

The href attribute contains the destination URL.

Images

Images are added using the img tag.

<img src="image.jpg" alt="Sample Image">

src → Image path.
alt → Alternative text if image fails to load.

Lists

Ordered List

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

Unordered List

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Buttons 

<button>Click Me</button>

Buttons allow users to interact with the webpage.

Buttons can perform different actions.

<button type="button">Click Me</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>

button → General button
submit → Sends form data
reset → Clears form fields

Forms

Forms are used to collect user information.

<form>
    <input type="text" placeholder="Enter Name">

</form>

<form>
    <input type="text">
    <button type="submit">Submit</button>
</form>

Input Elements

Input elements allow users to enter data.

<input type="text">
<input type="email">
<input type="password">
<input type="number">
<input type="date">

Common Types:

  1. text
  2. email
  3. password
  4. number
  5. date
  6. checkbox
  7. radio

Div Tag

The div tag is a block-level container used to group HTML elements together. It helps organize the webpage structure.

<div>
    <h1>Welcome</h1>
    <p>This is a div container.</p>
</div>

Span Tag

The span tag is an inline container used to style or group small parts of text.

<p>Hello <span>World</span></p>

Semantic Tags

Semantic tags describe the meaning of the content.

Semantic Tags

  • header
  • nav
  • section
  • article
  • footer 
<header></header>
<nav></nav>
<section></section>
<article></article>
<footer></footer>

Header Tag

The header tag represents the top section of a webpage.

<h1>My Website</h1>
</header>

Footer Tag

The footer tag represents the bottom section of a webpage.

<footer>
    <p>Copyright 2026</p>
</footer>

Navigation Bar

The tag contains navigation links.

<nav>
    <a href="#">Home</a>
    <a href="#">About</a>
</nav>

Section Tag

The section tag groups related content.

<section>
    <h2>About Us</h2>
    <p>Information about the company.</p>
</section>

Benefits:

  • This structure makes websites easier to understand
  • Better readability
  • Better SEO
  • Better accessibility

Tables

Tables are used to display data in rows and columns.

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Surya</td>
        <td>22</td>
    </tr>
</table>

Important table tags:

Tag - Purpose

  • table-Creates a table
  • tr-Table row
  • th-Table heading
  • td-Table data
  • thead-Table header
  • tbody-Table body
  • tfoot-Table footer

Common Attributes:

  • id
  • class
  • href
  • src
  • alt
  • title
  • style

ID Attribute

The id attribute uniquely identifies an element.

<h1 id="title">Hello</h1>

Rules:

  • Must be unique.
  • One element should have one unique ID.

Class Attribute

The class attribute groups multiple elements.

<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>
  • Multiple elements can share the same class.

Top comments (0)