Frontend Fundamentals for Product Designers
HTML Basics
The Blueprint of the Web
HTML
noun
The standard language for creating web pages and web applications. It provides the structure and meaning of content.
Every website you visit, from a simple blog to a complex application, is built on a foundation of HTML. Think of it as the skeleton that gives a webpage its structure. It tells the browser what is a heading, what is a paragraph, and where to put an image. Without HTML, a webpage would just be a jumble of unformatted text.
HTML, or HyperText Markup Language, provides the skeleton for your web content.
As a product designer, understanding this structure is key. It helps you create designs that are practical to build and easy for users to navigate. You don't need to be a coding expert, but knowing the basic building blocks helps you speak the same language as your development team.
Every HTML document follows a standard structure. It's like a template that ensures browsers can read and display the content correctly. At its core, it consists of a head and a body.
<!DOCTYPE html>
<html>
<head>
<!-- Metadata goes here, like the page title -->
<title>My First Webpage</title>
</head>
<body>
<!-- Visible content goes here -->
</body>
</html>
The <!DOCTYPE html> declaration defines the document type. The <html> element is the root of the page. The <head> section contains information about the page (like the title that appears in the browser tab), while the <body> contains all the visible content, the stuff users actually see and interact with.
Giving Content Meaning
HTML uses tags to define different types of content. These tags are keywords surrounded by angle brackets, like <p> for a paragraph. Most tags come in pairs: an opening tag and a closing tag. The closing tag has a forward slash before the tag name, like </p>.
Using the right tag for the right content is called semantic HTML. It means choosing tags based on their meaning, not just how they look.
Why does this matter? For one, it makes your content accessible. Screen readers, which are used by visually impaired users, rely on semantic HTML to understand the page structure and read it aloud correctly. It also helps search engines like Google understand what your page is about, which can improve your site's ranking.
Let's look at some of the most common tags you'll encounter.
| Tag | Purpose | Example |
|---|---|---|
<h1> to <h6> | Headings | <h1>Main Title</h1> |
<p> | Paragraph | <p>This is a paragraph of text.</p> |
<a> | Link (Anchor) | <a href="https://www.example.com">Visit Example</a> |
<ul>, <ol>, <li> | Lists | <ul><li>Item 1</li></ul> |
<img> | Image | <img src="image.jpg" alt="A descriptive caption"> |
Headings create a hierarchy. <h1> is the most important heading on the page, and you should generally only have one. <h2> is for subheadings, <h3> for sub-subheadings, and so on. This isn't just about font size; it's about creating a logical outline for your content.
For lists, <ul> creates an unordered (bulleted) list, while <ol> creates an ordered (numbered) list. Each item within the list is wrapped in an <li> tag.
Images have a special attribute called alt. This provides alternative text for screen readers or if the image fails to load. Writing descriptive alt text is a crucial part of creating accessible designs.
Gathering Information
Beyond displaying content, HTML allows us to collect information from users through forms. Forms are essential for everything from simple search bars to complex registration processes.
A form is created with the <form> tag. Inside it, you use various <input> elements to create fields for users to fill out.
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd"><br>
<input type="submit" value="Submit">
</form>
The type attribute on the <input> tag is very important. It can be text for a standard text field, password to obscure the characters, email to validate for an email format, checkbox for a toggle option, or submit for a button that sends the form data.
The <label> tag is also vital for accessibility. It connects the text description to the form field itself, allowing screen readers to announce what the field is for.
Ready to check your understanding?
What is the primary function of HTML in web development?
Every standard HTML document is primarily composed of which two main sections?
Knowing these HTML basics provides a strong foundation. It allows you to create designs that are not only beautiful but also structured, accessible, and ready for development.