HTML Introduction

HTML stands for HyperText Markup Language and is the language used to create web pages. It is the basis of every single page on the web. Developed by the British physicist Tim Berners-Lee in 1990, the language has gone through lots of versions, with the latest being HTML5.

The anatomy of a page

A web page consists of basically three elements: the head, the body and the footer wrapped around the HTML tag.

A basic example of a web page's anatomy is depicted below.

                     
                      
                                           
              <!DOCTYPE html>
                  <html>
                        <head>
                                <title>Page Title</title>
                        </head>
                        <body>
                                <header>
                                        <h1>Heading</h1>
                                        <nav>
                                                <ul>
                                                        <li><a href="#">Link 1</a></li>
                                                        <li><a href="#">Link 2</a></li>
                                                        <li><a href="#">Link 3</a></li>
                                                </ul>
                                        </nav>
                                </header>
                                <main>
                                        <section>
                                                <h2>Section Heading</h2>
                                                <p>Section content goes here...</p>
                                        </section>
                                        <section>
                                                <h2>Another Section Heading</h2>
                                                <p>More section content goes here...</p>
                                        </section>
                                </main>
                                <footer>
                                        <p>Copyright © 2023 Company Name</p>
                                </footer>
                        </body>
                  </html>

Now, Let's break down each of these elements:

<!DOCTYPE html> : This declaration at the very beginning of the document tells the browser which version of HTML is being used (in this case, HTML5).

<html>: This is the root element that wraps around the entire page.

<head>: This section contains metadata about the page, including the page title and any links to external resources like stylesheets or scripts.

<title>: This element specifies the title of the page, which appears in the browser's title bar and search engine results.

<body>: This is where the main content of the page goes.

<header>: This element typically contains the main header or banner of the page, including any navigation menus.

<h1>, <nav>, <ul>, <li>, and <a>: These elements are used to create the navigation menu in the header.

<main>: This element contains the main content of the page, which is typically divided into one or more sections.

<section>: This element represents a logical section of content on the page, such as an article or a sidebar.

<h2> and <p>: These elements are used to create headings and paragraphs within each section.

<footer>: This element typically contains information about the author, copyright, and other metadata about the page.

HTML semantic refers to the use of standard HTML elements to convey the meaning and structure of the content on a web page. In other words, it's the practice of using HTML elements to describe the purpose and role of the different parts of a web page, rather than just using generic divs and spans.

For example, instead of using a div element to create a header section, you would use the semantic header element. Similarly, you would use the semantic section element to group related content, and the semantic nav element to create a navigation bar.

Using semantic HTML has several benefits, including:

Accessibility: Screen readers and other assistive technologies rely on semantic HTML to properly interpret the content and provide an optimal experience for users with disabilities.

SEO: Search engines can better understand the content of a page when it's marked up semantically, which can improve the page's ranking in search results.

Maintainability: Semantic HTML makes it easier to understand the structure of a web page, which can make it easier to maintain and update the code over time.

Overall, using semantic HTML is an important best practice for building accessible, SEO-friendly, and maintainable web pages.