No history yet

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 a web page. Think of it like the skeleton of a body. It provides the essential structure that holds everything together.

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

An HTML document has a specific, predictable structure. It always starts with a <!DOCTYPE html> declaration, which tells the browser it's reading an HTML5 document. The rest of the content is wrapped in an <html> tag.

Inside the <html> tag, there are two main sections: the <head> and the <body>.

  • The <head> contains meta-information about the page, like the title that appears in your browser tab. This information isn't displayed on the page itself.
  • The <body> contains all the visible content: headings, paragraphs, images, and links.
<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <!-- Your page content goes here! -->
  </body>
</html>

Adding Content with Tags

To add content, we use HTML elements, which are usually made up of an opening tag, the content itself, and a closing tag. For example, to create a paragraph, you wrap your text in <p> and </p> tags.

Let's look at some of the most common tags for structuring text.

Headings create a hierarchy for your content. <h1> is the most important heading, followed by <h2>, <h3>, and so on, down to <h6>.

Paragraphs, created with the <p> tag, are used for blocks of text.

Lesson image
<body>
  <h1>The Main Title</h1>
  <p>This paragraph introduces the topic.</p>
  
  <h2>A Sub-Topic</h2>
  <p>This paragraph gives more details.</p>
</body>

What about lists? HTML has you covered. For a bulleted list where the order doesn't matter, use an unordered list (<ul>). For a numbered list where sequence is important, use an ordered list (<ol>). In both cases, each item in the list is wrapped in a list item tag (<li>).

<!-- An unordered (bulleted) list -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>

<!-- An ordered (numbered) list -->
<ol>
  <li>Gather ingredients.</li>
  <li>Mix them together.</li>
  <li>Bake for 30 minutes.</li>
</ol>

To link to another page, we use the anchor tag, <a>. The href attribute specifies the destination URL. To display an image, we use the <img> tag. Its src attribute points to the image file, and the alt attribute provides a text description, which is crucial for accessibility.

<!-- A link to an external website -->
<a href="https://www.example.com">Visit Example.com</a>

<!-- An image with descriptive alt text -->
<img src="images/logo.png" alt="The company's logo">

Writing with Meaning

You could build a whole website using only generic <div> tags, but that would be a mistake. Using tags that describe the meaning of the content is called semantic HTML. It makes your code easier to read and maintain.

More importantly, it helps both search engines and assistive technologies (like screen readers for visually impaired users) understand the structure and importance of your content.

Semantic TagPurpose
<header>Introductory content for a page or section.
<nav>A set of navigation links.
<main>The main, unique content of the page.
<article>A self-contained piece of content, like a blog post.
<section>A thematic grouping of content.
<footer>The footer of a page or section, with info like author or copyright.

Using these tags gives your content a clear, logical structure that benefits everyone.

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

Now, let's test what you've learned.

Quiz Questions 1/6

What does HTML stand for?

Quiz Questions 2/6

What are the two main sections nested directly inside the <html> tag?

You've just taken your first step into web development. By understanding these fundamental HTML tags and the importance of a semantic structure, you now have the tools to build the skeleton of any web page.