This page explains the essential HTML features used in our Hangman-Stg2 project. You'll see how tags, elements, and attributes work together to build a modern, responsive web app—especially when combined with Bootstrap 5 for styling.
Every HTML document starts with a <!DOCTYPE html> declaration, followed by the <html> element. The <head> contains metadata, links to stylesheets, and the page title. The <body> contains all visible content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hangman Stage 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="..." rel="stylesheet">
</head>
<body>
...content...
</body>
</html>
<meta charset="UTF-8"> — Sets character encoding for the document.<meta name="viewport" ...> — Makes the page responsive on all devices.<title>...</title> — Sets the browser tab title.<link rel="stylesheet" ...> — Links to Bootstrap and custom CSS files for styling.<style>...</style> — (Optional) Adds custom CSS directly in the HTML.
The <body> contains all the visible elements. Bootstrap's .container class centers and adds padding to your content.
<body class="bg-light">
<div class="container py-5">
<h1 class="text-center mb-4">Hangman Game - Stage 1</h1>
...
</div>
</body>
<h1>, <h2>, <div>, <span> — Structure and organize content.<button> — Interactive elements for user actions (e.g., "Restart Game").<a> — Hyperlinks for navigation (styled as buttons with Bootstrap).<script src="..."></script> — Loads JavaScript files for interactivity.<div id="wordDisplay" class="display-4 text-center mb-3"></div>
<div id="letterButtons" class="d-flex flex-wrap justify-content-center mb-3"></div>
<button id="resetBtn" class="btn btn-primary">Restart Game</button>
<a href="hangmanChatlogStg1.html" class="btn btn-outline-secondary">View AI Chatlog</a>
id="wordDisplay"), useful for JavaScript.class="btn btn-primary").<a> tags).
Bootstrap classes like container, btn, text-center, mb-4, and display-4 make your page look modern and work well on all devices. Outline button classes like btn-outline-secondary give interactive feedback on hover.
<button class="btn btn-primary">Restart Game</button>
<a class="btn btn-outline-secondary" href="hangmanChatlogStg1.html">View AI Chatlog</a>
Use <a> tags to link between your game, chatlog, and tutorial pages. You can style these links as buttons for a better user experience.
<a href="hangmanStg1a.html" class="btn btn-outline-light btn-sm">Game</a>
<a href="hangmanChatlogStg1.html" class="btn btn-outline-light btn-sm">AI Chatlog</a>
As our project grows, we incorporate more HTML features to enhance structure, readability, and content presentation. Here are some notable additions in Stage 2:
<, >, or & as text (especially in code examples), we use HTML entities (e.g., <, >, &). This is crucial for accurately showing code on tutorial pages like this one and in the chatlog.
<p>This shows a <div> tag.</p><!-- ... --> to add comments within our HTML. These are not displayed by the browser but help developers understand the code or temporarily disable parts of it.
<!-- This is a comment, hidden in the browser --><nav>: Defines a set of navigation links (used for our main site navigation).<footer>: Defines a footer for a document or section (used for copyright or last updated information).<figure> and <figcaption>: Used to group media content (like images) with a caption. Seen in our chatlog for the S.P.A.R.K. image.These tags give more meaning to our content, improving accessibility and SEO.
<img>): The <img> tag embeds images. Key attributes include src (image source URL) and alt (alternative text for accessibility and if the image fails to load).
<img src="images/sparkImg.jpg" alt="S.P.A.R.K. Acronym Graphic"><ol>): While <ul> creates bulleted lists, <ol> creates numbered lists. Useful for step-by-step instructions or ranked items.
<strong>: Indicates text with strong importance (usually bold).<code>: Marks a fragment of computer code (styled in our project).<kbd>: Represents user keyboard input (e.g., Ctrl+U).<pre>: The preformatted text tag preserves both spaces and line breaks, displaying text exactly as written in the HTML source. Best used for code samples, ASCII art, or any content where whitespace and formatting matter.
<pre>
function hello() {
console.log("Hello, world!");
}
</pre>
<hr>): The <hr> tag creates a horizontal rule, representing a thematic break or a separation between content sections.
HTML (HyperText Markup Language) is the backbone of almost every webpage you visit. It provides the fundamental structure and meaning to web content by using a system of tags and attributes. Understanding HTML is the first and most crucial step in web development, as it forms the skeleton upon which CSS (for styling) and JavaScript (for interactivity) build. Without HTML, there would be no web pages as we know them—no text, no images, no links, no forms, just a blank canvas. Mastering HTML allows you to create well-organized, accessible, and search-engine-friendly websites.
Ready to see how well you've grasped these concepts?
By combining these HTML elements, attributes, and Bootstrap classes, you create a clean, interactive, and responsive web app. Explore the game and chatlog to see these features in action!