HTML Basics: A Beginner's Tutorial

Development, Frontend
HTML Basics: A Beginner's Tutorial
Page content

Welcome to the HTML Basics tutorial! Let’s dive into what HTML is, its applications, and cover some fundamental elements.

What is HTML?

HTML, or HyperText Markup Language, is the foundational language of the World Wide Web. It allows for the creation and organization of content on web pages. HTML uses tags to mark up elements on the page and define their structure.

What is HTML Used For?

HTML forms the backbone of every web page. It defines how text, images, links, and other elements are arranged on a page. Without HTML, web pages would appear as unformatted text.

HTML Basics

HTML Document Structure

A simple HTML document consists of the following parts:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
</head>
<body>
    <h1>Welcome to my website!</h1>
    <p>This is a simple text section.</p>
</body>
</html>
  • <!DOCTYPE html>: Declares the HTML version.
  • <html>: The root element tag.
  • <head>: Contains meta-information like the title and character encoding.
  • <meta>: Defines meta-information about the document.
  • <title>: The title of the page, displayed in the browser tab.
  • <body>: Contains the visible content of the page.
  • <h1> and <p>: Header and paragraph tags for text.

Text and Paragraphs

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
  • <p>: Marks a paragraph.

Headings

<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
  • <h1> to <h6>: Mark headings of different hierarchies.
<a href="https://www.example.com">Visit Example.com</a>
  • <a>: Creates a link.

Images

<img src="image.jpg" alt="Description of the image">
  • <img>: Inserts an image.

These are just the basics of HTML. With these elements, you can already create a simple webpage. Happy coding! 🚀💻