Website Formatting Fixes with HTML CSS
HTML Basics
The Skeleton of the Web
Every website you visit, from a simple blog to a massive online store, has a skeleton. That skeleton is built with HTML, which stands for HyperText Markup Language. It's not a programming language; it doesn't perform calculations or logic. Instead, it's a markup language, used to structure and organize content on a webpage.
HTML, or HyperText Markup Language, provides the skeleton for your web content.
Think of it like the blueprint for a house. The blueprint tells you where the walls, doors, and windows go, defining the structure. It doesn't decide the color of the paint or the style of the furniture. Similarly, HTML tells the web browser, "This text is a heading," "This is a paragraph," and "Here is a list of items." It gives your content meaning and structure, but not its visual style. That's a job for another language called CSS.
Tags and Elements
HTML works using tags. Most tags come in pairs: an opening tag and a closing tag. They wrap around your content like bookends. For example, to create a paragraph, you wrap your text in a <p> tag and a </p> tag.
<p>This is a paragraph.</p>
The opening tag, the content, and the closing tag together form an element. This is the fundamental building block of any webpage. Let's look at some of the most common elements you'll use.
Core Building Blocks
Headings structure your page and establish a hierarchy of information. There are six levels of headings, from <h1> to <h6>.
<h1>This is the most important heading</h1>
<h2>This is a subheading</h2>
<h3>And another, smaller subheading</h3>
A browser will display these headings with different sizes to show their importance. You should use <h1> for the main title of your page and only use it once. Use the other headings to structure the sections below it.
Paragraphs are for blocks of text, created with the <p> tag. When a browser sees a <p> tag, it knows to display the content as a distinct block of text, usually with some space above and below it.
Lists are for grouping related items. There are two main types. An unordered list (<ul>) is for a list where the order doesn't matter, like a shopping list. It uses <li> tags for each list item.
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
An ordered list (<ol>) is for when the sequence is important, like steps in a recipe. Browsers will automatically number these items for you.
<ol>
<li>Preheat the oven.</li>
<li>Mix the ingredients.</li>
<li>Bake for 30 minutes.</li>
</ol>
Links, or anchor tags (<a>), are what make the web a web. They connect pages. The href attribute inside the opening tag specifies the destination URL.
<a href="https://www.example.com">Visit Example.com</a>
Images are embedded using the <img> tag. This is a self-closing tag, meaning it doesn't have a closing tag. It requires two attributes: src for the image source (the URL or file path) and alt for alternative text. The alt text is crucial for accessibility; it describes the image for screen readers and is displayed if the image fails to load.
<img src="puppy.jpg" alt="A cute golden retriever puppy sitting in grass">
Writing with Meaning
When you use tags like <h1>, <p>, and <ul>, you're not just telling the browser how to display content. You're giving the content semantic meaning. You're saying, "This text is a top-level heading," not just "Make this text big and bold."
Using the right HTML tag for the right job is called writing semantic HTML. It makes your site more accessible to users with disabilities, improves your ranking on search engines, and makes your code easier for other developers to understand.
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.
Always choose the tag that best describes the content's purpose. If you have a list of items, use a list tag, not just a bunch of paragraphs. If you have a main title, use <h1>. This simple practice makes the web better for everyone.
Time to test what you've learned.
What is the primary purpose of HTML?
Which tag would you use to create a list of steps for a recipe, where the order is important?
You've now seen how HTML provides the essential structure for any webpage. By using tags correctly, you can create organized, meaningful content that forms the foundation of a great website.