Learning HTML
HTML (HyperText Markup Language) is the foundation of web development. It’s a markup language used to structure content on the web.
Basic Structure
Every HTML document follows this basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
Key Concepts
Elements and Tags: HTML uses tags (like <p>, <h1>, <div>) to define elements. Most tags come in pairs: an opening tag <p> and a closing tag </p>.
Common HTML Elements:
- Headings:
<h1>to<h6>(h1 is largest, h6 is smallest) - Paragraphs:
<p>Your text here</p> - Links:
<a href="https://example.com">Click here</a> - Images:
<img src="image.jpg" alt="Description"> - Lists:
<ul> <!-- Unordered list --> <li>Item 1</li> <li>Item 2</li> </ul> <ol> <!-- Ordered list --> <li>First</li> <li>Second</li> </ol> - Divisions:
<div>for grouping content - Spans:
<span>for inline styling
Quick Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Portfolio</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>I'm learning HTML!</p>
<h2>My Hobbies</h2>
<ul>
<li>Coding</li>
<li>Reading</li>
<li>Gaming</li>
</ul>
<a href="https://brave.com">Visit Brave</a>
</body>
</html>
Next Steps
- Practice: Create simple pages and experiment with different tags
- Learn CSS: Style your HTML pages
- Learn JavaScript: Add interactivity
Would you like me to elaborate on any specific HTML topic, such as forms, semantic HTML, or attributes?