1. Home
  2. Learn
  3. Introduction to HTML Programming

Introduction to HTML Programming

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It provides the structure and content of a webpage, which is then styled with CSS and enhanced with JavaScript. HTML is the backbone of the web, and understanding it is essential for anyone interested in web development.

This guide will introduce you to the fundamentals of HTML programming, helping you create well-structured and semantic web pages.

Table of Contents

  1. What is HTML?
  2. Setting Up Your Environment
  3. Basic HTML Structure
  4. Text Formatting
  5. Links and Images
  6. Lists
  7. Tables
  8. Forms
  9. Semantic HTML
  10. Multimedia

What is HTML?

HTML is a markup language used to structure content on the web. It consists of elements that define the different parts of a webpage, such as headings, paragraphs, links, and images.

 1<!-- Example: Your first HTML page -->
 2<!DOCTYPE html>
 3<html lang="en">
 4<head>
 5    <meta charset="UTF-8">
 6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7    <title>My First HTML Page</title>
 8</head>
 9<body>
10    <h1>Hello, HTML Programming!</h1>
11    <p>This is a paragraph.</p>
12</body>
13</html>

Setting Up Your Environment

To write and view HTML, you only need a text editor and a web browser. You can create an HTML file with a .html extension and open it in your browser.

1# Example: Creating an HTML file
2touch index.html

Basic HTML Structure

Every HTML document has a basic structure that includes a DOCTYPE declaration, <html>, <head>, and <body> elements.

 1<!-- Example: Basic HTML structure -->
 2<!DOCTYPE html>
 3<html lang="en">
 4<head>
 5    <meta charset="UTF-8">
 6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7    <title>Document</title>
 8</head>
 9<body>
10    <!-- Content goes here -->
11</body>
12</html>

Text Formatting

HTML provides elements for formatting text, such as headings, paragraphs, bold text, and italic text.

1<!-- Example: Text formatting -->
2<h1>This is a heading</h1>
3<p>This is a <strong>bold</strong> paragraph with <em>italic</em> text.</p>

Links and images are essential for creating interactive and visually appealing web pages.

1<!-- Example: Links and images -->
2<a href="https://www.example.com">Visit Example</a>
3<img src="image.jpg" alt="Description of image">

Lists

HTML supports ordered lists, unordered lists, and definition lists for organizing content.

 1<!-- Example: Lists -->
 2<ul>
 3    <li>Item 1</li>
 4    <li>Item 2</li>
 5</ul>
 6
 7<ol>
 8    <li>First item</li>
 9    <li>Second item</li>
10</ol>

Tables

Tables are used to display data in a structured format.

 1<!-- Example: Table -->
 2<table>
 3    <tr>
 4        <th>Name</th>
 5        <th>Age</th>
 6    </tr>
 7    <tr>
 8        <td>Alice</td>
 9        <td>25</td>
10    </tr>
11</table>

Forms

Forms allow users to input data, which can be sent to a server for processing.

1<!-- Example: Form -->
2<form action="/submit" method="post">
3    <label for="name">Name:</label>
4    <input type="text" id="name" name="name">
5    <input type="submit" value="Submit">
6</form>

Semantic HTML

Semantic HTML elements like <header>, <footer>, and <article> provide meaning to the structure of a webpage.

 1<!-- Example: Semantic HTML -->
 2<header>
 3    <h1>Website Title</h1>
 4</header>
 5<article>
 6    <h2>Article Title</h2>
 7    <p>Article content...</p>
 8</article>
 9<footer>
10    <p>Footer content...</p>
11</footer>

Multimedia

HTML supports embedding multimedia content like audio and video.

 1<!-- Example: Multimedia -->
 2<audio controls>
 3    <source src="audio.mp3" type="audio/mpeg">
 4    Your browser does not support the audio element.
 5</audio>
 6
 7<video controls width="320" height="240">
 8    <source src="video.mp4" type="video/mp4">
 9    Your browser does not support the video element.
10</video>