Chapter 7: HTML Practical
BHM 301: E-Commerce for Hospitality — 5th Semester | A complete guide to building web pages with HTML
Section 1: HTML Document Structure
1.1 What is HTML?
HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the World Wide Web. Every website you visit — from Google to your favourite hotel's booking page — is built using HTML as its foundation.
HTML is not a programming language. It is a markup language, meaning it uses special tags to annotate text and tell the browser how to display content. Think of it as the skeleton of a webpage — it defines the structure, while CSS adds the styling and JavaScript adds interactivity.
1.2 The Basic Structure of an HTML Document
Every HTML document follows a standard structure. Understanding this skeleton is the first step to building any webpage. Here are the essential components:
| Element | Purpose | Required? |
|---|---|---|
<!DOCTYPE html> |
Tells the browser this is an HTML5 document | Yes |
<html> |
Root element that wraps the entire page | Yes |
<head> |
Contains metadata: title, character set, linked CSS files | Yes |
<title> |
Sets the text shown in the browser tab | Yes |
<body> |
Contains all visible content displayed to the user | Yes |
1.3 Your First HTML Page
Let us create a simple HTML page for a hotel website. This example demonstrates the basic skeleton with a heading, a paragraph, and proper document structure:
<!-- My first HTML page --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Welcome to Grand Hotel</title> </head> <body> <h1>Welcome to Grand Hotel</h1> <p>Experience luxury in the heart of Kathmandu.</p> <p>Book your stay with us for an unforgettable experience.</p> </body> </html>
Welcome to Grand Hotel
Experience luxury in the heart of Kathmandu.
Book your stay with us for an unforgettable experience.
Key Insight: The <head> section is for the browser (metadata,
title, CSS links), while the <body> section is for the user (everything they
see on screen). Always keep this distinction clear.
1.4 How to Create and View an HTML File
For Students: Use Visual Studio Code (free) as your text editor. Install the "Live Server" extension to see changes in real-time as you edit your HTML files.
Section 2: HTML Elements and Tags
2.1 Understanding Tags and Elements
HTML uses tags to mark up content. Tags are keywords enclosed in angle brackets. Most tags come in pairs — an opening tag and a closing tag (with a forward slash). The content between the opening and closing tags, along with the tags themselves, forms an element.
2.2 Heading Tags (H1 – H6)
HTML provides six levels of headings, from <h1> (largest and most important) to
<h6> (smallest). Headings are used to structure content
hierarchically, much like chapters and sub-sections in a textbook.
<h1>Grand Hotel — Main Title</h1> <h2>Our Rooms</h2> <h3>Deluxe Suite</h3> <h4>Suite Features</h4> <h5>Bathroom Amenities</h5> <h6>Soap & Shampoo Brands</h6>
Grand Hotel — Main Title
Our Rooms
Deluxe Suite
Suite Features
Bathroom Amenities
Soap & Shampoo Brands
Important Rule: Use only one <h1> per page
(for the main title). Use <h2> for major sections, <h3>
for sub-sections, and so on. Never skip levels (e.g., don't jump from H1 to H4). This is
critical for both SEO and accessibility.
2.3 Paragraph Tag
The <p> tag defines a paragraph of text. Browsers automatically add some vertical
spacing above and below paragraphs to make content readable.
White Space Rule: HTML collapses multiple spaces and line breaks into a single
space. If you press Enter ten times in your code, the browser still shows it as one continuous
line. Use <br> for a line break or <p> for separate
paragraphs.
2.4 Text Formatting Tags
HTML provides several tags for formatting text inline. These help emphasize words, mark important text, and add visual hierarchy within paragraphs.
| Tag | Purpose | Example Output |
|---|---|---|
<b> |
Bold text (visual only) | Bold text |
<strong> |
Important text (bold + semantic meaning) | Strong text |
<i> |
Italic text (visual only) | Italic text |
<em> |
Emphasized text (italic + semantic meaning) | Emphasized |
<u> |
Underlined text | Underlined |
<small> |
Smaller text (fine print) | Small text |
<mark> |
Highlighted text | Highlighted |
<br> |
Line break (self-closing tag) | Line 1 Line 2 |
<hr> |
Horizontal rule / divider line | — |
<p>Our hotel is <strong>rated 5 stars</strong> by international travel magazines.</p> <p>Check-in time: <em>2:00 PM</em><br> Check-out time: <em>11:00 AM</em></p> <p><mark>Special Offer!</mark> Book now and get <b>20% off</b> your first stay.</p>
✔ Do This
Use <strong> for important text and
<em> for emphasis. These carry semantic meaning — they
help screen readers and search engines understand your content.
✘ Avoid This
Don't use <b> and <i> for
meaning. They are purely visual. A screen reader won't know that bold text is "important" unless
you use <strong>.
2.5 The <div> and <span> Tags
The <div> tag is a block-level container used to group sections of
content. The <span> tag is an inline container used to style a part
of text. Neither has any visual meaning by themselves — they are structural tools.
<!-- div groups a section of content --> <div> <h2>About Us</h2> <p>We have been serving guests since 1995.</p> </div> <!-- span styles part of a sentence --> <p>Room rate starts from <span style="color:red;">NPR 5,000</span> per night.</p>
Section 3: HTML Links (Hyperlinks)
3.1 What are Hyperlinks?
Hyperlinks are the backbone of the World Wide Web — they connect one page to another. In HTML,
links are created using the anchor tag <a>. The word "hypertext" in
HTML literally refers to text that links to other content.
Links can point to external websites, other pages on the same site, sections within the same page, email addresses, or even downloadable files.
3.2 Types of Links
| Link Type | Example Code | Description |
|---|---|---|
| External Link | <a href="https://google.com"> |
Opens another website |
| Internal Link | <a href="rooms.html"> |
Opens another page on same site |
| Section Link | <a href="#contact"> |
Jumps to a section on same page |
| Email Link | <a href="mailto:info@hotel.com"> |
Opens email client |
| Phone Link | <a href="tel:+977-1-4444444"> |
Initiates phone call (mobile) |
<!-- External link opening in a new tab --> <a href="https://www.booking.com" target="_blank"> Book on Booking.com </a> <!-- Internal link to another page --> <a href="rooms.html">View Our Rooms</a> <!-- Jump to a section on the same page --> <a href="#contact">Contact Us</a> <!-- ... further down the page ... --> <div id="contact"> <h2>Contact Information</h2> </div> <!-- Email and Phone links --> <a href="mailto:info@grandhotel.com">Email Us</a> <a href="tel:+977-1-4444444">Call Us</a>
3.3 The target Attribute
| Value | Behaviour | When to Use |
|---|---|---|
_self |
Opens in same tab (default) | Internal navigation |
_blank |
Opens in a new tab/window | External websites, PDFs |
_parent |
Opens in parent frame | Frameset pages (rare) |
_top |
Opens in full window | Breaking out of frames |
Hospitality Tip: Hotels should use target="_blank" for external
links (like TripAdvisor reviews or Google Maps), so guests don't leave the hotel website.
Internal navigation links should open in the same tab.
Section 4: HTML Lists
4.1 Types of Lists in HTML
Lists are one of the most commonly used structures in web design. Hotel websites use lists for amenities, room features, dining menus, policies, and much more. HTML supports three types of lists:
4.2 Unordered Lists
An unordered list uses <ul> and displays items with bullet points. The order of items
does not matter. Use this for amenities, features, or any collection where sequence is irrelevant.
<h3>Room Amenities</h3> <ul> <li>Free Wi-Fi</li> <li>Air Conditioning</li> <li>55-inch Smart TV</li> <li>Mini Bar</li> <li>24-Hour Room Service</li> </ul>
Room Amenities
- Free Wi-Fi
- Air Conditioning
- 55-inch Smart TV
- Mini Bar
- 24-Hour Room Service
4.3 Ordered Lists
An ordered list uses <ol> and displays items with numbers. Use this when the sequence
matters — like check-in steps or booking procedures.
<h3>Online Booking Steps</h3> <ol> <li>Visit our website</li> <li>Select your check-in and check-out dates</li> <li>Choose your preferred room type</li> <li>Enter guest details and payment info</li> <li>Confirm your reservation</li> </ol>
Online Booking Steps
- Visit our website
- Select your check-in and check-out dates
- Choose your preferred room type
- Enter guest details and payment info
- Confirm your reservation
4.4 Nested Lists
Lists can be nested inside other lists to create a hierarchical structure — perfect for detailed menus or multi-level amenity breakdowns.
<h3>Hotel Services</h3> <ul> <li>Dining <ul> <li>Rooftop Restaurant</li> <li>Poolside Bar</li> <li>In-Room Dining</li> </ul> </li> <li>Recreation <ul> <li>Swimming Pool</li> <li>Fitness Center</li> </ul> </li> </ul>
Hotel Use Case: Nested lists are commonly used on hotel websites for restaurant menus (categories → items), hotel policies (section → rules), and navigation menus (main links → dropdown sub-links).
Section 5: HTML Images
5.1 Adding Images to a Webpage
Images are critical for hotel websites — room photos, gallery, food images, and property shots
drive bookings. The <img> tag is used to embed images. It is a self-closing
tag (no closing tag needed).
5.2 Essential Image Attributes
| Attribute | Purpose | Required? | Example |
|---|---|---|---|
src |
Specifies the path/URL of the image | Yes | src="images/pool.jpg" |
alt |
Alternative text if image doesn't load; used by screen readers | Yes | alt="Swimming pool view" |
width |
Sets image width in pixels or % | No | width="400" |
height |
Sets image height in pixels or % | No | height="300" |
title |
Tooltip text on hover | No | title="Our infinity pool" |
<!-- Image from a local folder --> <img src="images/deluxe-room.jpg" alt="Deluxe room with mountain view" width="600" height="400"> <!-- Image from the internet --> <img src="https://example.com/photo.jpg" alt="Hotel exterior at sunset" width="100%"> <!-- Image as a clickable link --> <a href="gallery.html"> <img src="images/gallery-thumb.jpg" alt="Click to view full gallery" width="200"> </a>
Always include the alt attribute! It is essential for accessibility
(screen readers read it aloud), SEO (Google uses alt text to understand images), and as fallback
text when images fail to load.
5.3 Image File Formats
| Format | Best For | Transparency? | File Size |
|---|---|---|---|
| JPEG / JPG | Photographs, room images | No | Small |
| PNG | Logos, icons, screenshots | Yes | Medium |
| GIF | Simple animations | Yes | Small |
| SVG | Icons, logos (scalable) | Yes | Very Small |
| WebP | Modern web images (best quality/size ratio) | Yes | Very Small |
For Hotel Websites: Use JPEG for room photos and food images (good quality, small file). Use PNG for the hotel logo (needs transparent background). Use WebP for modern browsers for best performance. Compress all images before uploading!
Section 6: HTML Forms
6.1 Why Forms Matter in Hospitality
HTML forms are the primary way users interact with hotel websites. Every booking, reservation inquiry, feedback submission, and login uses a form. Forms collect data from the user and send it to a server for processing.
6.2 The <form> Tag
The <form> element wraps all input fields. It has two critical attributes:
| Attribute | Purpose | Common Values |
|---|---|---|
action |
URL where form data is sent | "submit.php", "https://api.hotel.com/book" |
method |
HTTP method for sending data | "GET" (data in URL) or "POST" (data hidden) |
GET vs POST: Use GET for search forms and non-sensitive data (data
appears in the URL). Use POST for login, payment, and booking forms (data is hidden
and more secure).
6.3 Common Form Input Types
| Input Type | Code | Use Case |
|---|---|---|
| Text | <input type="text"> |
Name, address |
<input type="email"> |
Email address (validates format) | |
| Password | <input type="password"> |
Login/signup (text is masked) |
| Number | <input type="number"> |
Number of guests, room count |
| Date | <input type="date"> |
Check-in / check-out dates |
| Tel | <input type="tel"> |
Phone number |
| Radio | <input type="radio"> |
Select one option (room type) |
| Checkbox | <input type="checkbox"> |
Select multiple options (services) |
| Textarea | <textarea></textarea> |
Long text (special requests) |
| Select | <select><option> |
Dropdown menu (country, room type) |
| Submit | <input type="submit"> |
Button to send the form |
6.4 Complete Hotel Booking Form Example
<form action="book.php" method="POST"> <!-- Guest Name --> <label for="name">Full Name:</label> <input type="text" id="name" name="guest_name" placeholder="Enter your full name" required> <!-- Email --> <label for="email">Email:</label> <input type="email" id="email" name="guest_email" placeholder="you@example.com" required> <!-- Check-in & Check-out Dates --> <label for="checkin">Check-in Date:</label> <input type="date" id="checkin" name="checkin" required> <label for="checkout">Check-out Date:</label> <input type="date" id="checkout" name="checkout" required> <!-- Number of Guests --> <label for="guests">Number of Guests:</label> <input type="number" id="guests" name="guests" min="1" max="10" value="2"> <!-- Room Type (Radio Buttons) --> <p>Room Type:</p> <input type="radio" id="standard" name="room" value="standard"> <label for="standard">Standard</label> <input type="radio" id="deluxe" name="room" value="deluxe"> <label for="deluxe">Deluxe</label> <input type="radio" id="suite" name="room" value="suite"> <label for="suite">Suite</label> <!-- Additional Services (Checkboxes) --> <p>Additional Services:</p> <input type="checkbox" id="breakfast" name="services" value="breakfast"> <label for="breakfast">Breakfast Included</label> <input type="checkbox" id="airport" name="services" value="airport"> <label for="airport">Airport Transfer</label> <input type="checkbox" id="spa" name="services" value="spa"> <label for="spa">Spa Package</label> <!-- Special Requests --> <label for="requests">Special Requests:</label> <textarea id="requests" name="requests" rows="4" cols="40" placeholder="Any special requirements?"></textarea> <!-- Submit Button --> <input type="submit" value="Book Now"> </form>
Room Type:
Additional Services:
6.5 The <label> Tag
The <label> tag links descriptive text to a form input using the for
attribute (which must match the input's id). This is crucial for accessibility —
clicking the label text will focus/activate its associated input.
Common Mistake: Never create form inputs without labels. Every
<input> should have a corresponding <label>. Also, always
use the name attribute on inputs — without it, the data will not be sent to
the server.
6.6 The <select> Dropdown
<label for="country">Country:</label> <select id="country" name="country"> <option value="">-- Select Country --</option> <option value="nepal">Nepal</option> <option value="india">India</option> <option value="china">China</option> <option value="usa">United States</option> </select>
6.7 Key Form Attributes
| Attribute | Purpose | Example |
|---|---|---|
placeholder |
Ghost text inside input (hint) | placeholder="Enter name" |
required |
Field must be filled before submission | required |
value |
Default or pre-filled value | value="2" |
min / max |
Range limits for number/date inputs | min="1" max="10" |
maxlength |
Maximum characters allowed | maxlength="100" |
disabled |
Greys out the input (non-editable) | disabled |
readonly |
Input is visible but cannot be changed | readonly |
Section 7: Summary & Key Terms
7.1 Consolidated Summary
HTML Structure — Every HTML page starts with
<!DOCTYPE html>, followed by <html> containing
<head> (metadata) and <body> (visible content).
Elements & Tags — HTML uses opening and closing tags to define elements.
Headings (<h1>–<h6>) structure content. Paragraphs
(<p>) hold text. Formatting tags like <strong> and
<em> add semantic emphasis.
Links — The <a> tag creates hyperlinks using
href. Use target="_blank" to open links in new tabs. Links connect pages,
sections, emails, and phone numbers.
Lists — Unordered lists (<ul>) use bullets; ordered lists
(<ol>) use numbers. Both use <li> for items. Lists can be
nested.
Images — The <img> tag is self-closing and requires
src and alt. Choose JPEG for photos, PNG for logos, WebP for modern web.
Forms — The <form> tag collects user
data. Key input types: text, email, date, radio, checkbox, textarea, select, and submit. Always use
<label> and name attributes.
7.2 Key Terms Glossary
<p>) that
define HTML elements. Most tags have an opening tag and a closing tag (with /).
<p>Hello</p> is a paragraph element.name="value" pairs inside the opening tag. Examples: href,
src, alt, class, id.
<img>, <br>, <hr>,
<input>.
<!DOCTYPE html> is a declaration that tells the
browser this is an HTML5 document. It must be the very first line of the file.<strong> for importance). This improves accessibility and SEO compared to
purely visual tags.
<form>) that collects user input and
sends it to a server for processing. Uses the action and method
attributes.<a> (anchor) tag. The href attribute specifies the destination.
alt attribute on <img> tags.
Provides a text description for accessibility (screen readers) and displays when the image fails
to load.7.3 Quick Reference Cheat Sheet
| Category | Tags | Key Attributes |
|---|---|---|
| Structure | <html>, <head>, <body>,
<title>
|
lang, charset |
| Text | <h1>–<h6>, <p>,
<br>, <hr>
|
— |
| Formatting | <strong>, <em>, <mark>,
<small>
|
— |
| Links | <a> |
href, target |
| Lists | <ul>, <ol>, <li> |
type, start |
| Images | <img> |
src, alt, width, height |
| Forms | <form>, <input>, <label>,
<select>, <textarea>
|
action, method, type, name,
required
|
| Containers | <div>, <span> |
class, id, style |
Study Tip: Practice is key for HTML. Open a text editor, type out the code
examples from each section, save them as .html files, and open them in your
browser. Experiment by changing values, adding new elements, and breaking things intentionally
to understand how HTML works.