HTML5 Fundamentals and Basic Structure: A Beginner's Guide
Tags: webdev, beginners, html
Published: 2023-09-11 15:06:49

In this article, I'll introduce HTML5 approaching what is HTML5, what is a tag, and it parts, Doctype HTML5, basic structure.

## What is HTML and HTML5?

HTML stands for **Hypertext Markup Language**, and as the name suggests, it is a markup language rather than a programming language. HTML forms the foundation for developing web pages and web systems. It enables the delineation of different parts of a web page, such as headers, footers, menus, lists, paragraphs, images, buttons, and more. However, HTML doesn't handle element positioning; CSS is used for that purpose.

HTML5 is the fifth iteration of HTML and is the current version. It introduces new features, primarily focused on enhancing web semantics.

## How HTML5 Works

HTML and HTML5 function akin to XML files, resembling trees where elements have children (other elements). Each element, known as a **Tag**, is opened and closed, and elements can be nested within each other.

Consider the following example of an HTML file:

```html
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body lang="en">

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

  </body>
</html>
```

Observe that the HTML `<html>` tag is opened in the second line and closed in the last line. Inside the HTML element, there are `head` and `body` tags, which are siblings. These two tags are children of the `html` tag.

The `body` tag includes an attribute called `lang`, with a value of `en`.

Within the `body` section, there are two tags, `h1` and `p`. Proper indentation enhances code readability.

The first line contains the `DOCTYPE` tag, unique because it doesn't have a closing tag. This tag indicates that the document adheres to HTML5 standards.

### Anatomy of an HTML Tag

As mentioned earlier, a tag may have attributes, each with corresponding values. The structure of a tag is as follows:

```html
<element attribute1="value1" attribute2="value2">inner content</element>
```

Where:
- `<element ...` opens the element tag.
- `attribute1="value1"` is an attribute of the tag, representing characteristics like color, size, or other properties.
- inner content: This area can contain other tags, values (such as text or numbers), or nothing.
- `</element>` closes the tag.

### Self-Closing Tags

Most tags (except DOCTYPE) require a closing tag, but some can be self-closed within the opening tag. Two common cases include:

```html
<head>
  <link rel="stylesheet" href="styles.css" />
</head>
```

```html
<head>
  <img src="image.png" alt="description" />
</head>
```

Notice the trailing slash `/` at the end of the opening tag, signifying self-closure.

## Basic Structure and Your First HTML5 Code

Create `index.html` and use the following code:

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- External files (CSS, JS), and metadata -->
        <meta charset="utf-8" />
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
     </head>
     <body>
       <!-- Prefer class over id for CSS; id is mainly for JS -->
        <header class="header" id="header">
            Page Header
         </header>
         <nav class="nav">
            Menu
         </nav>
         
         <main class="content">
            <!-- Only one per page/document -->
            Main Content
         </main>
         
         <footer class="footer">
         </footer>
     </body>
</html>
```

- `<!DOCTYPE html>`: This indicates that the document is in **HTML format**.
- `html` element: It contains all elements in an HTML document.
- `head` element: It contains elements for **page configuration** (such as title, description, etc.), **external files** (such as JavaScript and CSS files), and **favicon**. There can only be one per page.
- `body` element: It's the body of the document; here are all elements directly related to **user interaction**. There can only be one per page.
- `header` element: It contains elements, including texts and images, for the **page header**. Usually, it is the top visible part on a site. There can only be one per section (one per `body`, one per `section`, one per `article`).
- `nav` element: It contains a **navigation menu**. There can be multiple per page, for example, one in the `header` and one in the `footer` or a primary and a secondary menu.
- `main` element: It contains the **main content** of the page. There can only be one per page.
- `footer` element: It contains elements, including texts and images, for the **page footer**. Usually, it is the bottom visible part on a site. There can only be one per section (one per `body`, one per `section`, one per `article`).
- `class` attribute in an HTML element: It **assigns one or more classes** to an element. Think of classes like categories in the real world; you can be in the student class, developer class, or human class, for example. In a later text, we'll learn more about this.

### Comments in HTML

As evident from the above code, HTML allows the inclusion of comments. The syntax is simple: start with `<!--` and end with `-->`. For instance:

```html
<!-- This is a comment message -->
```

## What Lies Ahead

In upcoming articles, you will delve into block tags, semantic web concepts (including semantic tags), and techniques for identifying tags. Stay tuned!