HTML Fundamentals

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure and content of a document using elements surrounded by angle-bracketed tags. HTML5 is the current version.

Document Structure

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

<!DOCTYPE html> declares HTML5.
<head> holds metadata, stylesheets, scripts.
<body> holds visible content.

Elements and Attributes

An element usually has an opening tag, content, and closing tag: <p>text</p>. Void elements (<img>, <br>) have no closing tag. Attributes live inside the opening tag: <a href="x" target="_blank">.

Headings and Text

Headings <h1> to <h6> (use one h1 per page).
Paragraph <p>.
Line break <br>, horizontal rule <hr>.
Emphasis: <strong>, <em>, <mark>, <small>, <sub>, <sup>.

Links

<a href="https://example.com">Visit</a>
<a href="mailto:[email protected]">Email</a>
<a href="#section2">Jump</a>

Use target="_blank" rel="noopener" to open in a new tab securely.

Images

<img src="cat.jpg" alt="A ginger cat" width="300">

The alt attribute is required for accessibility and fallback.

Lists

Ordered: <ol><li></li></ol>.
Unordered: <ul><li></li></ul>.
Description: <dl><dt>term</dt><dd>definition</dd></dl>.

Tables

<table>
  <thead><tr><th>Name</th><th>Age</th></tr></thead>
  <tbody><tr><td>Alice</td><td>20</td></tr></tbody>
</table>

Use tables only for tabular data, not layout.

Semantic HTML5

HTML5 added tags that convey meaning: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, <figure>, <time>. Semantic tags improve accessibility and SEO.

Multimedia

<video src="movie.mp4" controls></video>
<audio src="song.mp3" controls></audio>

Forms

<form action="/save" method="POST">
  <label>Name: <input name="n" required></label>
  <label>Age: <input type="number" name="a"></label>
  <button type="submit">Save</button>
</form>

Common input types: text, email, password, number, date, checkbox, radio, file, hidden, submit.

Global Attributes

Every element can use id, class, style, title, data-*, lang, tabindex, hidden.

Character Entities

Encode special characters: < <, > >, & &, " ",   non-breaking space.

Summary

HTML is the skeleton of a web page. Write semantic, well-structured markup and the rest (styles, scripts, SEO, accessibility) becomes much easier.

Important Questions

Explain the basic structure of an HTML5 document.
Differentiate element and attribute.
Write HTML for a page with heading, paragraph, image, and a link.
List and explain five HTML5 semantic tags.
Create an ordered list of five items.
Create a table with header, three rows, and two columns.
Write an HTML form with name, email, and submit button.
Give five common input types.