HTML Notes Aditya Sahani | Developer Resources

Basics

HTML (HyperText Markup Language) is the standard language for creating web pages. Every website starts here.

Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

Syntax & Elements

Headings

HTML provides six levels of headings: <h1> through <h6>. Use only one <h1> per page.

Text Elements

<p> Paragraph
<strong> Bold / important text
<em> Italic / emphasized text
<a href="url"> Hyperlink
<br> Line break
<hr> Horizontal rule

Lists

Ordered & Unordered Lists

<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

Semantic HTML

Semantic elements clearly describe their meaning to both the browser and the developer.

Semantic Structure

<header>Site header / navigation</header>
<nav>Navigation links</nav>
<main>Primary content</main>
<article>Self-contained content</article>
<section>Thematic grouping</section>
<aside>Sidebar content</aside>
<footer>Footer information</footer>
<figure> + <figcaption>  Image with caption

Forms & Inputs

Form Example

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

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

  <label for="msg">Message</label>
  <textarea id="msg" name="message"></textarea>

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

Input Types

text, email, password, number
tel, url, date, range
checkbox, radio, file, color

Best Practices

Always declare <!DOCTYPE html>
Use semantic elements instead of generic <div> tags
Add alt attributes to all images for accessibility
Use lang attribute on <html>
Keep markup clean and properly indented
Use <meta viewport> for responsive design
Minimise inline styles use external CSS
Validate your HTML with the W3C Validator