Skip to content

Syntax

Jump to bottom
PotatoScript edited this page Apr 2, 2025 · 1 revision

📌 1. HTML Basic Structure

Every HTML file must follow a specific structure.

📌 A simple HTML document looks like this:

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
</body>
</html>

🚀 Let’s break it down! 👇

🟢 2. HTML Doctype (<!DOCTYPE html>)

📌 The first line of every HTML file is always:

<!DOCTYPE html>

✅ This tells the browser:

"Hey! This is an HTML5 document!"

💡 Without this line, the browser might not understand how to correctly display your page.

🟢 3. The <html> Tag

📌 The <html> tag is the biggest container for your entire webpage.

<html>
    <!-- Everything inside here is part of the webpage -->
</html>

✅ Everything inside <html> is read by the browser to display the page.

💡 It must have an opening (<html>) and a closing (</html>) tag.

🟢 4. The <head> Section

📌 The <head> tag contains important information about the page but does not appear on the webpage itself.

<head>
    <title>My Website</title>
</head>

✅ The head section is like a brain 🧠. It includes:

  • <title> → The title of the webpage (shows on the browser tab).
  • Other settings (like fonts, styles, and scripts).

💡 Example:

<head>
    <title>Awesome Website</title>
    <meta charset="UTF-8">
</head>
  • The <meta charset="UTF-8"> ensures the page supports all languages 🌍 (English, Japanese, Arabic, etc.).

🟢 5. The <body> Section

📌 The <body> tag contains everything that will be displayed on the webpage.

<body>
    <h1>Welcome!</h1>
    <p>This is my first webpage.</p>
</body>

✅ Inside <body>, we can have:

  • Headings (<h1> to <h6>)
  • Paragraphs (<p>)
  • Images (<img>)
  • Links (<a>)
  • Buttons (<button>)
  • Videos (<video>)

💡 Example:

<body>
    <h1>🌟 My Awesome Website 🌟</h1>
    <p>Welcome to my first website!</p>
    <img src="https://example.com/image.jpg" alt="Cute cat" width="200">
    <a href="https://google.com">Go to Google</a>
</body>

🟢 6. HTML Tags & Their Uses

📌 HTML uses "TAGS" to structure content.

📝 Basic format of an HTML tag:

<tagname>Content</tagname>

✅ Opening tag → <p>
✅ Closing tag → </p>

🟢 7. Example of HTML Elements

Here are some common HTML elements with examples:

Tag Purpose Example
<h1> - <h6> Headings (titles) <h1>Big Title</h1>
<p> Paragraph <p>This is text.</p>
<a> Hyperlink <a href="https://google.com">Google</a>
<img> Image <img src="cat.jpg" alt="A cute cat">
<ul>, <li> Unordered List <ul><li>Item 1</li></ul>
<ol>, <li> Ordered List <ol><li>First</li></ol>
<table> Table <table><tr><td>Data</td></tr></table>

🟢 8. Full Example: Simple Web Page

📌 Let’s put everything together into a full HTML page!

<!DOCTYPE html>
<html>
<head>
    <title>🌍 My First Web Page</title>
</head>
<body>
    <h1>🚀 Welcome to My Website! 🚀</h1>
    <p>Hello! This is my first webpage.</p>
    
    <h2>📸 My Favorite Image:</h2>
    <img src="https://example.com/cute-cat.jpg" alt="A cute cat" width="200">
    
    <h2>🔗 Useful Links:</h2>
    <a href="https://google.com">Click here to go to Google</a>

    <h2>📋 My To-Do List:</h2>
    <ul>
        <li>Learn HTML</li>
        <li>Practice CSS</li>
        <li>Build a website</li>
    </ul>
</body>
</html>

✅ What happens when you open this file?

  • Title: “🌍 My First Web Page” appears on the browser tab.
  • Big heading: "🚀 Welcome to My Website! 🚀"
  • Paragraph: "Hello! This is my first webpage."
  • An image of a cat 🐱
  • A link to Google 🔗
  • A to-do list 📝

Clone this wiki locally