Fixing Website Formatting with HTML CSS
HTML Basics
The Skeleton of the Web
Every web page is built on a foundation called HTML, which stands for HyperText Markup Language. Think of it as the skeleton of a body. It provides the essential structure that holds everything together and tells the browser what each piece of content is, whether it's a heading, a paragraph, or a list.
HTML, or HyperText Markup Language, provides the skeleton for your web content.
An HTML document has a standard structure. It starts with a document type declaration, <!DOCTYPE html>. This is just a note to the browser that it's reading an HTML page. The rest of the content is wrapped in an <html> tag.
Inside <html>, there are two main parts: the <head> and the <body>.
- The
<head>contains metadata—information about the page, like its title, that isn't displayed directly on the page itself. - The
<body>contains all the visible content, like text, images, and links.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>This is the main heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Adding Content with Tags
Content is organized using elements, which are created with tags. Most tags come in pairs: an opening tag like <p> and a closing tag like </p>. The content goes between them. The closing tag is the same as the opening one, but with a forward slash before the tag name.
For structuring text, the most common elements are headings and paragraphs.
Headings give your content a clear hierarchy, like an outline for a report. There are six levels, from
<h1>(the most important) to<h6>(the least important).
<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
<p>This is a paragraph. It contains the main body of your text.</p>
<p>This is another paragraph. Browsers automatically add some space between paragraphs.</p>
To organize items, you can use lists. An unordered list, created with <ul>, is for a list of items where the order doesn't matter. A numbered, or ordered list, created with <ol>, is for when the sequence is important. In both cases, each individual list item is wrapped in an <li> tag.
| Unordered List (ul) | Ordered List (ol) |
|---|---|
<ul> | <ol> |
<li>Apples</li> | <li>Step 1</li> |
<li>Oranges</li> | <li>Step 2</li> |
<li>Bananas</li> | <li>Step 3</li> |
</ul> | </ol> |
Links, Images, and Attributes
HTML tags can also hold extra information in the form of attributes. Attributes are added inside the opening tag and provide more detail about the element. They usually come in name/value pairs, like name="value".
To create a hyperlink, we use the anchor tag, <a>. Its most important attribute is href, which specifies the URL the link should point to.
<p>You can find more information on the <a href="https://www.wikipedia.org">Wikipedia</a> homepage.</p>
To display an image, we use the <img> tag. This is a special type of tag called an empty or self-closing tag, because it doesn't wrap any content and therefore doesn't need a closing tag.
The <img> tag has two essential attributes:
src: The source attribute, which is the URL or file path of the image.alt: The alternative text attribute, which provides a text description of the image. This text is displayed if the image can't load and is crucial for screen readers used by visually impaired users.
<img src="https://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" alt="The Wikipedia logo">
Now let's check your understanding of these fundamental building blocks.