📘 Basic HTML Vocabulary & Tag Reference

A quick guide to help you build a personal webpage.

🏗️ Basic Page Setup

DOCTYPE (<!DOCTYPE html>)
Tells the browser the file is an HTML5 document. Must be at the very top.
```
<!DOCTYPE html>
```
HTML (<html> ... </html>)
Wraps all the code in your webpage.
```
<html>
  ...
</html>
```
Head (<head> ... </head>)
Contains information about the webpage (not visible on the page itself).
```
<head>
  <title>My Webpage</title>
</head>
```
Title (<title>)
Sets the title that appears in the browser tab.
```
<title>My Personal Webpage</title>
```
Body (<body> ... </body>)
Contains everything that shows up on the page (text, images, links, etc.).
```
<body>
  <h1>Welcome to My Page</h1>
</body>
```

Heading (<h1> … <h6>)
Creates titles and subtitles. <h1> is largest, <h6> is smallest.
```
<h1>My Personal Webpage</h1>
<h2>About Me</h2>
```

Paragraph (<p>)
Used for blocks of text.

<p>I enjoy reading, hiking, and coding in my free time.</p>

Emphasis (<em>)
Makes text italic and shows stress.
```
<p>I <em>really</em> enjoy learning HTML!</p>
```

Importance (<strong>)
Makes text bold and shows importance.

<p>Safety is <strong>very important</strong> when online.</p>

Image (<img>)
Displays an image. Needs src (file name or link) and alt (description).
```
<img src="hiking.jpg" alt="Me hiking in the mountains">
```
Hyperlink (<a>)
Creates a clickable link. Uses href for the address.
```
<a href="https://www.wikipedia.org">Visit Wikipedia</a>
```
Link to another section on the same page:
```
<a href="#about">Go to About Me</a>
```

آخر تعديل: الجمعة، 26 سبتمبر 2025، 10:07 AM