If you're new to the world of web development, welcome!
Today, I'll discuss one of the most fundamental aspects of the internet - HTML, which stands for HyperText Markup Language. In essence, HTML is the language that gives every webpage its structure.
Imagine building a house, before you can hang curtains, install furniture, or add fancy artwork, you need a solid framework. The same is true for websites. HTML is like the framework of a house, providing a place to hang the "curtains" (CSS) and install the "furniture" (JavaScript).
Let's break down a basic HTML document to understand its key parts:
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Welcome to my Website!</h1>
<p>This is a paragraph about me.</p>
<img src="myphoto.jpg" alt="A photo of me">
</body>
</html>
📚 Here's what each part does:
1. <!DOCTYPE html>: This declaration helps the browser understand what version of HTML the page is written in. In this case, we're using HTML5.
2. <html>: The opening and closing html tags (`<html>` and </html>) encompass all the content on your web page.
3. <head>: The head tag contains information about the web page that isn't displayed on the page itself, like the title that appears on the tab in your browser.
4. <title>: The title tag defines the title of the webpage, which appears in the browser's tab.
5. <body>: The body tag is where the magic happens! Everything that you see displayed on the webpage itself (like text, images, and links) lives inside these tags.
6. <h1>: This is a heading tag. HTML has six levels of headings, from <h1> (the most important) to <h6> (the least important).
7. <p>: The paragraph tag defines a paragraph of text.
8. <img>: The img tag is used to embed an image in the webpage. The src attribute specifies the path to the image file, and the alt attribute provides an alternate text for the image, which is important for accessibility and when the image can't be displayed.
Think of these HTML elements as different parts of the house. The <head> is like the hidden wiring and plumbing, while the <body> contains the visible structure and decor.
And there you have it! This is the very basic structure of an HTML page. While there's a lot more to HTML than what I’ve covered here, understanding these basics is a crucial first step in your journey as a web developer.
Learn more for free at the amazing freeCodeCamp
Stay tuned for my next post on how CSS acts as the interior designer for our HTML house. Happy coding! 🚀👩💻