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. Think of HTML as the skeleton of a webpage. It provides the fundamental structure, defining all the different parts like headings, paragraphs, and images. Without it, a website would just be a jumble of text with no organization.

HTML

noun

Stands for HyperText Markup Language. It's the standard language used to create and structure content on the World Wide Web.

HTML works by using tags to mark up content. Most tags come in pairs: an opening tag and a closing tag. The content you want to format goes between them. For example, to create a paragraph, you wrap your text in <p> and </p> tags. The combination of an opening tag, the content, and a closing tag is called an element.

<p>This is a paragraph element.</p>

Anatomy of a Page

Every HTML document follows a standard structure. It tells the browser that it's reading an HTML file and defines the main sections of the page.

At the very top, <!DOCTYPE html> declares the document type. Then, the <html> element wraps everything else. Inside, there are two main parts: the <head> and the <body>.

The <head> section contains meta-information about the page that isn't displayed directly. This includes things like the page title (which appears in the browser tab), character set information, and links to other files. The <body> section holds all the content you actually see on the page, like text, images, and links.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Page!</h1>
    <p>This is where my content will go.</p>
  </body>
</html>

Building with Content Blocks

Once you have the basic structure, you can start adding content using different HTML elements. These elements act like building blocks, helping you organize your information clearly.

Headings are used to structure your content hierarchically. There are six levels, from <h1> (the most important) to <h6> (the least important). A good rule is to use only one <h1> per page for the main title.

For regular text, you use the paragraph element, <p>. Each <p> element creates a new block of text.

Lists are perfect for grouping related items. You can create an unordered list (bullet points) with <ul> or an ordered list (numbers) with <ol>. Each item within a list is defined with an <li> tag.

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

<!-- An ordered list -->
<ol>
  <li>Gather ingredients.</li>
  <li>Mix them together.</li>
  <li>Bake in the oven.</li>
</ol>

To link to other pages, you use the anchor tag, <a>. The destination of the link is specified in the href attribute.

<a href="https://www.wikipedia.org">Go to Wikipedia</a>

Images are added with the <img> tag. This is an empty, or self-closing, tag, so it doesn't need a closing tag. It requires two main attributes: src (the source URL of the image) and alt (alternative text).

The alt attribute is crucial. It provides a text description of the image for screen readers used by visually impaired users and also displays if the image fails to load.

<img src=" kitten.jpg" alt="A small, fluffy kitten sleeping on a rug.">

Giving Content Meaning

It's possible to build a whole website using just generic tags like <div> and <span>. But a better approach is to use semantic HTML. This means choosing HTML tags that accurately describe the content they contain.

For example, instead of 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>. These tags don't look different from a <div> by default, but they provide valuable context.

Semantic HTML makes your code easier to read and maintain. More importantly, it improves accessibility for people using assistive technologies and helps search engines like Google understand your content, which can improve your site's ranking.

By combining these elements, you can create a well-structured and meaningful web page. This is the first and most important step in web development.

Quiz Questions 1/5

What is the primary purpose of the alt attribute on an <img> tag?

Quiz Questions 2/5

Which tag is used to create a numbered list?

Web Development Fundamentals