Introduction

HTML (Hypertext Markup Language) is a fundamental language for building web pages. It provides the structure and content of a webpage, defining the elements and their relationships. Understanding HTML is crucial for anyone venturing into web development.

In this article, we will explore the key concepts and document structure of HTML and how to use its elements, tags and attributes effectively.

Prerequisite

This article serves as a beginner-friendly guide to HTML, the foundation of web development.

No matter your starting point, whether you're new to the concept or simply need a refresher, we'll cover everything from the fundamental structure of an HTML document to the usage of different elements and tags.

You'll learn how to create headings, paragraphs, links, images, lists, tables, forms, and much more.

HTML Document Structure

HTML is a markup language that defines the structure of your web content. HTML consists of a series of elements that you can use to enclose, or wrap different parts of the web content to make it appear in a certain way or act in a certain way.

Every HTML document begins with a doctype declaration, which informs the browser about the version of HTML being used. The <html> tag is the root element and encapsulates the entire document. Inside the <html> tag, we have two primary sections: the <head> and <body> sections.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Head Section

The <head> section in HTML does not directly display visible content on the page but instead contains essential information that contributes to the overall structure, presentation, and functionality of the document.

The <head> section contains metadata about the document, including the title, character encoding, and linking to external stylesheets or scripts.

Below is what the <head> section should include and how it should be structured:

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Welcome to my website! Explore a wide range of products and services.">
  <meta name="keywords" content="website, products, services, online store">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Web Page</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>

<meta> Tags:

- <meta charset="...">: It defines the character encoding for the HTML document, ensuring that the browser interprets the text correctly. Common character encodings include "UTF-8" for universal compatibility.

- <meta name="description" content="...">: This tag provides a summary of the page's content. Search engines (eg. Google) often use this description in search results, so that when content relating to what your website is for is searched.

- <meta name="keywords" content="...">: This tag specifies a list of keywords or phrases that are relevant to the page's content. While search engines may not heavily rely on keywords for ranking, they can still help improve discoverability.

- <meta name="viewport" content="...">: This tag controls the viewport behaviour on mobile devices. It allows you to set the width, scale, and initial zoom level, ensuring that your web page is displayed properly on different screen sizes.

<title> tag:

The <title> tag: It specifies the title of the HTML document, which appears as the title of the browser window or tab when the page is loaded. It is also used by search engines to determine the page's relevance to a search query. The content within the <title> tag should be concise, descriptive, and accurately represent the page's content.

Linking External Resources:

- <link rel="stylesheet" href="...">: This tag is used to link an external CSS.

- <script src="..."></script>: This tag is used to link an external JS.

Body Section

The <body> section is where the visible content is placed. This includes text, images, videos, links, tables, forms, and more. It forms the structure and layout of the webpage.

Below is an example of a webpage that demonstrates the usage of HTML. It showcases the title of the document, "Title of the document," which is specified in the head section. Additionally, the body section contains an HTML element; a paragraph of content "The content of the page."

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Welcome to my website! Explore a wide range of products and services.">
  <meta name="keywords" content="website, products, services, online store">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title of the document</title>
</head>
<body>
  <p>The content of the page</p>
</body>
</html>

HTML Elements, Tags & Attributes

The body section of an HTML structure is where the main content of a webpage resides. An HTML element is the fundamental building block that makes up a webpage. It represents different types of content, such as headings, paragraphs, images, links, and more. HTML elements are what we see and interact with when we visit a webpage. These elements are enclosed within the opening and closing <body> tags.

The code above represents a heading element with the text "Example Heading".

An HTML element consists of several components:

Tag: The tag is the core component of an HTML element and defines the type of element. In this example, the tag is <h1>, which stands for "heading level 1". It indicates that the text within the element should be treated as the main heading of the webpage.
Attributes: Attributes provide additional information about an element. They are specified within the opening tag and consist of a name-value pair. In the given code, the attribute is class="primary", the class attribute is used to assign a class name to the element, and in this case, it is set to "primary". Classes are commonly used for styling and selecting elements with CSS.
Text Content: The text content is the actual content enclosed between the opening and closing tags. In our example, it is "Example Heading". This is the text that will be displayed as the heading on the webpage.

Types of Elements

Block-Level Elements

Block-level elements are HTML elements that create visually distinct blocks on a web page. They typically start on a new line and occupy the full width available within their parent container. Here are a few common block-level elements:

<div>: The <div> element is a generic container that groups other elements. It is commonly used to create sections or divisions within a web page.

Example:
```
  <div>
   <h1>Welcome to my Website</h1>
   <p>This is a paragraph within a div element.</p>
  </div>
```
<p>: The <p> element represents a paragraph of text. It is used to structure and organise textual content on a web page.

Example:
```
  <p>This is a paragraph of text.</p>
```
<h1> - <h6>: Heading elements are used to define different levels of headings on a web page. The <h1> element represents the highest level (most important) heading, while <h6> represents the lowest level (least important) heading.

Example:
```
  <h1>This is a Heading Level 1</h1>
  <h2>This is a Heading Level 2</h2>
```
<audio>: The <audio> element is used to embed audio content into an HTML document. The src attribute specifies the URL or file path of the audio file. The controls attribute adds audio controls (such as play, pause, and volume) to the audio player. The text between the opening and closing <audio> tags is displayed if the browser does not support the audio element.

Example:
```
  <audio src="audio.mp3" controls>
   Your browser does not support the audio element.
  </audio>
```
<video>: The <video> element is used to embed video content into an HTML document. The src attribute specifies the URL or file path of the video file. The controls attribute adds video controls (such as play, pause, and volume) to the video player. The text between the opening and closing <video> tags is displayed if the browser does not support the video element.

Example:
```
  <video src="video.mp4" controls>
   Your browser does not support the video element.
  </video>
```

<table>: The <table> element is used to create a table with rows and columns. The <table> element creates the table. <tr> represents a table row, and <th> and <td> represent table headers and cells, respectively. The example above creates a table with two columns and two rows.

Example:

  <table>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
    </tr>
  </table>

<ul>: The <ul> element represents an unordered list in HTML. It is used to create a bullet-point list of items, each represented by an <li> (list item) element.

Example:
```
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
```
<ol>: The <ol> element is used to create an ordered list in HTML. It represents a list of items where the order of the items is important. Each item in the list is marked with a number by default.

Example:
```
  <ol>
   <li>First item</li>
   <li>Second item</li>
   <li>Third item</li>
  </ol>
```
In the above example, we have an ordered list with three items. The list items are represented by the <li> (list item) element. The browser automatically adds the numbers (1., 2., 3.) before each list item to indicate the order.

The <ol> element also supports the type attribute, which allows you to specify the type of numbering or bullet style to be used. The possible values for the type attributes are:

- "1" (default): Numbers (1, 2, 3, ...)

- "A": Uppercase letters (A, B, C, ...)

- "a": Lowercase letters (a, b, c, ...)

- "I": Uppercase Roman numerals (I, II, III, ...)

- "i": Lowercase Roman numerals (i, ii, iii, ...)

Example with type attribute:
```
  <ol type="A">
   <li>First item</li>
   <li>Second item</li>
   <li>Third item</li>
  </ol>
```
<form>: The <form> HTML forms allow users to enter and submit data to a server. Let's explore the key elements and attributes used in creating forms.

Form Structure:

The <form> tag is used as a container for form elements.
```
  <form action="/submit" method="post" enctype="multipart/form-data">
  </form>
```
- The action attribute specifies the URL or script for form data processing.

- The method attribute defines the HTTP method for form submission.

- The enctype attribute determines how form data is encoded and sent.

Form Controls:

HTML provides various form controls for capturing user input. Here are some commonly used ones:

- Text Inputs: Text inputs are used to collect single-line text from users. The type attribute specifies the input type as "text." The name attribute defines the name of the input field, which is sent to the server upon form submission.
```
  <label for="username">Username:</label>
  <input type="text" name="username" placeholder="Enter your username">
```
- Password Inputs: Password inputs are similar to text inputs. The type attribute is set to "password." The placeholder attribute displays a hint to users about the expected input.
```
  <label for="password">Password:</label>
  <input type="password" name="password" placeholder="Enter your password">
```
- Checkboxes: Checkboxes allow users to select multiple options from a list. The type attribute is set to "checkbox." The value attribute specifies the value associated with the checkbox.
```
  <input type="checkbox" id="option1" name="options" value="option1">
  <label for="option1">Option 1</label><br>
  <input type="checkbox" id="option2" name="options" value="option2">
  <label for="option2">Option 2</label>
```
- Radio Buttons: Radio buttons allow users to select a single option from a list. The type attribute is set to "radio." All radio buttons sharing the same name attribute will be mutually exclusive.
```
  <input type="radio" id="option1" name="options" value="option1">
  <label for="option1">Option 1</label><br>
  <input type="radio" id="option2" name="options" value="option2">
  <label for="option2">Option 2</label>
```
- Select Dropdowns: Select dropdowns provide a dropdown menu of options for users to choose from. The <select> element creates the dropdown menu. The <option> elements inside

the <select> represent the available options.
```
  <label for="country">Country:</label>
  <select id="country" name="country">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="ca">Canada</option>
  </select>
```
- Text Areas: Text areas allow users to enter multiple lines of text. The <textarea> element defines the text area. The rows and cols attributes determine the size of the text area.
```
  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4" cols="30" placeholder="Enter your message"></textarea>
```
Form Validation:

HTML5 provides built-in client-side form validation capabilities. Here are some common validation attributes:

- Required Fields: The required attribute ensures the field must be filled in before submitting.
```
  <input type="text" id="name" name="name" required>
```
- Minimum and Maximum Length: The minimum length and maximum length attributes define the acceptable input length.
```
  <input type="text" id="username" name="username" minlength="3" maxlength="10">
```
- Pattern Matching: The pattern attribute uses a regular expression to validate the input.
```
  <input type="password" name="password" pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$" required>
```
The provided pattern enforces the following password requirements:

At least one uppercase letter (A-Z)

At least one lowercase letter (a-z)

At least one digit (0-9)

At least one special character from the set (@, $, !, %, *, ?, or &)

Minimum length of 8 characters.

The required attribute ensures the field must be filled in before submitting.

check for more block-level elements on htmlreference.io

Inline Elements

Inline elements are HTML elements that do not create distinct blocks but rather flow within the text or other inline elements. They occupy only the necessary space required by their content. Here are a few common inline elements:

<span>: The <span> element is a generic inline container that can be used to style or group-specific parts of text within a larger block of content.

Example:
```
  <p>This is a <span style="color: blue;">blue</span> text.</p>
```
<a>: The <a> element, also known as the anchor element, is used to create hyperlinks. It allows you to link to other web pages, files, or specific parts of a web page. The <a> element is used along with the href attribute, which specifies the URL or destination of the link.

Example:
```
  <a href="https://www.example.com">Visit Example Website</a>
```
In the example above, clicking on the text "Visit Example Website" will navigate the user to the URL specified in the href attribute.

Target attributes for controlling how links open:

HTML provides target attributes to control how links open. By default, a link opens in the same browser window or tab. However, you can modify this behavior using target attributes such as _blank, _self, _parent, or _top.

Examples:

- _blank: Opens the linked document in a new browser window or tab.

- _self: Opens the linked document in the same window or tab (default behavior).

- _parent: Opens the linked document in the parent frame.

- _top: Opens the linked document in the full body of the window.
```
  <a href="https://www.example.com" target="_blank">Open in New Tab</a>
```
<img>: The <img> element is used to embed an image into an HTML document. The src attribute specifies the URL or file path of the image and the alt attribute provides alternative text for the image, which is displayed if the image fails to load or for accessibility purposes.

Example:
```
  <img src="image.jpg" alt="Description of the image">
```
<strong> and <em>: These elements are used to provide semantic meaning to the text. The <strong> element represents important or emphasized text, while the <em> element indicates stress or emphasis.

Example:
```
  <p>This is a <strong>strong</strong> statement.</p>
  <p>This is an <em>emphasized</em> text.</p>
```

check for more inline elements on htmlreference.io

Types of Tags

Paired Tags:

Paired tags, also known as opening and closing tags, are the most common type of HTML tags. They enclose content between an opening tag and a closing tag, defining where the content begins and ends. For example:

<p>This is a paragraph.</p>

In the above example, <p> is the opening tag, and </p> is the closing tag, surrounding the paragraph content.

Self-Closing or Empty Tags:

Self-closing tags also referred to as void or empty tags, do not require a closing tag. They are used for elements that do not contain any content or have no closing meaning. These tags are closed with a forward slash (/) before the closing angle bracket. For example:

The <img> tag is self-closing and is used to display images. It doesn't enclose any content and ends with the forward slash before the closing angle bracket.
The <hr/> tag is used to insert a horizontal rule or line in an HTML document. It is often used to visually separate sections of content.
The <br/> tag is used to insert a line break within a paragraph or block-level element in HTML. It creates a single line break, similar to pressing the "Enter" or "Return" key on a keyboard.

<img src="image.jpg" alt="Image description" />

<hr/>

<br/>

Examples of HTML Attributes

Attributes provide additional information or modify the behavior of HTML elements. They are specified within the opening tag of an element. Let's look at some common attributes:

Class and ID attribute

The class attribute is used to define one or more CSS classes for an element, allowing it to be styled with CSS and it is also used for JavaScript manipulation. The id attribute provides a unique identifier for an element. Example:

<p class="highlight">This paragraph has a custom class</p>
<div id="header">This div has a unique ID</div>

src and alt attribute

The src attribute specifies the source URL or file path of an image, while the alt attribute provides alternative text that is displayed if the image cannot be loaded. Example:

<img src="image.jpg" alt="A beautiful sunset">

href, target and download attribute

The href attribute is used to specify the target URL or destination of the link. It tells the browser where to navigate when the user clicks on the link. The value of the href attribute can be a web address (URL), a relative file path, or an anchor reference within the same webpage. In this case, when the user clicks on the link, it will navigate to the URL "google.com".

The target attribute is used to control how the linked page is opened. It specifies where the target URL should be displayed when the user clicks on the link.

<a href="https://www.google.com" target="_blank">Visit google.com in a new tab</a>

The download attribute is used within an anchor (<a>) tag to specify that the linked resource should be downloaded when clicked on, rather than being displayed or opened directly in the browser.

In the example below, the anchor tag <a href="images/cat.jpeg" download> Download Cat Image </a> creates a hyperlink that points to the image file "cat.jpeg" located in the "images" directory. When a user clicks on the link, the browser will initiate the download process for the image file rather than navigate to it.

<a href="images/cat.jpeg" download> Download Cat Image </a>

Bonus: Code Sample

You have provided below, hands-on experience to reinforce what you've learnt about HTML elements, tags, and attributes. By experimenting with the code samples below, you'll get a better understanding of how these elements work and how different attributes can modify their behaviour. Feel free to modify the code, play around with different attributes, or add your elements to see the results instantly.

https://codesandbox.io/s/introduction-to-html-ldg4o5?file=/index.html

Conclusion

By understanding the document structure, utilising different elements and tags, you can start building their web pages. However, if you are seeking a more in-depth understanding of HTML and its immense potential, I recommend delving into my article titled "An In-Depth Guide to HTML: The Art of Semantic Markup, Page Linking, and Best Practices." This comprehensive guide explores the use of semantic markup, best practices for writing HTML codes, as well as the importance of effective page linking. Remember to experiment and continue learning to unlock the full potential of HTML in creating dynamic and interactive web experiences.

Attribution

htmlreference.io

Introduction to HTML: Building Blocks of the Web

A Comprehensive Guide to HTML's Building Blocks: Exploring the Document Structure, Elements, Tags and Attributes of HTML for Web Development.

Table of contents