## Introduction
Welcome to Lesson 1.2: HTML Basics. This lesson is part of Module 1: Foundation - Understanding Frontend Development in the Frontend Development for Developers course. In this lesson, we'll explore the structure and semantics of web pages, HTML tags and attributes, and best practices for semantic markup. By the end of this lesson, you will be able to create well-structured HTML documents that are accessible and semantically correct, laying a solid foundation for your frontend development journey.
## Main Content
### Structure and Semantics of Web Pages
Understanding the structure and semantics of web pages is crucial for effective web development. HTML (Hypertext Markup Language) serves as the backbone of web content, organizing information in a meaningful way. Good structure allows browsers to render web pages correctly, while semantic HTML enhances accessibility and SEO (Search Engine Optimization).
HTML documents are structured hierarchically, starting with a `<!DOCTYPE html>` declaration, which informs the browser about the HTML version being used. Next comes the `<html>` element, encapsulating the entire page. Inside, you'll find two main sections: the `<head>` and the `<body>`. 
- The `<head>` section contains metadata, the title of the page, and links to stylesheets or scripts. 
- The `<body>` section includes all the content visible to users, such as text, images, and other media.
Using semantic elements, like `<header>`, `<footer>`, `<article>`, and `<section>`, helps convey meaning and structure to both users and search engines. For example, a `<header>` typically holds introductory content or navigational links, while a `<footer>` usually contains copyright information or links to privacy policies. 
### HTML Tags and Attributes
HTML is built on a variety of tags, each serving different purposes. Tags are the building blocks of HTML documents, and they generally come in pairs: an opening tag and a closing tag. For instance, the `<p>` tag is used for paragraphs and is written as `<p>Your text here</p>`. 
Attributes provide additional information about elements and are always included in the opening tag. For example, the `<img>` tag, used to embed images, requires a `src` attribute to specify the image's source URL: `<img src="image.jpg" alt="Description of image">`. The `alt` attribute is particularly important for accessibility, as it offers a text alternative for screen readers.
Understanding the common tags is essential. Here are a few key ones:
- `<h1>` to `<h6>`: Headings, with `<h1>` being the most important.
- `<ul>` and `<ol>`: Unordered and ordered lists, respectively.
- `<a>`: Anchor tag for hyperlinks.
When using attributes, remember that they should be used to enhance the functionality and accessibility of your web pages, making them more user-friendly.
### Best Practices for Semantic Markup
Implementing semantic markup is vital for creating accessible and SEO-friendly web pages. Here are some best practices to follow:
1. **Use Semantic Elements**: Always opt for semantic HTML elements over generic `<div>` or `<span>` tags. This practice improves readability and helps search engines understand your page's structure better.
2. **Properly Nest Elements**: Ensure that HTML elements are nested correctly to maintain structural integrity. For instance, a `<div>` should not contain a `<p>` that is not closed properly before starting another `<div>`.
3. **Add Alt Text to Images**: Using the `alt` attribute in `<img>` tags is essential for accessibility. It describes the image to users who may not be able to see it, like those using screen readers.
4. **Use Headings Hierarchically**: Start with `<h1>` for the main title and use subsequent headings (`<h2>`, `<h3>`, etc.) for subheadings. This hierarchy aids in content organization and improves SEO.
5. **Keep Content Accessible**: Use ARIA (Accessible Rich Internet Applications) roles and properties when needed to enhance accessibility but avoid overusing them. Rely on semantic HTML first.
By adhering to these best practices, you can create web pages that are not only visually appealing but also functional and inclusive.
## Conclusion
In this lesson, we explored the structure and semantics of web pages, HTML tags and attributes, and best practices for semantic markup. We learned how to create well-structured HTML documents that enhance accessibility and improve user experience. By mastering these foundational concepts, you are now equipped to build effective web pages that meet industry standards. 
In the upcoming lesson, we will delve deeper into CSS basics, enhancing your ability to style and layout your web pages effectively.
## Reflection Questions
1. How can using semantic HTML elements improve the accessibility of your web pages?
2. What are the key differences between block-level and inline elements in HTML?
3. Why is it important to provide alt text for images, and how does it impact user experience?