Learn HTML Basics

HTML (HyperText Markup Language) is the foundation of every webpage. Below, explore key concepts in interactive chunks!

1. Basic HTML Structure

Every HTML document starts with a standard structure.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>
VS Code Tip: Type ! and press Tab (Mac: Tab, Windows: Tab) to auto-generate this structure!

2. Headings

Use <h1> to <h6> for titles and subtitles.

<h1>Main Title</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>

Try it: Click below to see headings in action!

VS Code Tip: Select text and press Cmd + D (Mac) or Ctrl + D (Windows) to edit multiple lines at once.

3. Paragraphs and Text

Use <p> for paragraphs and <b>, <i> for formatting.

<p>This is a paragraph.</p>
<p><b>Bold</b> and <i>italic</i> text.</p>
VS Code Tip: Use Cmd + / (Mac) or Ctrl + / (Windows) to toggle comments on selected lines.

4. Links

Create hyperlinks with the <a> tag.

<a href="https://codie.codes">Visit Code-E</a>

Try it: Test Link

VS Code Tip: Hold Option (Mac) or Alt (Windows) and click to place multiple cursors.

5. Images

Add images with <img> (self-closing tag).

<img src="image.jpg" alt="Description" width="200">
VS Code Tip: Press Cmd + T (Mac) or Ctrl + T (Windows) to quickly search for symbols or files.

6. Lists

Use <ul> for unordered and <ol> for ordered lists.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<ol>
  <li>First</li>
  <li>Second</li>
</ol>
VS Code Tip: Use Cmd + Shift + L (Mac) or Ctrl + Shift + L (Windows) to select all occurrences of a word.