Fixing Website Formatting with HTML and CSS
HTML Basics
The Skeleton of the Web
Every website you visit, from a simple blog to a massive online store, 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 as the skeleton of a website. It provides the basic framework that holds everything together, telling the browser how to display text, images, and links.
HTML, or HyperText Markup Language, provides the skeleton for your web content.
An HTML document is just a plain text file with a .html extension. This file contains a series of instructions, called tags, that define the structure. Let's look at the most basic structure of any HTML page.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Let's break this down:
<!DOCTYPE html>: This declaration tells the browser that the document is an HTML5 page. It's always the very first line.<html>: This is the root element that wraps all the content on the entire page.<head>: This element contains meta-information about the page, like its title. This content isn't displayed on the main page itself, but it's used by browsers and search engines.<title>: This sets the title of the page, which appears in the browser tab.<body>: This is where all the visible content goes—headings, paragraphs, images, links, and more.
Tags, Elements, and Attributes
HTML works using a system of tags. A tag is a keyword enclosed in angle brackets, like <p>. Most tags come in pairs: an opening tag (<p>) and a closing tag (</p>). The closing tag is identical to the opening one, but with a forward slash before the tag name. Everything between the opening and closing tag is the content of that element.
An element is the combination of an opening tag, the content, and a closing tag.
Elements can also be nested inside other elements. This creates a hierarchy. For example, you can put a tag for strong emphasis, <strong>, inside a paragraph tag.
<p>This is a <strong>very important</strong> point.</p>
When nesting, you must close the inner tags before closing the outer ones. Think of it like a set of nested boxes. You have to close the innermost box before you can close the one it's inside.
Some tags also have attributes, which provide extra information about an element. Attributes are always specified in the opening tag and come in name/value pairs, like name="value".
Common Building Blocks
While there are many HTML tags, you'll use a handful of them constantly. These are the fundamental building blocks for most web content.
Heading
noun
A title or subtitle that you want to display on a webpage.
Headings are used to structure your page content hierarchically. <h1> is the most important heading, typically the main title of the page. <h2> is a subheading, <h3> is a sub-subheading, and so on, down to <h6>. Search engines use headings to understand the structure and importance of your content.
Paragraphs are defined with the <p> tag. This is your go-to tag for any block of plain text.
To create a hyperlink, you use the <a> (anchor) tag with an href (hypertext reference) attribute. The text between the opening and closing <a> tags is what the user will see and click on.
<a href="https://www.example.com">Visit Example.com</a>
To display an image, use the <img> tag. This is a self-closing tag, meaning it doesn't need a closing tag. It requires two main attributes: src (source) to specify the image file's URL, and alt (alternative text). The alt text is crucial for accessibility; it describes the image for visually impaired users and is displayed if the image fails to load.
<img src="/images/cat.jpg" alt="A photo of a cute cat.">
Finally, let's look at lists. There are two main types. An unordered list (<ul>) is for a list of items where the order doesn't matter, typically shown with bullet points. An ordered list (<ol>) is for when the order is important, shown with numbers. In both cases, each list item is wrapped in an <li> tag.
Unordered List (<ul>) | Ordered List (<ol>) |
|---|---|
<ul> <li>Milk</li> <li>Bread</li> <li>Cheese</li> </ul> | <ol> <li>Preheat oven</li> <li>Mix ingredients</li> <li>Bake for 30 minutes</li> </ol> |
With these basic elements, you can structure a wide variety of documents for the web. Now, let's test your understanding of these core concepts.
What is the primary purpose of the <!DOCTYPE html> declaration at the very beginning of an HTML file?
Which tag contains all the visible content of a webpage, such as headings, paragraphs, and images?
Understanding these foundational elements is the first step to building anything on the web. Mastering them allows you to create clear, well-structured pages.