🔹 HTML Elements & Definitions
Document Setup
<!DOCTYPE html>: Declares the document as HTML5. Required at the top.
<html>: Root element of the HTML page.
<head>: Container for metadata, links, and scripts (not visible on the page).
<meta>: Defines metadata like character encoding and viewport settings.
<title>: Sets the text shown in the browser tab.
<link>: Links external resources like stylesheets (rel="stylesheet").
Body Content
<body>: Main container for everything rendered on the page.
<div>: Generic container element. Often used for layout. In this case, used with class="menu" to
group all menu content.
Text & Layout
<main>: Represents the dominant content of the document.
<h1>: Main heading (typically used once per page).
<h2>: Secondary heading (used to title each section).
<p>: Paragraph of text. Here used for descriptions and prices.
<hr>: Thematic break (horizontal line).
<section>: Groups related content. Here, used for Coffee and Desserts sections.
<article>: Independent, self-contained content. Here, each item is wrapped in its own article.
<footer>: Footer for the page. Used for contact links and address.
Media
<img>: Embeds an image. Requires a src (source URL) and alt (alternative text).
Links
<a>: Anchor element used to create hyperlinks.
o href: URL of the page the link goes to.
o target="_blank": Opens the link in a new tab.
Attribute Used In Meaning / Usage
lang="en" <html> Declares the language of the document as English.
Attribute Used In Meaning / Usage
Declares the character encoding (supports all
charset="utf-8" <meta>
characters/symbols).
name="viewport" <meta> Ensures responsive scaling on mobile devices.
content="width=device-width, initial-
<meta> Scales layout to device width.
scale=1.0"
rel="stylesheet" <link> Describes the type of link; here it's a CSS stylesheet.
href="[Link]" <link> Specifies the location of the external CSS file.
Applies styles to the outer container for
class="menu" <div>
layout/styling.
class="established" <p> Used for italic style (via CSS).
class="item" <article> Groups each menu item pair. Used for layout styling.
class="flavor" <p> Identifies the name of coffee flavors.
class="dessert" <p> Identifies dessert items.
class="price" <p> Targets prices for layout alignment.
class="bottom-line" <hr> A custom class to style the bottom horizontal line.
target="_blank" <a> Opens the link in a new tab or window.
Describes the image for accessibility and if it fails to
alt="..." <img>
load.
src="..." <img> The image’s file path or URL.
🔹 CSS Linkage
<link href="[Link]" rel="stylesheet" />:
Connects your HTML to your external CSS file ([Link]) where all the visual styling is applied.
Class Name Used On Purpose (likely styling target)
menu <div> Main wrapper for layout and padding
established <p> Used to italicize text (Est. 2020)
item <article> Used to group a pair of <p> elements (flavor + price)
Class Name Used On Purpose (likely styling target)
flavor <p> Targets left alignment and width for coffee flavor names
dessert <p> Targets left alignment and width for desserts
price <p> Right alignment and narrower width for prices
bottom-line <hr> Custom style for the bottom horizontal rule
address <p> Likely used to style the contact address