HTML Basics: Building the Foundation of the Web

Last Updated: October 26, 2023 | Category: Web Development Fundamentals

Welcome to the foundational article of our web development series! HyperText Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It defines the structure of web content by using a system of tags.

What is HTML?

HTML stands for HyperText Markup Language. It's not a programming language; rather, it's a markup language. This means it uses tags to describe the content of a web page, such as headings, paragraphs, images, and links. When a web browser reads an HTML document, it renders the content according to these tags.

Core Concepts and Structure

An HTML document is a text file that contains HTML tags. The basic structure of an HTML document looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a simple paragraph.</p>
</body>
</html>

Key Elements Explained:

  • <!DOCTYPE html>: Declares the document type and version of HTML.
  • <html>: The root element of an HTML page.
  • <head>: Contains meta-information about the HTML document, such as character set, viewport settings, and the title.
  • <meta charset="UTF-8">: Specifies the character encoding for the document. UTF-8 is the most common and recommended.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport for responsive design, ensuring the page scales correctly on different devices.
  • <title>: Sets the title of the HTML document, which appears in the browser tab or window title bar.
  • <body>: Contains the visible content of the HTML document.
  • <h1> to <h6>: Define headings, with <h1> being the main heading and <h6> the smallest.
  • <p>: Defines a paragraph.

Common HTML Tags

HTML uses tags enclosed in angle brackets (<tagname>). Most tags come in pairs: an opening tag and a closing tag (</tagname>).

Text Formatting Tags:

  • <b> or <strong>: Bold text. <strong> also implies importance.
  • <i> or <em>: Italic text. <em> also implies emphasis.
  • <u>: Underlined text (use sparingly, as it can be confused with links).
  • <mark>: Highlighted text.

Links and Images:

Hyperlinks allow navigation between web pages.

<a href="https://www.example.com">Visit Example.com</a>

The <a> tag is used for links, with the href attribute specifying the URL.

Images are embedded using the <img> tag.

<img src="path/to/your/image.jpg" alt="Description of image">

The src attribute points to the image file, and the alt attribute provides alternative text for accessibility and SEO.

Lists:

HTML supports ordered (numbered) and unordered (bulleted) lists.

Unordered List:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Ordered List:

<ol>
    <li>First step</li>
    <li>Second step</li>
</ol>

Attributes

Attributes provide additional information about HTML elements. They are always specified in the start tag and usually come in name/value pairs like name="value".

Best Practices

  • Always include the <!DOCTYPE html> declaration.
  • Use semantic HTML tags (e.g., <nav>, <article>, <section>) for better structure and accessibility.
  • Provide descriptive alt text for images.
  • Validate your HTML to catch errors.

Understanding HTML is the first step to creating dynamic and engaging web experiences. In the next article, we'll dive into CSS to learn how to style these elements.