HTML Tutorial: The Skeleton of the Web

What is HTML?

HTML stands for HyperText Markup Language. It's the standard language used to create and structure the content of web pages. Think of it like the skeleton of a human body—it provides the fundamental structure and hierarchy that everything else is built upon. Every website you visit is built on a foundation of HTML. It's not a programming language, but a markup language, meaning it uses tags to "mark up" or define different types of content.

The Basic Document Structure

Every HTML document has a fundamental structure that tells the browser how to interpret the file. This is often called "boilerplate" code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
  </head>
  <body>
    <!-- Your visible content goes here -->
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
  • <!DOCTYPE html>: Declares that this document is an HTML5 document. This must always be the first line.
  • <html>: The root element that wraps all the content on the page. The lang="en" attribute is important for accessibility and search engines.
  • <head>: Contains meta-information about the document. This content is not displayed on the page itself.
  • <meta charset="UTF-8">: Specifies the character encoding for the document, ensuring text displays correctly across different languages.
  • <meta name="viewport" ...>: This crucial line makes your website responsive, ensuring it scales correctly on different devices like mobile phones and desktops.
  • <title>: Sets the title of the page, which appears in the browser tab.
  • <body>: Contains all the visible content of the page, such as headings, paragraphs, images, and links.

Block vs. Inline Elements

All HTML elements generally fall into one of two categories:

  • Block-level Elements: These elements always start on a new line and take up the full width available. Think of them as paragraphs in a book. Examples include <h1>, <p>, <div>, and <ul>.
  • Inline Elements: These elements do not start on a new line and only take up as much width as necessary. They appear "in line" with the surrounding text. Examples include <a>, <strong>, <em>, and <span>.

Semantic HTML: Building with Meaning

While you could build a whole website using only <div> tags, it's better to use semantic HTML tags. These tags describe their content's meaning to both the browser and developers, improving accessibility and SEO (Search Engine Optimization).

  • <header>: A container for introductory content or a set of navigational links.
  • <nav>: Defines a set of navigation links.
  • <main>: Specifies the main, dominant content of the document. There should only be one per page.
  • <section>: Defines a thematic grouping of content.
  • <article>: Represents a self-contained piece of content, like a blog post or news article.
  • <aside>: Defines content aside from the main content (like a sidebar).
  • <footer>: Defines a footer for a document or section, typically containing authorship, copyright, and contact info.
<body>
  <header>
    <h1>My Awesome Website</h1>
    <nav>...navigation links...</nav>
  </header>
  <main>
    <article>...main article content...</article>
  </main>
  <footer>
    <p>© 2025 Pietopy</p>
  </footer>
</body>

Creating Forms for User Input

Forms are essential for collecting user data, such as in login pages, contact forms, or search bars. The <form> element is a container for different types of input elements.

<form action="/submit-your-data" method="post">
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password"><br><br>
  
  <input type="submit" value="Submit">
</form>

Key form elements include:

  • <form>: The wrapper for the entire form. The action attribute defines where the data is sent, and method defines the HTTP method (usually "GET" or "POST").
  • <label>: Provides a caption for an item in a user interface. The for attribute should match the id of the input it describes, which is important for accessibility.
  • <input>: The most versatile form element. Its behavior is defined by its type attribute:
    • type="text": A single-line text field.
    • type="password": A single-line text field where the text is obscured.
    • type="checkbox": A check box allowing single values to be selected/deselected.
    • type="radio": A radio button, allowing one choice to be selected from a group.
    • type="submit": A button that submits the form.
  • <textarea>: A multi-line text input control.
  • <button>: A clickable button, which can also be used to submit forms.