Introduction to HTML

The Skeleton of the Web

Every website you visit, from a simple blog to a complex news site, is built on a foundation of HTML. HTML stands for HyperText Markup Language, and it's the standard language used to create and structure the content of web pages. Think of it like the skeleton of a human body. It provides the essential structure and holds everything together, but it isn't responsible for the appearance or functionality. That's where other languages like CSS and JavaScript come in, which we'll cover later. For now, let's focus on the bones.

HTML (HyperText Markup Language) is the standard language used to create and structure content on the web.

Anatomy of an HTML Page

An HTML document is a plain text file with a specific structure. It's made up of elements, which are represented by tags. Most tags come in pairs: an opening tag and a closing tag. For example, to create a paragraph, you'd wrap your text in <p> and </p> tags.

Every HTML page has a few fundamental elements that set up the document.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>

Let's break that down:

<!DOCTYPE html>: This declaration tells the browser that the document is an HTML5 page. It's always the very first line.
<html>: This is the root element that wraps all the content on the page.
<head>: This element contains meta-information about the page, like the title. This content isn't displayed on the page itself.
<title>: This sets the title of the page, which appears in the browser tab.
<body>: This is where all the visible content of the webpage goes—headings, paragraphs, images, and more.

Adding Content

Once you have the basic structure, you can start adding content inside the <body> tags. HTML provides a wide variety of tags for structuring different types of content.

Headings and Paragraphs

To structure your text, you'll primarily use headings and paragraphs. Headings are defined with <h1> through <h6> tags. <h1> is the most important heading, typically used for the main title of a page, while <h6> is the least important.

Paragraphs are created with the <p> tag. Browsers automatically add some space before and after each paragraph, separating the blocks of text.

<h1>This is the Main Heading</h1>
<p>This is a paragraph of text. It introduces the topic.</p>
<h2>This is a Subheading</h2>
<p>This is another paragraph, providing more details under the subheading.</p>

Lists and Links

To organize information into lists, you can use two types: unordered and ordered. Unordered lists, created with <ul>, use bullet points. Ordered lists, created with <ol>, use numbers. In both cases, each list item is defined with an <li> tag.

Links, or hyperlinks, are crucial for navigating the web. They're created with the anchor tag, <a>. The destination of the link is specified in the href attribute.

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

<ol>
  <li>First step</li>
  <li>Second step</li>
</ol>

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

Embedding Media

A webpage isn't just text. HTML makes it easy to embed images and videos.

Images

To add an image, you use the <img> tag. This is a self-closing tag, meaning it doesn't need a separate closing tag. It requires two key attributes:

src: The source attribute, which is the path or URL to the image file.
alt: The alternative text attribute, which provides a description of the image. This text is displayed if the image can't load and is essential for screen readers used by visually impaired users.

<img src="cute_cat.jpg" alt="A fluffy orange cat sleeping on a chair">

Videos

You can embed a video using the <video> tag. Like the <img> tag, you specify the file path with the src attribute. Adding the controls attribute will display the browser's default video controls, like play, pause, and volume.

<video src="my_video.mp4" controls>Your browser does not support the video tag.</video>

And that's it. With these basic tags, you can create a well-structured web page. You've built the skeleton.

Ready to test your knowledge?

Quiz Questions 1/6

What is the primary role of HTML in web development?

Quiz Questions 2/6

Which tag contains meta-information about the webpage, such as the title, that isn't displayed in the main browser window?

Introduction to Front-End Development