> For the complete documentation index, see [llms.txt](https://edrus.gitbook.io/mt-it/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://edrus.gitbook.io/mt-it/1st-month/week-1/html-css/html/learn-more/semantic-html.md).

# Semantic HTML

Semantic HTML introduces meaning to the code we write.

Before Semantic HTML the elements didn’t have any meaning as to what it does or what content goes in it. An element such as `<div>` was used as a general-purpose element to create things from headers to footers to articles.

```html
<!-- Non Semantic HTML --><div id="footer">  <p>This is a footer</p></div>
```

With Semantic HTML, we were introduced to elements that tell developers and browsers exactly what it does and what content should go in it.

```html
<!-- Semantic HTML --><footer>  <p>This is a footer</p></footer>
```

### Why Use Semantic HTML?

* **Accessibility**: Semantic HTML makes webpages accessible for mobile devices and for people with disabilities as well. This is because screen readers and browsers are able to interpret the code better.
* **Readability**: Semantic HTML also makes the website’s source code easier to read for other web developers.
* **SEO**: It improves the website SEO, or Search Engine Optimization, which is the process of increasing the number of people that visit your webpage. With better SEO, search engines are better able to identify the content of your website and weight the most important content appropriately.

### Semantic HTML

[\<article>](https://www.codecademy.com/resources/docs/html/semantic-html/article)Represents a part of a page which is self-contained and could be published elsewhere. Common uses include blog posts or magazine articles.

[\<aside>](https://www.codecademy.com/resources/docs/html/semantic-html/aside)Represents a part of a page which is relevant to the current content, but not a part of it directly. It can be used for related links, for clarifying a statement from the current article, or even for advertising meant for the current page.

[\<details>](https://www.codecademy.com/resources/docs/html/semantic-html/details)Encapsulates the \<summary> element and any additional details which are only visible when the element is in an open state.

[\<figcaption>](https://www.codecademy.com/resources/docs/html/semantic-html/figcaption)Describes the media encapsulated within the \<figure> element.

[\<figure>](https://www.codecademy.com/resources/docs/html/semantic-html/figure)Encapsulates media such as an image, diagram, or code snippet.

[\<footer>](https://www.codecademy.com/resources/docs/html/semantic-html/footer)Represents a part of a page which is meant to be at the end of a completed block of content. Common uses include copyright information for the page or additional links to relevant pages.

[\<header>](https://www.codecademy.com/resources/docs/html/semantic-html/header)Represents a part of a page which is meant to be introductory. It can include heading tags, a logo, a search bar, and navigation elements.

[\<main>](https://www.codecademy.com/resources/docs/html/semantic-html/main)Represents the primary content within the body element of the web page

[\<mark>](https://www.codecademy.com/resources/docs/html/semantic-html/mark)Represents part of a text that should be rendered as marked or highlighted.

[\<nav>](https://www.codecademy.com/resources/docs/html/semantic-html/nav)Defines a block of navigation links such as menus and tables of contents.

[\<section>](https://www.codecademy.com/resources/docs/html/semantic-html/section)Defines elements in a document, such as chapters, headings, or any other area of the document with the same theme.

[\<summary>](https://www.codecademy.com/resources/docs/html/semantic-html/summary)Acts as a label for the \<details> element and reveals additional information when clicked.

[\<time>](https://www.codecademy.com/resources/docs/html/semantic-html/time)Represents a time-related piece of information and can take a datetime attribute that makes it machine-readable.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://edrus.gitbook.io/mt-it/1st-month/week-1/html-css/html/learn-more/semantic-html.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.