HTML Real-Life Examples
See how real websites use HTML patterns for common page sections
1. Site Header & Navigation Bar
Almost every website has a header with a logo and navigation links. In HTML, this is usually created with <header> and <nav> elements plus an unordered list for the menu.
Mini Example: Simple Top Navigation
<header>
<h1 class="logo">MySite</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>2. Hero Section on a Landing Page
Landing pages often start with a “hero” section: a large headline, short description, and a call‑to‑action button. This is built with headings, paragraphs, and a button inside a semantic container.
Mini Example: Hero Block
<section class="hero">
<h1>Learn HTML the Practical Way</h1>
<p>Short, real-world examples to help you master HTML.</p>
<a href="html-tutorial.html" class="btn btn-primary">Start Learning</a>
</section>3. Feature Cards on Home Pages
Home pages commonly show features or services in a grid of “cards”. Each card is just a group of headings, text, and links wrapped in a <div> or <article>.
Mini Example: Three Feature Cards
<section class="features">
<article class="feature-card">
<h3>HTML Basics</h3>
<p>Learn structure, tags and attributes.</p>
</article>
<article class="feature-card">
<h3>CSS Styling</h3>
<p>Make your pages look beautiful.</p>
</article>
<article class="feature-card">
<h3>JavaScript</h3>
<p>Add interactivity and logic.</p>
</article>
</section>4. Pricing Section
SaaS and product sites often have a pricing section with a few plans side by side. This can be built with semantic headings and lists inside a simple grid.
Mini Example: Two Pricing Plans
<section class="pricing">
<article class="plan">
<h3>Basic</h3>
<p>$9 / month</p>
<ul>
<li>HTML tutorials</li>
<li>Email support</li>
</ul>
</article>
<article class="plan">
<h3>Pro</h3>
<p>$19 / month</p>
<ul>
<li>All Basic features</li>
<li>Extra projects & quizzes</li>
</ul>
</article>
</section>5. Contact Page Layout
A typical contact page combines contact details, a form, and sometimes a map. HTML forms and lists of information make this straightforward to build.
Mini Example: Simple Contact Section
<section class="contact">
<h2>Contact Us</h2>
<p>Email: support@example.com</p>
<p>Phone: +91-98765-43210</p>
<form>
<label for="cname">Name</label>
<input type="text" id="cname" name="cname">
<label for="cmsg">Message</label>
<textarea id="cmsg" name="cmsg"></textarea>
<button type="submit">Send</button>
</form>
</section>6. Blog Article Previews
Blogs and news sites often list several article previews on the home or category page using repeated <article> blocks.
Mini Example: Two Article Previews
<section class="blog-list">
<article class="post-preview">
<h2><a href="post1.html">Getting Started with HTML</a></h2>
<p>Learn the basic building blocks of the web...</p>
</article>
<article class="post-preview">
<h2><a href="post2.html">Understanding CSS Selectors</a></h2>
<p>Style your pages by targeting the right elements...</p>
</article>
</section>