An "About Us" page can be just as important as a company’s home page. In this lesson, you'll learn how to create one using a simple, ready-to-use HTML template that you can copy and paste into your project. We’ve built the page using ten essential HTML elements for best results—and the best part is, we explain each tag with easy-to-understand analogies to help you grasp how they work.
We all know that "About Us" pages are essential—they share important information about a website and build trust with visitors. In this lesson, we’ve created a complete HTML About Us page that you can easily copy and add to your project. We’ve also included a basic HTML template featuring the core information you’ll need.
An About Us page helps tell your brand story, but it’s not the only must-have. Explore our full guide on building the main HTML website pages for a business.
Not satisfied with the templates? Try our custom AI prompt to generate a unique HTML design tailored to your style. To keep learning, don’t miss our “Top 10 HTML Elements in the About Us Example,” where we break down key elements with clear explanations.
Full HTML About Us Example
About Us HTML Full Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>About Us | PushCodeFar.com</title>
</head>
<body>
<header>
<h1>About Us</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Our Mission</h2>
<p>At PushCodeFar.com,
our mission is to make coding
accessible, enjoyable, and
understandable for beginners
everywhere. We believe that anyone
can learn to code with the right
resources and support.</p>
</section>
<section>
<h2>What We Offer</h2>
<ul>
<li>Beginner-friendly tutorials
on HTML, CSS, JavaScript, and Python</li>
<li>Downloadable coding
materials and exercises</li>
<li>Step-by-step guides for
real-world coding projects</li>
<li>Tips and tools for building
your first websites and apps</li>
</ul>
</section>
<section>
<h2>Our Story</h2>
<p>PushCodeFar.com was started
by a team of educators and developers
who saw how intimidating learning to
code could be for newcomers. We
wanted to create a supportive space
where students could learn the
fundamentals of web development
at their own pace — no experience required.</p>
</section>
<section>
<h2>Meet the Team</h2>
<p>We’re a collective of teachers,
coders, designers, and lifelong learners
who are passionate about digital education.
We collaborate to produce clear, engaging
content to help students push their coding
skills farther every day.</p>
</section>
<section>
<h2>Get in Touch</h2>
<address>
We'd love to hear from you! Reach
us at: <br>
<a href="mailto:[email protected]">
[email protected]</a>
</address>
</section>
</main>
<footer>
<p>© 2025 PushCodeFar.com.
All rights reserved.</p>
</footer>
</body>
</html>Bonus HTML Template
About Us HTML Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>About Us</title>
</head>
<body>
<header>
<h1>About Us</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Our Mission</h2>
<p>We are dedicated to
empowering individuals through
accessible and beginner-friendly
coding education.</p>
</section>
<section>
<h2>What We Offer</h2>
<ul>
<li>Step-by-step coding tutorials</li>
<li>Downloadable learning materials</li>
<li>Real-world project guides</li>
</ul>
</section>
<section>
<h2>Our Story</h2>
<p>Started by passionate educators,
our platform was built to simplify
coding for everyone, especially those
just starting out.</p>
</section>
<section>
<h2>Meet the Team</h2>
<p>We are a group of developers,
educators, and designers working
together to make learning code fun
and effective.</p>
</section>
<section>
<h2>Get in Touch</h2>
<address>
Email us at <a href=
"mailto:[email protected]">
[email protected]</a>
</address>
</section>
</main>
<footer>
<p>© 2025 Example Company.
All rights reserved.</p>
</footer>
</body>
</html>A.I. Prompt
A.I. Prompt
You are an expert at creating
"HTML About Us Pages". Design
a simple HTML about us page
without CSS and styling.An effective About Us page often features visuals like team photos or a company logo. If you need a quick brush-up on how to add images properly, W3Schools’ guide to HTML images has you covered.
Top 10 HTML Elements in this About Us Example
| HTML Element | Importance |
|---|---|
| <!DOCTYPE> | Explains to the browser what document type to use. |
| <html> | It lets us know that it contains HTML elements inside. |
| <head> | Holds things like titles and links. |
| <body> | This is where the bulk of information lives. |
| <header> | This element introduces us to the company logo and name. |
| <nav> | A list of links that connect to parts of the page. |
| <main> | Makes it easier to find the central part of the page. |
| <section> | Groups parts of the page together for easier reading. |
| <ul> | It holds unordered lists of items like links and content. |
| <footer> | It displays HTML elements like social links and copyrights. |
HTML Elements Explanation
The <!DOCTYPE> declaration in an "About Us" page is like the instruction sheet at the front of a company brochure. It gives the browser instructions on how to present the information.
The <html> tag is like the cover that wraps the entire company brochure. It keeps all the elements inside organized in one complete package.
The <head> tag is like the planning notes behind the scenes of a company presentation. It has things like titles and CSS links.
The <body> element in an "About Us" page is like the main display area of a company exhibit. It has things like paragraphs, images, and videos to watch.
The <header> declaration element is like the title banner at the top of a company profile. It displays things like company log, page title, and navigational links.
The <nav> element in an "About Us" page is like the table of contents in a company booklet. It has links that connect to different sections of a page or website.
The <main> element is like the core chapters in a company’s storybook. It has things like company mission, vision and history.
The <section> tag is like a dedicated room in a company museum. A page can be broken down into smaller related groups for easier reading.
The <ul> tag is like a bulletin board listing key highlights. It can hold text, links and other key items.
The <footer> element in an "About Us" page is like the back cover of a company brochure. It holds things like copyrights, social media links and privacy policy URL's.
Conclusion
The "About Us" page can be simple or feature a variety of HTML elements to better tell your website's story. Use the Top 10 HTML elements list to help design your own version. For cleaner code, remember to keep your HTML and CSS separate.
Need inspiration? Explore popular websites to see how they craft their "About Us" pages—many include images, videos, timelines, and even contact forms. Have more ideas or questions? Share them in the comments below.