HTML Basics

Introduction
Basic Structure
Elements & Tags
Attributes
Headings
Paragraphs
Links
Images
Lists

What is HTML?

HTML stands for HyperText Markup Language. It's the standard markup language used to create web pages and web applications. It describes the structure of a web page semantically and originally included cues for the appearance of the document.

Think of HTML as the skeleton of a webpage, providing the fundamental structure and content.

Basic HTML Document Structure

Every HTML document follows a basic structure:

Example: Standard HTML5 Structure

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

<!DOCTYPE html>: Declares the document type and HTML version.
<html>: The root element of an HTML page.
<head>: Contains meta-information about the HTML document (like character set, title, links to stylesheets).
<body>: Contains the visible page content (text, images, links, etc.).

HTML Elements and Tags

HTML documents are built using elements. Elements are defined by tags. Most HTML elements have an opening tag and a closing tag.

Example: Paragraph Element

This is a paragraph element.

<p>This is a paragraph element.</p>

Opening Tag: e.g., <p>
Content: The text or other HTML elements between the tags.
Closing Tag: e.g., </p>. The slash indicates it's a closing tag.
Empty/Void Elements: Some elements don't have content and don't need a closing tag, like <br> (line break) or <img> (image).

HTML 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".

Example: Anchor Tag with HREF Attribute

Visit Example.com.

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

href attribute in <a> tags specifies the URL of the page the link goes to.
src attribute in <img> tags specifies the path to the image.
alt attribute in <img> tags provides alternative text for an image (important for accessibility and SEO).
lang attribute in <html> tag specifies the language of the document.

HTML Headings

Headings are used to define titles and headings for sections of content. HTML provides six levels of headings, from <h1> (most important) to <h6> (least important).

Example: Heading Levels

This is H1

This is H2

This is H3

This is H4

This is H5

This is H6

<h1>This is H1</h1>
<h2>This is H2</h2>
<h3>This is H3</h3>
<h4>This is H4</h4>
<h5>This is H5</h5>
<h6>This is H6</h6>

Use headings to structure your content logically. Don't skip heading levels (e.g., don't go from <h1> directly to <h3>).

HTML Paragraphs

The <p> tag defines a paragraph. Browsers automatically add some space (margin) before and after each paragraph.

Example: Paragraphs

This is the first paragraph. It contains some introductory text.

This is the second paragraph. It's separated from the first by a small amount of vertical space.

<p>This is the first paragraph. It contains some introductory text.</p>
<p>This is the second paragraph. It's separated from the first by a small amount of vertical space.</p>

HTML Links

Links (or hyperlinks) are used to link from one page to another. The <a> tag is used to define a hyperlink, and the href attribute specifies the URL of the page.

Example: Creating a Link

Click here to go to Google: Google

<a href="https://www.google.com" target="_blank">Google</a>

target="_blank" attribute makes the link open in a new browser tab or window.

HTML Images

The <img> tag is used to embed an image in an HTML page. It's an empty tag (or void tag) as it doesn't need a closing tag. It requires at least two attributes: src and alt.

Example: Embedding an Image

<img src="image.jpg" alt="Description of image">

It's crucial to provide meaningful alt text for images. This helps search engines understand the content of the image and provides a fallback for users who cannot see the image (e.g., using screen readers or having images turned off).

HTML Lists

HTML lists are used to group a set of related items. There are two main types of lists:

Unordered Lists (Bulleted)

Unordered lists use the <ul> tag, and each list item is defined by the <li> tag.

Example: Unordered List

First item
Second item
Third item

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

Ordered Lists (Numbered)

Ordered lists use the <ol> tag, and each list item is defined by the <li> tag. The items are displayed with numbering.

Example: Ordered List

First step
Second step
Third step

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