HTML Basics

The Blueprint of a Web Page

Every website you visit is built with HTML, which stands for HyperText Markup Language. It isn't a programming language; instead, it's a markup language used to structure the content on a web page. Think of it as the skeleton that gives a website its form.

One of HTML's main jobs is to give text structure so that a browser can display an HTML document the way its developer intends.

An HTML document has a standard structure that browsers use to understand and display the content. At its core, it consists of a few essential parts.

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

Let's break down this blueprint:

<!DOCTYPE html>: This declaration is always the very first line. It tells the browser that the document is an HTML5 page, the modern standard for HTML.
<html>...</html>: This is the root element. All other elements on the page are nested inside it.
<head>...</head>: This section contains meta-information about the page, such as the title that appears in the browser tab. The content here isn't visible on the page itself.
<body>...</body>: This is where all the visible content—like text, images, and links—goes. Everything you see on a website is inside the body tag.

Adding Words

The most basic content on any page is text. HTML gives us simple tags to structure that text, primarily through headings and paragraphs.

Headings are used to create an outline for your content. There are six levels, from <h1> to <h6>. The <h1> tag is for the main heading of the page, and you should typically only use one. The other headings create a hierarchy of topics.

Paragraphs, marked with the <p> tag, are for blocks of regular text. Each <p> element creates a new paragraph with some space before and after it.

<body>
  <h1>The Solar System</h1>
  <p>Our solar system is a fascinating place with a star, planets, moons, and more.</p>
  
  <h2>The Sun</h2>
  <p>The Sun is the star at the center of our solar system.</p>

  <h2>The Planets</h2>
  <p>There are eight planets orbiting the Sun.</p>
</body>

Making Lists

Sometimes you need to organize information into a list. HTML has two main types of lists: ordered and unordered.

An unordered list uses bullet points and is created with the <ul> tag. Each item in the list is wrapped in a <li> (list item) tag. This is perfect for items where the sequence doesn't matter.

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

An ordered list uses numbers and is created with the <ol> tag. Just like with an unordered list, each item is wrapped in an <li> tag. Use this when the order is important, like for step-by-step instructions.

<ol>
  <li>Preheat the oven.</li>
  <li>Mix the ingredients.</li>
  <li>Bake for 30 minutes.</li>
</ol>

Connecting Pages and Showing Images

The web wouldn't be a web without links. Hyperlinks connect pages together, and they are created with the anchor tag, <a>.

The href attribute specifies the destination URL—where the user will go when they click the link. The text between the opening <a> and closing </a> tags is what becomes the clickable link.

<p>You can find great information on the <a href="https://www.wikipedia.org/">Wikipedia</a> homepage.</p>

Adding images is just as straightforward. The <img> tag is used to embed an image in a page. This tag is self-closing, meaning it doesn't have a separate closing tag.

It requires two key attributes:

src: The source attribute, which is the path or URL to the image file.
alt: The alternative text attribute. This text is displayed if the image can't be loaded and is also crucial for screen readers used by visually impaired users.

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

With these fundamental building blocks—document structure, text formatting, lists, links, and images—you can create a well-structured web page. Every complex website starts with these simple, powerful tags.

Fix Your Website Formatting with HTML CSS