In Module 3 of our HTML course, we'll explore the world of attributes and semantic HTML. Attributes provide additional information about an element, while semantic HTML helps to define the structure and meaning of a web page.

Attributes

Attributes are added to HTML elements to provide additional information about the element. They consist of a name and a value, separated by an equals sign.

Example:

<a href="(link unavailable)">Visit Example</a>

In this example, href is the attribute name, and (link unavailable) is the value.

Syntax:

<element attribute="value">content</element>

Common Attributes

Here are some common attributes used in HTML:

- href: specifies the URL of a hyperlink
- src: specifies the URL of an image
- alt: specifies the alternative text for an image
- title: specifies the title of an element
- style: specifies the CSS styles for an element
- class: specifies the CSS class for an element
- id: specifies the unique ID for an element

Semantic HTML

Semantic HTML is a way of using HTML elements to provide meaning to the structure of a web page. This helps search engines and screen readers understand the content of the page.

Header Elements

Header elements (<header>) define the header section of a web page or article.

Example:

<header>
<h1>Main Heading</h1>
<p>This is a paragraph of text.</p>
</header>

Nav Elements

Nav elements (<nav>) define a section of navigation links.

Example:

<nav>
<ul>
<li><a href="(link unavailable)">Home</a></li>
<li><a href="(link unavailable)">About</a></li>
<li><a href="(link unavailable)">Contact</a></li>
</ul>
</nav>

Main Elements

Main elements (<main>) define the main content section of a web page.

Example:

<main>
<h2>Section Heading</h2>
<p>This is a paragraph of text.</p>
</main>

Section Elements

Section elements (<section>) define a self-contained section of related content.

Example:

<section>
<h2>Section Heading</h2>
<p>This is a paragraph of text.</p>
</section>

Article Elements

Article elements (<article>) define an independent piece of content, such as a blog post or news article.

Example:

<article>
<h2>Article Heading</h2>
<p>This is a paragraph of text.</p>
</article>

Footer Elements

Footer elements (<footer>) define the footer section of a web page or article.

Example:

<footer>
<p>This is a paragraph of text.</p>
</footer>

Conclusion

In this module, we've explored the world of attributes and semantic HTML. By using attributes and semantic HTML, you can add meaning and structure to your web pages, making them more accessible and search engine friendly. Remember to use attributes and semantic HTML elements correctly to ensure your web pages are well-structured and maintainable.