HTML (HyperText Markup Language) is the standard language for creating web pages. It defines the structure and content of a webpage using tags and elements. Here's a quick guide to get started:
🌐 What is HTML?
- Definition: HTML is used to structure content on the internet.
- Role: It works with CSS (for styling) and JavaScript (for interactivity) to create dynamic websites.
- Icon: 💻 HTML is the foundation of all web development.
📁 Basic HTML Structure
Every HTML document starts with the following skeleton:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
<!DOCTYPE html>
: Declares the document type.<html>
: Root element containing all webpage content.<head>
: Metadata section (e.g., title, styles).<body>
: Visible content area (text, images, links).
🧩 Common HTML Tags
Tag | Purpose | Example |
---|---|---|
<h1>-<h6> |
Headings | <h1>Welcome</h1> |
<p> |
Paragraphs | <p>This is a paragraph.</p> |
<a> |
Hyperlinks | <a href="/en/tutorials/web-development/css">CSS Tutorial</a> |
<img> |
Images | <img src="https://cloud-image.ullrai.com/q/html_practice_example/" alt="Practice Example"> |
<ul>/<ol> |
Lists | <ul><li>Item 1</li></ul> |
📚 Practice Example
Create a simple webpage:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is your first HTML page. 🎉</p>
<img src="https://cloud-image.ullrai.com/q/html_document_structure/" alt="HTML Document Structure">
</body>
</html>
- Save this as
index.html
and open it in a browser to see the result!
📚 Expand Your Knowledge
- CSS Styling Basics → Learn how to style HTML elements.
- JavaScript Fundamentals → Add interactivity to your web pages.
- Web Development Overview → Get a broader perspective on frontend development.