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 structural foundation called HTML. It stands for HyperText Markup Language, which is a fancy way of saying it's the standard language for creating web pages.

HTML, or HyperText Markup Language, provides the skeleton for your web content.

Think of a website like a house. HTML is the frame. It defines the rooms, the doorways, and the windows. It doesn't handle the paint color, the furniture, or the electricity—those are jobs for other technologies like CSS and JavaScript. HTML’s only job is to provide the structure.

Anatomy of a Page

An HTML document is just a plain text file with a .html extension. It's made up of elements, which you create using tags. Most tags come in pairs: an opening tag like <p> and a closing tag like </p>. Whatever content is between them becomes that type of element—in this case, a paragraph.

Every HTML page follows a basic structure. It always starts with a document type declaration, <!DOCTYPE html>, which tells the browser it's looking at an HTML5 document. Then comes the <html> element, which wraps everything else.

<!DOCTYPE html>
<html>
  <head>
    <!-- Meta-information goes here -->
    <title>My First Web Page</title>
  </head>
  <body>
    <!-- Visible content goes here -->
  </body>
</html>

Inside the <html> element, there are two main parts:

The <head>: This section contains information about the page, not the content shown on the page. This includes things like the page title (which appears in the browser tab), links to stylesheets, and other metadata.
The <body>: This is where all the visible stuff goes—the text, images, links, and everything else you see in the browser window.

Building with Blocks

Once you have the basic structure, you can start adding content using different tags. These are the fundamental building blocks of any webpage.

Headings and Paragraphs To structure your text, you use headings and paragraphs. HTML provides six levels of headings, from <h1> (the most important) to <h6> (the least important). Paragraphs are created with the <p> tag.

<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 paragraph provides more detail under the subheading.</p>

Lists There are two main types of lists. Unordered lists, created with <ul>, are for bullet points. Ordered lists, created with <ol>, are for numbered items. In both cases, each list item is wrapped in an <li> tag.

<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>

<ol>
  <li>First, do this.</li>
  <li>Second, do that.</li>
  <li>Finally, do this.</li>
</ol>

Links and Images Hyperlinks, the very feature that makes the web a "web," are created with the anchor tag, <a>. The href attribute specifies the destination URL.

Images are embedded using the <img> tag. This tag is self-closing and requires two important attributes: src to point to the image file, and alt to provide a text description for screen readers and in case the image doesn't load.

The alt attribute is crucial for web accessibility. It ensures that people who cannot see the image can still understand its content.

<p>Visit our <a href="https://www.example.com">website</a>!</p>

<img src="images/logo.png" alt="Our company logo">

Adding Meaning and Function

While you can build a whole site with basic tags, 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 a generic container like <div> for everything, you can use tags that tell browsers and search engines what a section is for. For example:

<header>: For introductory content or navigation links.
<nav>: Specifically for a set of navigation links.
<main>: For the main, unique content of the page.
<article>: For self-contained content, like a blog post or news story.
<footer>: For the footer of a page, often containing copyright info or contact details.

Using these tags makes your site easier for machines to understand and for people using assistive technologies to navigate.

HTML also allows you to create forms to collect user input. The <form> element acts as a container for various input fields. You can create text boxes, password fields, checkboxes, and submit buttons using the <input> tag, changing its behavior with the type attribute.

<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="Log In">
</form>

This code creates a simple login form. The label tags improve accessibility by linking the text description to the input field itself.

Let's check your understanding of these core HTML concepts.

Quiz Questions 1/5

What is the primary role of HTML in web development?

Quiz Questions 2/5

The <head> section of an HTML document contains the main visible content of the webpage, such as text and images.

With these building blocks, you can structure any kind of content for the web. HTML is the first and most essential step in creating websites.

Build Your First Website From Scratch