HTML and CSS Fundamentals
Introduction to HTML
The Structure of a Web Page
Every website you visit is built with HTML, which stands for HyperText Markup Language. Think of it as the skeleton of a webpage. It doesn't control the colors, fonts, or animations—that's handled by other languages like CSS. Instead, HTML gives the page its fundamental structure.
HTML uses tags to define different types of content, like headings, paragraphs, and images. This structure tells the web browser how to display the information.
A basic HTML document has a standard structure that looks like this:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Let's break that down:
<!DOCTYPE html>: This is a declaration. It tells the browser that the document is an HTML5 page.<html>: This is the root element that wraps everything else on the page.<head>: This section contains meta-information about the page, such as the title that appears in your browser tab. Content here isn't displayed on the page itself.<body>: This is where the magic happens. All visible content—headings, paragraphs, images, and links—goes inside the<body>tags.
Adding Content with Tags
HTML uses elements to build a page. An element usually consists of an opening tag (like <p>), some content, and a closing tag (like </p>). Let's look at a few of the most common ones.
tag
noun
A command in HTML that tells a web browser how to format and display content. Most tags come in pairs: an opening tag and a closing tag.
Headings are used to structure your content and establish a hierarchy of importance. There are six levels of headings, from <h1> (the most important) to <h6> (the least important).
<h1>This is the main heading</h1>
<h2>This is a subheading</h2>
<h3>This is a smaller subheading</h3>
For regular blocks of text, you use the paragraph tag, <p>.
Lists are another common way to organize information. 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 list item tag (<li>).
<!-- An Unordered List -->
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<!-- An Ordered List -->
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Connecting and Decorating
Web pages aren't meant to be isolated. They connect to each other to form the World Wide Web. This is done with hyperlinks, created using the anchor tag <a>.
To make a link, you need to tell the browser where it should go. You do this with an attribute.
Attributes provide extra information about an HTML element and are always specified in the start tag. They usually come in name/value pairs like
name="value".
For a link, the href (hypertext reference) attribute specifies the destination URL.
<a href="https://www.example.com">Visit Example.com</a>
Images are added using the <img> tag. This tag is self-closing, meaning it doesn't need a separate closing tag. It requires two main attributes: src and alt.
src: The source attribute, which is the path or URL to the image file.alt: The alternative text attribute, which provides a 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="cute_cat.jpg" alt="A fluffy kitten sleeping in a sunbeam">
With just these basic elements, you can create a well-structured and functional webpage. Now let's review what we've learned.
Ready to test your knowledge?
What is the primary role of HTML on a webpage?
In an HTML document, which tag is used to contain all the visible content like headings, paragraphs, and images?
You now have the foundational knowledge of HTML. You can structure a document, add text and lists, and include links and images. This is the first essential step in building for the web.