To start your web development quest, one of the best places to begin is with HTML. Every quest begins with a map, and in coding, your basic adventure map is HTML.
HTML stands for HyperText Markup Language, and it’s the foundation of every website you’ve ever visited. Think of it as the basic building blocks (or map) of a web page. It provides structure and meaning to your content in ways that internet browsers and search engines can display what's been entered.
In this tutorial we’ll go over a few of the most common HTML elements you’ll use every day. By the end, you’ll be able to build a very simple webpage with a heading, some text, a link, and a button. For now we won't do any styling and simply focus on some basics.
First things first: what are HTML elements?
HTML is made up of elements. Each element is written with a tag, like this example:
<tagname>Content goes here</tagname>The tag tells the browser what kind of content it’s dealing with. For example, is it a heading? A paragraph? A link to another page?
Most tags come in pairs like you see above with our "tagname" example. These are referred to as opening and closing tags. In the example above, you can see that the opening and closing tag are almost identical, except the closing tag adds a / before the tag name.
Some tag types don't come in pairs. We'll cover a few of them later in this tutorial.
The Structure of an HTML Page
Before adding elements like headings, paragraphs, or other content, every HTML document needs a basic structure that forms the page's foundation.
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage Adventure</title>
</head>
<body>
<!-- All the visible content goes here -->
</body>
</html>Here’s what each piece does:
<!DOCTYPE html> – tells the browser this is an HTML5 document (the current standard).
<html> – wraps everything on your page.
<head> – holds information about your page (metadata), not usually shown on the screen.
<title> – sets the text that appears in the browser tab.
<body> – everything inside here is what people see on the actual page.
After the foundation of the page has been created, we can now add other elements.
💡 A note on comments: In HTML, comments look like this and are not displayed in the browser:
<!-- This is an HTML comment - it stays hidden as though cloaked in invisibility! -->Let's take a closer look at more element types:
Headings (<h1>), (<h2>), etc
Similar to documents outside of the web, headings are our titles and subtitles. Headings are like the banners in your adventurer’s guild hall - the largest banner (<h1>) declares the main quest, while smaller banners (<h2> through <h6>) mark side quests and subplots.
In HTML they come in six different levels:
<h1> is the most important (like a main title).
<h2> through <h6> are progressively less important.
Example:
<h1>Main Page Title</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>…and so on.
By default, web browsers apply some basic styling to HTML elements, so when you view this in a browser, you’ll see that the <h1> text appears the largest, with each smaller heading getting progressively smaller.
Paragraphs (<p>)
Paragraphs hold longer pieces of text, like the sentences and paragraphs you find in a book or document.
Example:
<p>This is a paragraph of text. You can add as much text as you want here, and it will appear together as one block.</p>Links (<a>)
Links are how to connect pages together whether it’s within your own website or elsewhere. A link is created with the <a> element, also called an anchor tag. The href attribute (short for hyperlink reference) you see below tells the browser where the link goes. Attributes are extra information written inside the opening tag of an HTML element. They modify how the element behaves or appears.
Example:
<a href="https://example.com">Visit Example.com</a>When clicked, this will take the user to the website you specified in href.
Buttons (<button>)
Buttons are clickable elements used to trigger actions such as “add to cart” or “buy now”. Without any styling from CSS or interactivity from JavaScript, they don’t do as much, but you’ll use them a lot later when we add CSS and JavaScript to our webpage.
Example:
<button>Start Adventure</button>Images (<img>)
To display images, use the <img> element. Unlike headings or paragraphs, <img> doesn't need a closing tag. The single tag holds all the needed information.
Example:
<img src="photo.jpg" alt="A description of the super awesome photo">-
src attribute tells the browser where the image file is located.
-
alt attribute describes the image if it can’t load and is essential for web accessibility. Always include the alt attribute with an accurate description of the image so that individuals using screen readers and similar technologies know what's on the page.
Divs and Spans (<div> and <span>)
These are general-purpose elements you’ll use often to group content. They don’t change how content looks by themselves, but become very powerful when paired with CSS.
-
<div> is a block-level container (like a box that takes up the full width of the page).
-
<span> is an inline container (it fits inside a line of text).
Example:
<div>
<h2>Profile</h2>
<p>Hello! My name is <span>Wizard</span>.</p>
</div>Line Breaks (<br>)
The <br> element forces a line break. Unlike headings or paragraphs, it doesn't have a closing tag. It stands alone as a single tag, similar to <img>.
Example:
<p>123 Warlock Street<br>Secret Hollow, UK</p>Normally you’ll use CSS for spacing, but <br> is handy in cases like addresses, poems, or lyrics where natural line breaks are needed.
Putting It All Together
Below is an example putting all these elements together using one of our favorite free tools for online code editing - CodePen.
(We have no affiliation with CodePen, we just love their tools for on-the-go coding.😊)
One neat thing about CodePen is that just like a magic spell, it skips over all the boilerplate elements (<!DOCTYPE html>, <html>, <head>, <title>, <body>). Those tags are still part of a real webpage, but CodePen hides them for you so you can focus directly on the core HTML, CSS, and JavaScript. That makes it an excellent tool for testing and a friendly environment for beginners.
See the Pen Getting Started With HTML by Side Quest Studios (@sidequestxp) on CodePen.
Summary
Way to go adventurer - your first webpage! ✨
You just earned a healthy portion of XP and learned the basics of HTML!
- Document structure (<!DOCTYPE html>, <html>, <head>, <title>, <body>)
- Headings for titles and subheadings
- Paragraphs for blocks of text
- Links for navigation
- Buttons for actions
- Images with <img>
- Grouping with <div> and <span>
- Line breaks with <br>
Before completing future tutorials, we recommend choosing a free code editor you like whether it's CodePen, Visual Studio Code, or another one you find. Side note: We aren't associated with CodePen or Visual Studio Code in any way - they're just some popular free tools that can help you on your journey!
Stay tuned for future tutorials where you can earn more XP and learn more HTML elements, start adding styling with CSS, and add interactivity with JavaScript!