HTML Basics | CodeVerse

01 What is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages. It defines the structure and content of a webpage using elements and tags.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

💡 DOCTYPE tells the browser this is HTML5. The head contains metadata. The body contains visible content.

02 Headings & Paragraphs

HTML provides 6 levels of headings and paragraph elements for text content.

<h1>Main Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
<p>This is a paragraph.</p>
<br>
<hr>

03 Text Formatting

Inline elements for bold, italic, emphasis, and other text styling.

<strong>Bold</strong>
<em>Italic</em>
<mark>Highlighted</mark>
<small>Small text</small>
<del>Deleted</del>
<ins>Inserted</ins>

04 Links & Navigation

Create hyperlinks to other pages, sections, emails, and phone numbers.

<a href="https://example.com">Visit Site</a>
<a href="about.html">About Page</a>
<a href="#contact">Jump</a>
<a href="mailto:email@test.com">Email</a>

05 Images & Media

Embed images, videos, and audio with modern HTML elements.

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

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

💡 Always include alt text for images — it helps accessibility and SEO.

06 Lists

Organize content with ordered, unordered, and description lists.

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

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

07 Tables

Display structured data with HTML tables — headers, rows, columns, and spans.

<table>
  <thead>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>Alex</td><td>25</td></tr>
    <tr><td>Sam</td><td>30</td></tr>
  </tbody>
</table>

08 Forms & Inputs

Collect user data with forms — text fields, checkboxes, radio buttons, dropdowns, and buttons.

\n')">Copy

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" required>

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

💡 Use required attribute for validation. label elements improve accessibility.

09 Semantic HTML5

Modern semantic elements that give meaning to your page structure — better for SEO and accessibility.

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

<main>
  <article>
    <section>
      <h2>Content</h2>
    </section>
  </article>
</main>

<footer><p>© 2024</p></footer>

10 Div & Span

Generic containers for grouping and styling — div is block-level, span is inline.

')">Copy

<div class="container">
  <h2>Section</h2>
  <p>Text with <span class="highlight">highlighted</span> word.</p>
</div>

11 HTML5 Input Types

Modern input types with built-in validation for better user experience.

text

Plain text input

email

Validates email format

password

Masked input field

number

Numeric input with arrows

date

Date picker

color

Color picker

file

File upload

range

Slider control

checkbox

Multiple selections

radio

Single selection

tel

Phone number

url

URL input

12 Attributes

HTML attributes provide additional information about elements — id, class, src, href, alt, and more.

id

Unique identifier

class

Reusable styling hook

src

Source URL for media

href

Hyperlink destination

alt

Alternative text

title

Tooltip text

style

Inline CSS styles

data-*

Custom data attributes

13 Comments & Special Characters

Add comments to your code and use special HTML entities for symbols.

<!-- This is a comment -->

&lt;   = Less than
&gt;   = Greater than
&amp;  = Ampersand
&quot; = Double quote
&copy; = Copyright ©

14 Best Practices

Write clean, semantic, accessible HTML that's ready for production.

✅ Semantic HTML

Use meaningful tags

✅ Alt Attributes

Always describe images

✅ Proper Nesting

Close tags correctly

✅ Form Labels

Link labels to inputs

✅ Lowercase Tags

Use lowercase consistently

✅ Validate Code

Use W3C validator

✅ Meta Tags

Include charset & viewport

✅ Indentation

Format for readability