Learning HTML - By FoxGames

Learning HTML

By FoxGames

📌 What Is HTML?

HTML stands for HyperText Markup Language. It is the language used to create webpages.

HTML = Structure

HTML builds the structure of a webpage using tags.

📌 Basic Page Structure

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  Content goes here
</body>
</html>

📌 Headings

Headings go from <h1> (biggest) to <h6> (smallest).

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>

📌 Paragraphs

<p>This is a paragraph.</p>

📌 Line Breaks & Horizontal Lines

<br>   ← line break
<hr>   ← horizontal line

📌 Text Formatting

<b>Bold</b>
<strong>Important Bold</strong>
<i>Italic</i>
<em>Emphasized</em>
<u>Underline</u>
<small>Small text</small>

📌 Links

<a href="https://example.com">Click Me</a>

📌 Images

<img src="https://example.com/image.png" alt="Description">

📌 Lists

Unordered List

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Ordered List

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

📌 Divs & Spans

Used for grouping content.

<div>Block element</div>
<span>Inline element</span>

📌 Tables

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>12</td>
  </tr>
</table>

📌 Forms

<form>
  <input type="text" placeholder="Your name">
  <input type="submit">
</form>

📌 Buttons

<button>Click Me</button>

📌 Comments

<!-- This is a comment -->

📌 Semantic HTML

These tags describe meaning:

<header>
<nav>
<main>
<section>
<article>
<footer>

📌 Media (Images, Audio, Video)

<img src="image.png">

<audio controls>
  <source src="sound.mp3" type="audio/mpeg">
</audio>

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

📌 HTML Entities

< = &lt;
> = &gt;
& = &amp;
" = &quot;

📌 Final Notes

HTML is the foundation of every website. Once you know HTML, you can learn CSS and JavaScript to make your pages beautiful and interactive.