HTML, or HyperText Markup Language, serves as the backbone of the World Wide Web, providing the essential structure for creating and organizing content on the Internet. As the foundational language for web development, HTML enables the creation of web pages by defining the structure and layout of text, images, links, and multimedia. This introductory guide aims to demystify HTML for beginners, offering a comprehensive overview of its key components, syntax, and the fundamental principles that govern its use. Whether you're a budding web developer or someone simply curious about how websites come to life, this Class 1 article will lay the groundwork for your understanding of HTML, setting the stage for a journey into the exciting realm of web development.

The basic structure of an HTML document

An HTML document has a simple and essential structure that includes basic elements to create a webpage. Here's a breakdown of the fundamental components:

<!DOCTYPE html>: This declaration specifies the HTML version being used, ensuring proper rendering in web browsers.
Example:

```
html
<!DOCTYPE html>
```

<html>: The <html> element encapsulates the entire content of the webpage.
Example:

html
<html>
  <!-- Your content goes here -->
</html>

<head>: Inside the <head>, you include meta-information about the document, such as the title and link to external stylesheets or scripts.
Example:

html
<head>
  <title>My First Webpage</title>
</head>

<body>: The <body> tag contains the main content of your webpage, including text, images, links, and other elements.
Example:

html
<body>
  <h1>Welcome to My Webpage</h1>
  <p>This is a simple example of an HTML document.</p>
</body>

Putting it all together:

html
<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a simple example of an HTML document.</p>
  </body>
</html>

Example Output (how it might look in a web browser):

Welcome to My Webpage

This is a simple example of an HTML document.

Understanding and using these basic HTML elements is the foundation for creating more complex and dynamic web pages.

Creating a simple HTML page

Creating a simple HTML page is an exciting way to dive into the world of web development. Follow these easy steps to craft your first webpage:

Open a Text Editor: Start by opening a plain text editor on your computer. This could be Notepad (Windows), TextEdit (Mac), or any code editor like Visual Studio Code, Atom, or Sublime Text.
Write the HTML Structure:

Begin with the <!DOCTYPE html> declaration to specify the HTML version.
Add the <html> element to encapsulate your entire content.
Inside <html>, include <head> for metadata and <body> for your main content.

Example:

html
<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first webpage.</p>
  </body>
</html>

Save the File: Save your file with an ".html" extension, like "index.html". This extension tells the browser that it's an HTML file.

Open in a Web Browser:

Find your saved HTML file and double-click it.
Your default web browser will open, displaying your simple webpage.

Example Output:

Hello, World!

This is my first webpage.

Congratulations! You've just created and viewed your first HTML page. Feel free to experiment by adding more text, images, or links to explore the possibilities of web development. As you become more comfortable, you can learn additional HTML elements and styles to enhance your web pages further.

Head Elements

Here's a list of common HTML elements that typically go inside the <head> tag:

1. <title>: Defines the title of the HTML document, which appears in the browser tab or window.

html
<head>
  <title>My Webpage Title</title>
</head>

2. <meta>: Provides metadata about the HTML document, such as character set, description, and keywords.

html
<head>
  <meta charset="UTF-8">
  <meta name="description" content="A description of my webpage">
  <meta name="keywords" content="HTML, web development, beginners">
</head>

3. <link>: Links to external resources, such as stylesheets (CSS) or icons.

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

4. <style>: Contains internal CSS styles for the document.

html
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
  </style>
</head>

5. <script>: Embeds or references JavaScript code.

html
<head>
  <script src="script.js"></script>
</head>

6. <base>: Specifies a base URL for all relative URLs in a document.

html
<head>
  <base href="https://www.example.com/">
</head>

These elements contribute to the document's metadata, styling, and external resource links, enhancing the overall structure and presentation of your HTML document.

Base URL, how it works and what does it do?

The <base> element in HTML is used to specify a base URL for all relative URLs within a document. It provides a central reference point for resolving relative URLs, affecting elements like anchors (<a>), images (<img>), and scripts (<script>). Let's break down how it works and what it does:

html
<head>
  <base href="https://www.example.com/">
</head>

How it works:

When a browser encounters a relative URL (a URL without the full address) in your document, it combines the relative URL with the base URL to determine the complete URL.

Example: Suppose you have the following anchor link in your HTML:

html
<a href="/page.html">Go to Page</a>

With the <base> element set as shown, the complete URL for this link will be https://www.example.com/page.html.

What it does:

Consistent Base URL: It ensures that all relative URLs in the document are resolved against the specified base URL. This is especially useful when working with assets or links that are distributed across different directories on a website.
Simplifies URL Management: By setting a base URL, you can avoid repeating the same base URL for multiple elements. If the base URL changes, you only need to update it in one place—the <base> element.
Base for All Relative URLs: It acts as a default or starting point for resolving all relative URLs in the document, providing a standardized reference for browser interpretation.

In summary, the <base> element simplifies URL management by providing a consistent base for all relative URLs in your HTML document. This can be particularly beneficial when working with complex directory structures or when migrating content between different environments.

Body Elements

Here is a list of common HTML elements that are typically used within the <body> tag of an HTML document:

Text Content:

<h1> to <h6>: Heading levels 1 to 6.
<p>: Paragraph.
<br>: Line break.
<hr>: Horizontal rule.

Inline Text Styling:

<strong>: Strong importance (bold).
<em>: Emphasis (italic).
<u>: Underline.

Lists:

<ul>: Unordered list.
<ol>: Ordered list.
<li>: List item.

Links and Anchors:

<a>: Anchor (creates hyperlinks).

Images:

<img>: Image.

Tables:

<table>: Table container.
<tr>: Table row.
<td>: Table data cell.
<th>: Table header cell.

Forms:

<form>: Form container.
<input>: Input field.
<textarea>: Text area.
<button>: Button.

Semantic Elements:

<article>: Article content.
<section>: Section of content.
<header>: Header of a section.
<footer>: Footer of a section.
<nav>: Navigation menu.
<aside>: Sidebar content.
<main>: Main content area.

Interactive Elements:

<button>: Button.
<a>: Anchor (when used for navigation).
<input type="button">: Input button.

Media Elements:

<audio>: Audio player.
<video>: Video player.

Embedding:

<iframe>: Inline frame for embedding external content.

Grouping Content:

<div>: Generic container.
<span>: Generic inline container.

Special Characters:

<: Less than (<).
>: Greater than (>).
&: Ampersand (&).

These elements cover a wide range of functionalities, allowing you to create diverse and interactive content within the body of your HTML document. We will learn each step with plenty of examples to understand properly, our next class subjects will be

Class 2: HTML ElementsUnderstanding HTML tags

Text and formatting elements (headings, paragraphs, line breaks)
Lists (ordered and unordered)
Hyperlinks (anchor tags)

HTML, Class 1: Introduction to HTMLOverview of HTML