No history yet

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 foundational language called HTML. It stands for HyperText Markup Language, and it gives a webpage its basic structure. Think of it like the skeleton of a body. It's not the skin, hair, or clothes, but it's the essential framework that holds everything together.

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

HTML uses elements, often called tags, to label pieces of content like "this is a heading," "this is a paragraph," or "this is a link." These tags are instructions for the web browser, telling it how to display the information on the page. You write them using angle brackets, like <p> for a paragraph.

The Basic Blueprint

Every HTML document follows a standard structure. It's like a template that ensures web browsers can understand and render your page correctly. It might look a little technical at first, but each part has a simple job.

First, there's the <!DOCTYPE html> declaration. This is always the very first line, and it tells the browser that the document is an HTML5 page.

Next, the entire document is wrapped in <html> tags. Inside that, there are two main sections: <head> and <body>.

The <head> section contains meta-information about the page, like the title that appears in the browser tab. This information isn't displayed on the main page itself.

The <body> section is where all the visible content goes. This is where you'll put your text, images, and links.

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

Adding Content with Tags

Once you have the basic structure, you can start adding content inside the <body> tags. Let's look at some of the most common tags you'll use.

Tag

noun

A command in HTML that tells a web browser how to format and display content. Most tags come in pairs, with an opening tag (e.g.,

) and a closing tag (e.g.,

).

Headings and Paragraphs

To structure your text, you use headings and paragraphs. HTML has six levels of headings, from <h1> (the most important) to <h6> (the least important). For regular text, you wrap it in <p> tags.

Notice that most tags have an opening tag like <p> and a closing tag with a forward slash, </p>. The content goes between them.

<h1>This is the main heading</h1>
<p>This is a paragraph of text. It introduces the main idea of the page.</p>
<h2>This is a subheading</h2>
<p>This paragraph provides more details about the topic introduced in 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>Third, you're done!</li>
</ol>

Links and Images

What makes the web a "web" are hyperlinks. You create them with the <a> (anchor) tag. The href attribute specifies the destination URL.

To add an image, you use the <img> tag. This tag is self-closing and requires two important attributes: src (the source of the image file) and alt (alternative text for screen readers or if the image fails to load).

<!-- This is a link to another website -->
<a href="https://www.example.com">Visit Example.com</a>

<!-- This is an image -->
<img src="my-image.jpg" alt="A descriptive photo of something interesting">

Using Tags with Meaning

While you could technically build a whole page using just generic <div> tags, it's better to use tags that describe the content's meaning. This is called semantic HTML.

For example, instead of just using a <div> for your page's header, you should use the <header> tag. For navigation links, use <nav>. For the main content, use <main>, and for the footer, use <footer>. This doesn't change how the page looks by default, but it has huge benefits.

Semantic HTML makes your site more accessible for people using screen readers, as it gives them context about the page structure. It also helps search engines like Google understand your content, which can improve your search ranking.

Using semantic tags like <nav>, <main>, and <footer> gives your content structure and meaning, which helps both search engines and assistive technologies.

Let's bring it all together. Here is a simple but complete webpage that uses several of the elements we've discussed.

<!DOCTYPE html>
<html>
  <head>
    <title>All About My Cat</title>
  </head>
  <body>
    <header>
      <h1>My Wonderful Cat, Whiskers</h1>
    </header>

    <main>
      <p>This page is dedicated to my amazing cat, Whiskers. He is a fluffy tabby with a lot of personality.</p>
      <img src="cat.jpg" alt="A photo of Whiskers the cat sleeping in a sunbeam">
      
      <h2>His Favorite Things</h2>
      <ul>
        <li>Napping in sunbeams</li>
        <li>Chasing laser pointers</li>
        <li>Eating treats</li>
      </ul>
    </main>

    <footer>
      <p>Find more cat pictures <a href="https://www.example.com/cats">here</a>.</p>
    </footer>
  </body>
</html>

This code, saved in a file with a .html extension, can be opened in any web browser to display a simple, structured webpage. It's the first step to building anything on the web.