Fixing Website Formatting with HTML CSS
HTML Basics
The Skeleton of the Web
Every webpage you see is built on a foundation called HTML, which stands for HyperText Markup Language. Think of it as the skeleton of a website. It provides the basic structure and organizes all the content, like text, images, and links. Just as a skeleton gives a body its shape, HTML gives a webpage its structure.
HTML, or HyperText Markup Language, provides the skeleton for your web content.
HTML isn't a programming language. It's a markup language. This means it uses a system of tags to define the different parts of a document. Let's look at how these pieces fit together to form a complete webpage.
A Page's Blueprint
Every HTML document follows a standard structure. It starts with a special declaration and is then wrapped in a main <html> tag. Inside, there are two main sections: the <head> and the <body>.
The <head> section contains information about the page, like its title, which appears in the browser tab. This information isn't visible on the page itself.
The <body> section holds all the content you actually see, such as text, images, and links.
The very first line,
<!DOCTYPE html>, is important. It's not a tag, but a declaration that tells the browser, "Hey, this is an HTML5 document," so it knows how to read the file correctly.
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph on my very first webpage.</p>
</body>
</html>
In the example above, <h1> is a heading tag and <p> is a paragraph tag. Notice how most tags come in pairs: an opening tag like <p> and a closing tag like </p>. Everything between them is the element's content.
Content Building Blocks
Once you have the basic structure, you can start adding content using different tags. For text, the most common are headings and paragraphs.
Headings are created with <h1> through <h6> tags. <h1> is the most important heading on the page, and <h6> is the least. They help create a clear hierarchy for your content, which is useful for both readers and search engines.
Paragraphs are created with the <p> tag. Any text you place inside <p> tags will be displayed as a distinct block of text.
What about lists? HTML has you covered. For bulleted lists, you use an unordered list tag, <ul>. For numbered lists, you use an ordered list tag, <ol>. In both cases, each individual item in the list is wrapped in a list item tag, <li>.
<!-- An unordered list (bullets) -->
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
<!-- An ordered list (numbers) -->
<ol>
<li>First, wake up.</li>
<li>Second, make coffee.</li>
<li>Third, learn HTML.</li>
</ol>
Links, Images, and Attributes
The web wouldn't be the web without links. To create a link, you use the anchor tag, <a>. But the tag alone isn't enough. You need to tell it where to link to. This is done with an attribute.
Attributes provide extra information about an element and are always included in the opening tag. For a link, the href attribute (short for hypertext reference) specifies the destination URL.
<a href="https://www.wikipedia.org">Go to Wikipedia</a>
To display an image, we use the <img> tag. This is a special kind of tag because it's self-closing; it doesn't need a closing tag like </img>.
It requires two key attributes:
src: The source attribute, which points to the image's URL or file path.alt: The alternative text attribute, which provides a text description of the image. This text is shown if the image fails to load and is essential for screen readers used by visually impaired users.
<img src="cute-cat.jpg" alt="A fluffy orange cat sleeping on a sunny windowsill.">
Using tags that describe the meaning of your content—like <p> for a paragraph or <h1> for the main heading—is called semantic HTML. It makes your site more accessible and easier for search engines to understand. It’s about choosing the right tag for the job.
Semantic HTML not only improves the readability of your code but also enhances accessibility and SEO.
Time to check your understanding of these fundamental concepts.
What is the primary purpose of HTML?
Which tag is used to create the most important heading on a page?
With these building blocks, you have the power to structure any webpage. You've learned how to create text, lists, links, and images—the core components of the web.