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>
<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>
<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>
<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>
<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.