HTML Basics - Learn to Code

Understanding the Building Blocks of the Web

HTML, or HyperText Markup Language, is the standard markup language for documents designed to be displayed in a web browser. It defines the meaning and structure of web content.

What is HTML?

HTML isn't a programming language; it's a markup language. This means it uses tags to annotate text, images, and other content to create a structured document. Think of it as the skeleton of a webpage.

Core HTML Tags

Every HTML document starts with a basic structure. Here are some fundamental tags you'll encounter:

The Document Type Declaration

This declaration tells the browser which version of HTML the page is written in. It should be the very first thing in your document.

Example:

The HTML Element

This is the root element of an HTML page. It wraps all content on the page.

Example:

<html>
  <!-- Content goes here -->
</html>

The Head Element

The <head> element contains meta-information about the HTML document, such as its title, character set, and links to stylesheets.

Example:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Webpage Title</title>
  <link rel="stylesheet" href="style.css">
</head>

<meta charset="UTF-8">: Specifies the character encoding for the document, which is important for displaying text correctly.
<meta name="viewport" ...>: Configures the viewport for responsive design, making your site look good on all devices.
<title>: Sets the title that appears in the browser tab or window.
<link>: Used to link to external resources, most commonly CSS files.

The Body Element

The <body> element contains the visible page content, such as headings, paragraphs, images, and links.

Example:

<body>
  <h1>Welcome to My Page!</h1>
  <p>This is a paragraph of text.</p>
</body>

Common Content Tags

Here are some of the most frequently used tags for structuring content:

<h1> to <h6>: Heading tags, with <h1> being the most important.
<p>: Paragraphs of text.
<a>: Anchor tags, used for creating hyperlinks. The href attribute specifies the URL.
<img>: Images. The src attribute specifies the image URL, and the alt attribute provides alternative text for accessibility.
<ul>: Unordered lists (bullet points).
<ol>: Ordered lists (numbered lists).
<li>: List items within <ul> or <ol>.
<div>: A generic division or container element, often used for styling or grouping content.
<span>: A generic inline container, often used to style parts of a text.

Example: A Simple HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a simple paragraph.</p>
  <a href="https://www.example.com">Visit Example.com</a>
  <img src="image.jpg" alt="A placeholder image">
</body>
</html>

Next Steps

Understanding these basic HTML tags is your first step. Practice building simple pages, and soon you'll be ready to move on to styling with CSS!

Next Lesson: CSS Introduction