Introduction to HTML

The Skeleton of the Web

Every website you visit, from a simple blog to a massive online store, is built on a foundation of HTML. HTML stands for HyperText Markup Language, which is a fancy way of saying it’s the code that structures a web page and its content.

Think of it like the skeleton of a body. It provides the essential structure and framework that holds everything together. Without HTML, your web browser wouldn't know what's a heading, what's a paragraph, or where an image should go.

At its core, HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Let’s break down that simple example:

<!DOCTYPE html>: This declaration defines that this document is an HTML5 document. It’s always the very first thing in your file.
<html>: This is the root element that wraps all the content on the entire page.
<head>: This element contains all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.
<title>: This sets the title of the page, which is what appears in the browser tab.
<body>: This encloses all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.

Building with Blocks

Most HTML elements are written with a starting tag and an ending tag, with the content in between. For example, to create a paragraph, you wrap your text in a <p> tag:

<p>This is my paragraph content.</p>

Some common elements you'll use constantly are headings (<h1> through <h6>), paragraphs (<p>), and lists. There are two types of lists: unordered (<ul>), which creates bullet points, and ordered (<ol>), which creates a numbered list. Individual list items are marked with <li>.

Elements can also have attributes, which provide additional information about them. Attributes are always specified in the start tag and usually come in name/value pairs like name="value".

For example, the anchor tag, <a>, creates a link. Its href attribute specifies the URL the link should go to:

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

Another common attribute is src, used with the <img> tag to specify the source (or path) of the image you want to display. Notice that <img> is a self-closing tag; it doesn't need an ending tag like </p>.

<img src="images/dinosaur.jpg" alt="A T-Rex skeleton">

The alt attribute is important for accessibility. It provides alternative text for screen readers or if the image fails to load.

Giving Content Meaning

In the early days of the web, developers often used generic tags like <div> and <span> to group and style content. A <div> is a block-level element used to group larger chunks of content, while a <span> is an inline element for smaller pieces of text within a block.

While these are still useful, modern HTML emphasizes using tags that describe the meaning of the content. This is called semantic HTML.

Semantic HTML not only improves the readability of your code but also enhances accessibility and SEO.

Instead of using generic <div> tags for everything, you can use semantic elements to define different parts of your page. This helps browsers, search engines, and screen readers understand your content's structure.

Common semantic elements include:

<header>: For introductory content or navigation links.
<nav>: Contains the main navigation links for the page.
<main>: Encloses the dominant content of the document.
<article>: Represents a self-contained piece of content, like a blog post or news story.
<aside>: For content that's tangentially related to the main content, like a sidebar.
<footer>: For the bottom of a page, typically containing contact info, copyright notices, etc.

Gathering Information

HTML also allows you to create forms to collect user input. This is essential for everything from login pages to contact forms to search bars. The <form> element is the container for all your form inputs.

<form action="/submit-form" method="post">
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password"><br><br>
  
  <input type="submit" value="Login">
</form>

Here's what's happening:

<form>: Wraps the entire form. The action attribute tells the browser where to send the data, and method specifies the HTTP method to use (post is common for submitting data).
<label>: Provides a descriptive label for an input field. The for attribute should match the id of the corresponding input, which improves accessibility.
<input>: The most versatile form element. The type attribute can be changed to create different kinds of inputs: text, password, email, checkbox, radio, file, and more.
<input type="submit">: Creates a button that, when clicked, submits the form data.

You can also embed multimedia directly into your pages. We've already seen the <img> tag. For videos, you can use the <video> tag, providing the path to the video file in its src attribute.

<video controls width="250" src="/videos/example.mp4">
  Sorry, your browser doesn't support embedded videos.
</video>

The controls attribute adds built-in video controls like play, pause, and volume. The text between the tags is a fallback for browsers that don't support the video element.

Now that you've got the basics, let's review some key terms.

Ready to test your knowledge?

Quiz Questions 1/6

What does HTML stand for?

Quiz Questions 2/6

Which tag is considered the root element of an HTML page?

With these building blocks, you can structure any web content imaginable. You've taken your first step into creating for the web.

Beautiful Web Design with Code