|

HTML 1 💻 Introduction

Bykronos

1. Introduction to HTML

HTML, which stands for Hyper Text Markup Language, is the standard markup language used to create web pages. It consists of a series of elements that tell the browser how to display content.

Setting Up Your Development Environment

To start coding in HTML, you’ll need a code editor. We recommend using Visual Studio Code (VS Code).

Your First “Hello World” Page

Once VS Code is installed, follow these steps:

  1. Create a new file and save it with the .html extension (e.g., index.html).
  2. In the file, type html5 and press Tab (or Enter) — VS Code will automatically generate a basic HTML5 template for you.

Your template will look something like this:

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

Running Your HTML File

There are two simple ways to view your HTML file in a browser:

  • Using Live Server (recommended): Install the “Live Server” extension in VS Code. Right-click on your HTML file and select “Open with Live Server” — this will launch your page in the browser and automatically refresh whenever you make changes.
  • Directly: You can also double-click the HTML file to open it directly in your web browser.

Understanding the HTML Structure

Here’s a breakdown of the key components in a typical HTML document:

ElementDescription
<!DOCTYPE html>Declares the document type and version — this tells the browser it’s an HTML5 document.
<html>The root element that wraps all the content on the page.
<head>Contains metadata (data about the data), such as character set, styles, and scripts.
<title>Sets the title of the webpage, which appears in the browser’s title bar or tab.
<body>Holds all the visible content of the webpage — text, images, links, etc.
<h1>Defines the largest heading — used for main titles and important headings.

This foundation will help you understand how HTML works and how to start building your own web pages. Happy coding! 🚀

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!