HTML Introduction

What is HTML?

HTML (HyperText Markup Language) is the standard language for creating and designing webpages. It provides the structure for web content, allowing browsers to display text, images, and other elements in a way that is visually appealing and accessible to users.

Why Learn HTML?

Learning HTML is essential for anyone interested in web development or design. It serves as the foundation for other web technologies such as CSS (Cascading Style Sheets) and JavaScript. Understanding HTML allows you to create your websites, customise existing ones, and better understand the web development process.

Basic Structure of an HTML Document

An HTML document is structured using various elements and tags. These elements are enclosed in angle brackets (<>). Here’s a simple example of an HTML document:

HTML
<!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>Welcome to My Website</h1>
    <p>This is my first paragraph in HTML!</p>
</body>
</html>

Breakdown of the Example

  • <!DOCTYPE HTML>: This declaration defines the document as an HTML5 document.
  • <HTML>: The root element that wraps all the content on the webpage.
  • <head>: Contains meta-information about the document, such as the character set and the title.
  • <body>: Contains the content of the webpage, such as headings, paragraphs, images, and more.
  • <h1>: A heading element is often used for titles or major sections.
  • <p>: A paragraph element is used for blocks of text.

Common HTML Elements

Headings

Headings in HTML are defined with the <h1> to <h6> tags. <h1> defines the most important heading, while <h6> defines the least important. For example:

HTML
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>

Paragraphs

Paragraphs are created using the <p> tag. This tag is used to define blocks of text:

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

Links

Links in HTML are created using the <a> tag. The href attribute specifies the destination of the link:

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

Images

Images are embedded in HTML using the <img> tag. The src attribute specifies the path to the image, while the alt attribute provides alternative text for the image:

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

Lists

HTML supports ordered (numbered) lists and unordered (bulleted) lists. Ordered lists use the <ol> tag, and unordered lists use the <ul> tag. List items are defined using the <li> tag:

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

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

HTML Attributes

Attributes provide additional information about HTML elements. They are always included in the opening tag and usually come in name/value pairs. For example, the   href  attribute in an  <a>  tag specifies the link’s destination:

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

Common HTML Attributes

  • id : Specifies a unique id for an element.
  • class : Specifies one or more class names for an element (used for CSS styling).
  • src : Specifies the source of an image or script.
  • alt : Provides alternative text for images.

HTML Forms

Forms are used to collect user input. They can contain various types of input elements, such as text fields, checkboxes, radio buttons, and submit buttons. Here’s an example of a simple HTML form:

HTML
<form action="/submit-form" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <input type="submit" value="Submit">
</form>

Breakdown of the Form Example

  • <form>  : The container for form elements.
  • action : Specifies where to send the form data.
  • method : Specifies the HTTP method to use when sending form data ( get  or   post ).
  • <label> : Provides a label for an input element.
  • <input> : Represents an input field.
  • type : Specifies the type of input (e.g., text, email, submit).
  • name : Specifies the name of the input field.

HTML is the backbone of web development, providing the structure and content for web pages. By learning HTML, you unlock the potential to create and manipulate web content, laying the foundation for further web development skills such as CSS and JavaScript.