Introduction to HTML

HTML (HyperText Markup Language) is the backbone of the internet. It’s the language used to structure the content of a webpage, telling the browser what to display and how to display it. Think of it as the blueprint for a house – it defines the layout and components.

What is HTML?

HTML uses “tags” to define elements. Tags are keywords enclosed in angle brackets (< and >), such as <p> for a paragraph or <h1> for a main heading. These tags tell the browser how to render the content. HTML documents are essentially a collection of these tags nested within each other to create a structured web page. Think of it like building with LEGO bricks – each brick (tag) has a specific function and they are combined to build something bigger (the website).

Basic Example

Let’s look at a simple HTML example:


<!DOCTYPE html>
<html>
<head>
  <title>My First Webpage</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first paragraph.</p>
</body>
</html>

<!DOCTYPE html>: This tag tells the browser that this is an HTML5 document.
<html>: The root element of the page. Everything else goes inside this tag.
<head>: Contains information about the page, like the title (shown in the browser tab) and links to CSS files (for styling).
<title>: Sets the title of the webpage.
<body>: Contains the visible content of the webpage (headings, text, images, etc.).
<h1>: Defines a main heading (the largest heading).
<p>: Defines a paragraph of text.

Practical Usage

Here’s a slightly more complex example with an image and a link:


<!DOCTYPE html>
<html>
<head>
  <title>My Second Webpage</title>
</head>
<body>
  <h1>Welcome!</h1>
  <p>Here's an image:</p>
  <img src="https://via.placeholder.com/150" alt="Placeholder Image">
  <p>Click <a href="https://www.google.com">here</a> to go to Google.</p>
</body>
</html>

<img>: Displays an image. src attribute specifies the image’s URL, and alt attribute provides alternative text (for accessibility and if the image can’t load).
<a>: Defines a hyperlink. The href attribute specifies the URL the link goes to.

Key Takeaways

HTML is the foundation for all webpages, providing structure and content.
HTML uses tags to define elements like headings, paragraphs, images, and links.
Tags are enclosed in angle brackets (< and >).
Every HTML document starts with <!DOCTYPE html> and is enclosed within <html> tags.
The <head> section contains metadata (information about the page), and the <body> section contains the visible content.