Introduction to HTML

Welcome to the foundational lesson of web development! In this module, we'll dive into the core language that structures every webpage: HyperText Markup Language (HTML).

What is HTML?

HTML stands for HyperText Markup Language. It's the standard markup language used to create web pages. Think of HTML as the skeleton of a webpage, providing the structure and content.

It uses a system of elements (also called tags) to define different parts of a document, such as headings, paragraphs, images, links, and more.

Basic HTML Structure

Every HTML document follows a basic structure. Here's a typical example:

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

Explanation of Tags:

<!DOCTYPE html>: Declares the document type and the HTML version.
<html>: The root element of an HTML page.
<head>: Contains meta-information about the HTML document, such as character set, title, and links to stylesheets.
<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, ensuring the page looks good on various devices.
<title>: Sets the title that appears in the browser tab or window title bar.
<body>: Contains the visible content of the HTML document.
<h1>: Defines a level 1 heading (the largest).
<p>: Defines a paragraph.

Common HTML Elements

Headings

HTML provides six levels of headings, from <h1> to <h6>, where <h1> is the most important (or largest) and <h6> is the least important (or smallest).

Example Headings:

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

Paragraphs

The <p> tag is used to define a paragraph of text.

Example Paragraph:

<p>This is a sample paragraph. It contains text that will be displayed on the webpage.</p>

Links (Anchors)

The <a> tag is used to create hyperlinks to other pages or resources. The href attribute specifies the URL of the page the link goes to.

Example Link:

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

Images

The <img> tag is used to embed images. The src attribute specifies the path to the image file, and the alt attribute provides alternative text for the image (important for accessibility).

Example Image:

<img src="images/my-image.jpg" alt="A descriptive caption for the image">

Lists

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

Unordered List (`<ul>`)

Example Unordered List:

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

Ordered List (`<ol>`)

Example Ordered List:

<ol>
    <li>First Step</li>
    <li>Second Step</li>
    <li>Third Step</li>
</ol>

Attributes

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

href in <a> tag (specifies the URL)
src in <img> tag (specifies the image source)
alt in <img> tag (alternative text)
lang in <html> tag (specifies language)

Next Steps

You've just taken your first step into the world of HTML! Understanding these fundamental elements will allow you to start building the basic structure of any webpage. In the next lesson, we'll explore how to style these elements using CSS.

Continue to CSS Introduction