Introduction to HTML

The Skeleton of the Web

Every website you visit is built on a foundation called HTML, which stands for Hypertext Markup Language. Think of it as the skeleton of a webpage. It doesn't control the colors or fonts, but it gives the content structure and meaning. Without HTML, a webpage would just be a jumble of text and images.

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

HTML works using elements, which are created with tags. Most tags come in pairs: an opening tag like <p> and a closing tag like </p>. Whatever content goes between them is affected by that tag. The letter inside the brackets tells the browser what kind of element it is. For example, <p> creates a paragraph.

A basic HTML document has a standard structure that tells the browser it's reading a webpage. It includes a <!DOCTYPE html> declaration, followed by <html>, <head>, and <body> tags. The <head> contains meta-information about the page (like the title that appears in your browser tab), while the <body> holds all the visible content.

<!DOCTYPE html>
<html>
<head>
  <title>My First Webpage</title>
</head>
<body>

  <h1>Hello World!</h1>
  <p>This is where my content will go.</p>

</body>
</html>

Structuring Text

One of HTML's most important jobs is to organize text. You can create headings to structure your document and paragraphs to hold the main body of your text. Search engines and screen readers use this structure to understand the layout and importance of your content.

There are six levels of headings, from <h1> to <h6>. The <h1> tag is for the main heading, like the title of an article, while <h2> is for a major section, <h3> for a subsection, and so on. Using them in order creates a clear and logical outline for your page.

Paragraphs are created with the <p> tag. Any text you place inside <p>...</p> will be treated as a distinct block of text, with space automatically added above and below it. For creating lists, you have two main options.

An unordered list (<ul>) uses bullet points and is for items where the order doesn't matter. An ordered list (<ol>) uses numbers and is for items that need to be in a sequence. Both types use the <li> tag for each individual list item.

<!-- Unordered List Example -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>

<!-- Ordered List Example -->
<ol>
  <li>First, open the box.</li>
  <li>Second, read the instructions.</li>
  <li>Third, assemble the product.</li>
</ol>

Links and Images

The web is all about connecting information. HTML makes this possible with hyperlinks, created using the anchor tag, <a>. The most important part of a link is the href attribute, which specifies the destination URL, or the web address you want the link to go to.

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

To embed an image into your page, you use the <img> tag. This tag is self-closing, meaning it doesn't need a closing tag. It requires two main attributes: src to specify the path to the image file, and alt to provide alternative text. The alt text is crucial for accessibility; it's what screen readers announce to visually impaired users and what browsers display if the image fails to load.

<img src="images/cute_puppy.jpg" alt="A small, fluffy puppy playing in the grass.">

Gathering Information

HTML also allows you to collect information from users through forms. A form is a container for different types of input elements, like text fields, checkboxes, radio buttons, and submit buttons. The <form> element wraps all the inputs, and the <input> element is used to create most of them.

To make forms accessible and user-friendly, it's important to use the <label> tag to describe each input field. A label is programmatically linked to its input, so clicking the label focuses the cursor on the input field.

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br><br>

  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password"><br><br>

  <input type="submit" value="Log In">
</form>

This simple form includes a text field for a username, a password field that hides the characters, and a submit button. With these basic building blocks, you can create the structure for almost any webpage.

Quiz Questions 1/6

What does HTML stand for?

Quiz Questions 2/6

In a standard HTML document, where does the visible content like paragraphs and images go?

Crafting Exceptional Websites