HTML Basics
Embark on your web development journey by mastering HTML—the essential building block of every website. Learn how to structure your content, embed media, and build accessible, user-friendly pages using clean, semantic markup.
Embark on your web development journey by mastering HTML—the essential building block of every website. Learn how to structure your content, embed media, and build accessible, user-friendly pages using clean, semantic markup.
Master the core structure of an HTML document and see how simple it is to build your own webpage. This interactive guide walks you through the essentials—from declaring the doctype to structuring headers, paragraphs, and more.
Explore the basic components of an HTML document. Learn about the <!DOCTYPE> declaration,
how the <head> sets up meta information, and the role of the <body>
in displaying content. Use our live editor to experiment and see your changes in real-time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<main>
<p>This is a simple webpage built with HTML basics.</p>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>
</html>Get acquainted with essential HTML terms and the basic tags required to build solid web pages. Click on each term below for a detailed explanation.
HTML is the backbone of the World Wide Web. It is a markup language used to define the structure of a webpage by using a series of elements represented by tags, such as headings, paragraphs, images, and links.
The <!DOCTYPE html> declaration informs the browser about the HTML version being used,
ensuring that the document is rendered in standards-compliant mode.
An HTML element is a discrete component of a webpage formed by a start tag, content, and an end tag (if not self-closing). It defines a part of the content and its behavior.
Tags are the fundamental components used to construct HTML elements. They are enclosed in angle brackets, for
example, <p> for a paragraph.
Attributes provide additional information about elements. They are added within the opening tag using a
key="value" format. For example, src="image.jpg" specifies the source of an image in an
<img> tag.
The <head> section contains metadata about the document such as its title, character set,
links to stylesheets, and scripts. This information helps browsers understand and process the page correctly.
The <body> section includes all the content that is visible to end users, such as text,
images, buttons, and forms.
<p>)The paragraph tag is used to define blocks of text. It automatically includes spacing before and after to improve readability.
<h1> to <h6>)
Headings are used to create a hierarchical structure for the content. <h1> represents the most
important heading, while <h6> designates the least important.
<a>)
The anchor tag creates hyperlinks, allowing users to navigate between pages or to different sections within the
same page. It primarily uses the href attribute to specify the target URL.
<img>)
The image tag is used to embed images. It requires the src attribute for the image source and the
alt attribute to provide alternative text for accessibility.
<ul>, <ol>, <li>)
Lists help organize content into groups. Unordered lists (<ul>) display bullet points while
ordered lists (<ol>) display numbers. Each list item is placed within an <li>
tag.
Explore and understand the fundamental building blocks that form every HTML document. A well-structured page begins with the correct use of these elements, ensuring accessible and SEO-friendly websites.
<!DOCTYPE html>
Declares the document type and sets the document to standards mode.
It informs the browser that the content is written in HTML5.
Example: <!DOCTYPE html>
<html>
The root element that encapsulates the entire document.
Remember to add the lang attribute to specify your content's language.
Example: <html lang="en">
<head>
Contains metadata and links to resources that are not displayed directly on the page.
This includes elements such as <meta> tags, <title>,
external CSS files, and scripts.
Example: <meta charset="UTF-8"> establishes the character set.
<body>
Encloses all the visible content such as text, images, and interactive elements.
This is where you build the structure of your webpage.
Example: The actual page content like headers, paragraphs, and sections reside here.
A semantically rich document often uses tags like:
<header>: Marks the header for a section or page with logos, navigation, etc.
<main>: Identifies the central content unique to the document.
<footer>: Contains closing elements like copyrights, contact information.
These elements not only improve accessibility but also enhance search engine optimization (SEO).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example HTML Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Webpage</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>Home</h2>
<p>This section introduces our website.</p>
</section>
<section id="about">
<h2>About Us</h2>
<p>Learn more about our mission and vision.</p>
</section>
</main>
<footer>
<p>© 2025 My Webpage</p>
</footer>
</body>
</html>
The diagram below visually represents the structure of a typical HTML document. Each label corresponds to an important element. Hover for more details.
Showcase your personality and skills by creating a personalized profile page. This project guides you through using core HTML elements to build a page that reflects your style—an excellent way to practice semantic markup.
<header> featuring your name and a tagline.
<section> elements to present an "About Me" section,
a portfolio with <article> elements, and any other relevant information.
<footer>.
This project solidifies your grasp of HTML structure. Try adding external links, images, or extra sections to customize the page further.
Try It Now!<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Profile Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Jane Doe</h1>
<p>Creative Developer | Designer | Innovator</p>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>I am passionate about creating engaging and intuitive web experiences. My background in design and development drives my creativity.</p>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<article>
<h3>Project One</h3>
<p>A brief description of this innovative project.</p>
</article>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Email: jane@example.com</p>
</section>
</main>
<footer>
<p>© 2025 Jane Doe. All rights reserved.</p>
</footer>
</body>
</html>