DEV Community

Cover image for HTML5 Fundamentals and Basic Structure: A Beginner's Guide
Arthur Nascimento Assunção
Arthur Nascimento Assunção

Posted on

HTML5 Fundamentals and Basic Structure: A Beginner's Guide

#webdev #beginners #html

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:

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

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

  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

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:

<element attribute1="value1" attribute2="value2">inner content</element>
Enter fullscreen mode Exit fullscreen mode

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:

<head>
  <link rel="stylesheet" href="styles.css" />
</head>
Enter fullscreen mode Exit fullscreen mode 
<head>
  <img src="image.png" alt="description" />
</head>
Enter fullscreen mode Exit fullscreen mode

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:

<!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>
Enter fullscreen mode Exit fullscreen mode
  • <!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:

<!-- This is a comment message -->
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)

Read next

cordlesswool profile image

How to use generics in pipe-and-combine

Wolfgang Rathgeb -

0verread profile image

How to solve Data Synchronization in Next.js

Jeet -

anthonymartin profile image

BREAKING: Intel CEO Resigns After Controversy

anthonymartin -

mahiworld profile image

How to Uncheck All Your Twitter (X) Interests in Bulk with Developer Tools (Quick Method)

Mahendra -