Fixing Website Formatting with HTML CSS
HTML Basics
The Skeleton of the Web
Every webpage you see is built with HTML, which stands for HyperText Markup Language. Think of it as the skeleton that gives a webpage its structure. Just like your skeleton has bones for your head, arms, and legs, an HTML document has elements for a title, headings, paragraphs, and images.
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.
This structure is created using tags. A tag is a keyword wrapped in angle brackets, like <html>. Most tags come in pairs: an opening tag (<p>) and a closing tag (</p>). The closing tag has a forward slash before the name. Everything between the opening and closing tag is the content of that element.
All HTML documents follow this fundamental structure. Let's look at the code for a minimal webpage.
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first paragraph.</p>
</body>
</html>
Here's a breakdown:
<!DOCTYPE html>: This tells the browser that the document is an HTML5 page.<html>: This is the root element that wraps all the content on the page.<head>: This contains meta-information about the page, like the title. This content isn't displayed on the main page.<title>: This sets the title that appears in the browser tab.<body>: This contains all the visible content of the page, such as headings, paragraphs, and images.
Common Building Blocks
Inside the <body> tag, you'll use various elements to structure your content. Headings are created with <h1> through <h6> tags. <h1> is for the most important heading, while <h6> is for the least important.
<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
<h3>And another level down</h3>
For regular text, you use the paragraph tag, <p>.
<p>This is a paragraph of text. It can contain multiple sentences.</p>
<p>This is another paragraph. Browsers automatically add some space between paragraphs.</p>
Lists are another common element. There are two main types: unordered (bulleted) lists and ordered (numbered) lists.
For an unordered list, you use the <ul> tag (for unordered list) and wrap each list item in an <li> tag (for list item).
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
For an ordered list, you use <ol> instead of <ul>. The browser will automatically number the items.
<ol>
<li>First, wake up.</li>
<li>Second, make coffee.</li>
<li>Third, learn HTML.</li>
</ol>
Links and Images
The web is built on connections. We create these connections with hyperlinks, which are made using the anchor tag, <a>. To make it work, you need to give it a destination.
This is where attributes come in. Attributes provide extra information about an element and are always specified in the opening tag.
attribute
noun
A modifier of an HTML element, providing additional information like a source URL or an identifier.
For an anchor tag, the most important attribute is href (hypertext reference), which specifies the URL the link should go to.
<a href="https://www.wikipedia.org">Visit Wikipedia</a>
The text between the opening <a> and closing </a> tags becomes the clickable link on the page.
To insert an image, you use the <img> tag. This is a special kind of tag called an empty element because it doesn't have a closing tag. It needs two main attributes to work: src and alt.
| Attribute | Description |
|---|---|
src | Specifies the path (the URL) to the image file. This is required. |
alt | Provides alternative text for the image if it can't be displayed. This is crucial for accessibility (e.g., for screen readers) and is also required. |
<img src="images/cat.jpg" alt="A photo of a fluffy cat sleeping.">
This code tells the browser to display the cat.jpg image. If the image can't be found, or if a user is using a screen reader, it will present the text "A photo of a fluffy cat sleeping."
Now, let's test your understanding of these fundamental HTML concepts.
What does HTML stand for?
Which tag contains all the visible content of a webpage, such as headings, paragraphs, and images?
With these basic tags and attributes, you have the power to create a well-structured document that any web browser in the world can understand and display.