Fix Website Formatting with HTML 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 provides the basic structure, or skeleton, for a webpage. It tells the browser what kind of content it's looking at—whether it's a heading, a paragraph, or an image.
HTML, or HyperText Markup Language, provides the skeleton for your web content.
Think of it like building a house. Before you can paint the walls or arrange the furniture, you need a frame. HTML is that frame. It doesn't control the colors or fonts—that's a job for another language called CSS. HTML is purely about structure and content.
All HTML documents share a common structure. This basic template tells the browser that it's reading an HTML page and separates the hidden information (metadata) from the visible content.
<!DOCTYPE html>
<html>
<head>
<!-- Information for the browser goes here -->
<title>My First Webpage</title>
</head>
<body>
<!-- Visible content for the user goes here -->
</body>
</html>
Here’s a quick breakdown:
<!DOCTYPE html>: Declares that this is an HTML5 document.<html>: The root element that wraps everything on the page.<head>: Contains meta-information about the page, like the title that appears in the browser tab. This content isn't displayed on the page itself.<body>: Holds all the content that you see on the screen, such as text, images, and links.
Adding Content with Tags
Content is organized using tags, which are keywords surrounded by angle brackets like <p>. Most tags come in pairs: an opening tag (<p>) and a closing tag (</p>). The closing tag has a forward slash before the tag name. Everything between the opening and closing tag is the content of that element.
Two of the most common elements are headings and paragraphs. Headings are created with <h1> through <h6> tags. <h1> is the most important heading, usually the main title of the page, while <h6> is the least important.
<h1>This is the main heading</h1>
<p>This is a paragraph of text. It can contain one or more sentences.</p>
<h2>This is a subheading</h2>
<p>Here is another paragraph, introducing a new idea.</p>
For creating lists, you have two main options. An unordered list (<ul>) creates a bulleted list, while an ordered list (<ol>) creates a numbered list. Inside either list, each item is wrapped in a <li> (list item) tag.
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
<ol>
<li>First, do this.</li>
<li>Second, do that.</li>
<li>Third, you're done.</li>
</ol>
Describing Your Elements
Sometimes, you need to provide extra information about an element. This is done with attributes. Attributes are placed inside the opening tag and usually come in name/value pairs like name="value".
For example, to create a link, you use the
<a>(anchor) tag and anhref(hypertext reference) attribute to specify the URL the link should point to.
<a href="https://www.example.com">Visit Example.com</a>
Images work in a similar way. The <img> tag is used to embed an image. It's a self-closing tag, meaning it doesn't need a separate closing tag. It requires two key attributes:
src(source): The path or URL to the image file.alt(alternative text): A description of the image. This text is crucial for accessibility, as it's what screen readers will announce to visually impaired users. It also displays if the image fails to load.
<img src="images/cat.jpg" alt="A fluffy orange cat sleeping on a rug">
Let's check your understanding of these fundamental building blocks.
What is the primary role of HTML in web development?
Which tag contains all the content that is visible to the user on the webpage, such as text and images?