We can't find the internet
Attempting to reconnect
Something went wrong!
Hang in there while we get back on track
HTML (HyperText Markup Language) is the standard language for creating web pages. It uses tags to structure content. Key points:
-
Document structure
- <!DOCTYPE html> — declares HTML5.
- <html> — root element.
- <head> — metadata: <title>, <meta>, <link>, <style>, <script> (usually not visible).
- <body> — visible content: text, images, links, lists, etc.
-
Basic tags
- <title>Your page title</title> — shown in browser tab (inside head).
- Headings: <h1>…</h1> to <h6>…</h6>.
- Paragraph: <p>Paragraph text</p>.
- Links: <a href=”https://example.com”>link text</a>.
- Images: <img src=”image.jpg” alt=”description”> (self-closing; include alt).
-
Lists:
- Unordered: <ul><li>Item</li></ul>
- Ordered: <ol><li>Item</li></ol>
- Line break: <br>
- Horizontal rule: <hr>
-
Attributes
- Provide extra info inside opening tag: <tag attribute=”value”>.
- Common attributes: id, class, href, src, alt, title, style.
-
Nesting and well-formedness
- Tags should be properly opened and closed and nested (e.g., <p><strong>text</strong></p>).
-
Example minimal page <!DOCTYPE html> <html> <head>
<meta charset="utf-8"> <title>My Page</title></head> <body>
<h1>Hello</h1> <p>This is a minimal HTML page.</p> <a href="https://example.com">Visit example</a></body> </html>
-
Where to learn next
- Mozilla Developer Network (MDN) HTML guide: https://developer.mozilla.org/en-US/docs/Web/HTML
- W3C HTML specification and tutorials: https://www.w3.org/ and https://www.w3schools.com/html/
Tips: start by editing the example file, open it in a browser, and change tags/attributes to see effects.
-
W3C (World Wide Web Consortium)
- What it is: The official international standards organization that develops and publishes web standards (including the HTML specification). URL: https://www.w3.org/
- What you’ll find there: Formal specifications (normative language), recommendations, validator tools, accessibility standards (WCAG), and working-group documents.
- Best for: Definitive reference about how HTML must behave, advanced details, and standards compliance. Use when you need authoritative, precise rules (e.g., for interoperability or building browsers/tools).
- Style: Technical and formal; not a beginner tutorial.
-
W3Schools
- What it is: A popular, independent educational website offering tutorials, examples, and interactive “Try it yourself” editors for HTML, CSS, JavaScript, and more. URL: https://www.w3schools.com/html/
- What you’ll find there: Easy-to-follow beginner-friendly tutorials, concise examples, live editing, and quick reference pages.
- Best for: Fast hands-on learning, practicing basic code snippets, and getting up to speed quickly.
- Caveat: Historically less authoritative and occasionally out-of-date or simplified; cross-check with MDN or the W3C spec for correctness on edge cases.
-
How to use them together
- Learn basics and practice on W3Schools (or MDN) to build intuition.
- Consult MDN (Mozilla Developer Network) for practical, accurate docs and examples: https://developer.mozilla.org/
- Use the W3C spec when you need the definitive technical rules or to resolve ambiguous behavior.
- When in doubt about compatibility, check MDN’s browser-compatibility tables or the W3C spec.
References
- W3C: https://www.w3.org/
- W3Schools HTML tutorial: https://www.w3schools.com/html/
- MDN Web Docs (recommended practical reference): https://developer.mozilla.org/en-US/docs/Web/HTML
The <title> element, placed inside the <head> of an HTML document, defines the page’s title. That title is:
- Shown in the browser’s tab or window title bar.
- Used as the default name when someone bookmarks or favorites the page.
- Often used by search engines as the clickable headline in search results (important for SEO).
- Displayed when the page is shared on some social platforms (or used by those platforms as a fallback).
- Used by accessibility tools and some browser extensions to identify the page.
Practical notes:
- Put a concise, descriptive title (50–70 characters is a common recommendation) that reflects the page’s content.
- There should be exactly one <title> element in the <head>. Multiple titles can confuse browsers and search engines.
- Always include it, even for simple pages. Example: <head> <meta charset=”utf-8”> <title>My Page — About Cats</title> </head>
References:
- MDN Web Docs: <title> — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title
- W3C HTML spec: the head and title element.
The <body> element is the part of an HTML document that contains everything the user normally sees in the browser window. It sits inside <html> and alongside <head>, and its contents are rendered as the page’s visible content.
Key facts, concisely:
- Purpose: Holds the document’s visible content — text, headings, paragraphs, images, links, lists, tables, forms, embedded media, and any elements that produce something to see or interact with on the page.
- Placement: Appears after <head>. Basic structure: <!DOCTYPE html> <html> <head>…</head> <body>…visible content…</body> </html>
- Rendering: The browser reads the DOM under <body> and lays out and paints those elements on the screen. CSS and JavaScript typically target elements inside <body> to change appearance or behavior.
- What doesn’t belong: Metadata (title, meta tags, linked stylesheets/scripts for setup) belongs in <head>, not as visible content in <body>. (Scripts that produce visible UI or are executed for interaction are usually placed in <body> or referenced there.)
- Accessibility & semantics: Use appropriate semantic elements inside <body> (<header>, <main>, <nav>, <article>, <section>, <footer>, etc.) so assistive technologies and search engines understand the structure.
-
Example:
<body>
<header><h1>Site Title</h1></header>
<nav>…links…</nav>
<main>
</main> <footer>© 2025</footer> </body><p>Some text</p> <img src="photo.jpg" alt="A photo"> <ul><li>Item 1</li><li>Item 2</li></ul> <a href="/more">Read more</a>
Further reading: MDN’s HTML element reference for <body>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
The <head> element is the part of an HTML document that holds metadata — information about the page that the browser, search engines, and other tools use, but that normally isn’t shown directly to users as page content. Think of it as the page’s “settings” and descriptive info.
Key elements commonly placed in <head> and what they do:
-
<title>
- What it is: The page title string (one line of text).
- What it does: Appears in the browser tab, bookmarks, and search-engine results. Important for usability and SEO.
- Example: <title>My Page</title>
-
<meta>
- What it is: Generic metadata tags; self-contained.
- What they do: Provide information like character encoding, page description for search engines, viewport settings for mobile, and other metadata for crawlers and browsers.
-
Common uses:
- <meta charset=”utf-8”> — declares text encoding so characters display correctly.
- <meta name=”description” content=”Short summary of the page”> — used by search engines.
- <meta name=”viewport” content=”width=device-width, initial-scale=1”> — makes pages responsive on mobile.
- Many other meta names and HTTP-equivalent settings exist.
-
<link>
- What it is: Links the document to external resources.
- What it does: Commonly used for stylesheets, icons, and preconnect hints.
-
Examples:
- CSS: <link rel=”stylesheet” href=”styles.css”>
- Favicon: <link rel=”icon” href=”favicon.ico”>
- Preconnect/prefetch to speed up resource loading.
-
<style>
- What it is: Internal CSS written directly in the head.
- What it does: Styles HTML elements on the page without needing an external .css file.
- Example: <style> body { font-family: Arial, sans-serif; } h1 { color: darkblue; } </style>
- Best practice: Use external stylesheets (<link>) for larger projects, keep <style> for small pages or critical inline styles.
-
<script>
- What it is: JavaScript code or reference to a script file.
- What it does: Adds interactivity, manipulates the DOM, loads libraries.
-
Placement notes:
- Scripts in <head> run before the page content loads unless you defer or async them: <script src=”app.js” defer></script>
- Placing scripts before </body> is a common pattern to avoid blocking rendering.
- Example: <script src=”script.js” defer></script>
Why these items are “usually not visible”
- The head contains instructions and metadata rather than visible content. Browsers use it to configure how the page is displayed, how it’s interpreted, link to resources, and how the page is presented in external contexts (tabs, search results, social shares).
Practical tips
- Always include <meta charset=”utf-8”> near the top of <head>.
- Use a clear, concise <title> — it’s important for users and SEO.
- Put critical CSS or metadata in the head; defer noncritical scripts (use defer or place them at the end of <body>).
- Use <link rel=”icon”> to provide a favicon shown in tabs/bookmarks.
References
- MDN — HTML head element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head
- MDN — Using meta tags: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
- HTML Living Standard (WHATWG) — head: https://html.spec.whatwg.org/multipage/semantics.html#the-head-element
The <hr> (horizontal rule) element inserts a thematic break in an HTML page — a visual horizontal line that separates content. It’s short, semantic, and often used to show a shift in topic or to divide sections within content.
Key points
- Purpose: Represents a thematic break between paragraph-level content (e.g., a change of scene, topic, or section). It’s not merely decorative; it has semantic meaning in HTML5. (See: HTML Living Standard / MDN)
- Syntax: Self-closing in HTML5—just use <hr>. You can also write <hr /> (XHTML style), but <hr> is sufficient in modern HTML.
- Accessibility: Because it conveys a change of topic, screen readers may announce it as a “separator.” Don’t use it purely for spacing; use CSS for visual styling when semantics aren’t intended.
-
Styling: Default appearance (usually a simple line) depends on the browser. Use CSS to control color, thickness, margins, width, and style, for example:
- hr { border: none; height: 1px; background: #ccc; margin: 1em 0; }
- hr { border-top: 2px dashed #666; }
- Alternatives: For purely visual separators where no semantic meaning is intended, consider CSS on elements (borders, pseudo-elements) rather than <hr>.
- Example: <p>Section A content.</p> <hr> <p>Section B content — a new topic.</p>
References
- MDN Web Docs: <hr> — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
- WHATWG HTML Living Standard: The hr element — https://html.spec.whatwg.org/multipage/semantics.html#the-hr-element
Use <hr> when you want to mark a thematic break; use CSS for purely visual lines.
An anchor element (<a>) creates a hyperlink that users can click to go somewhere. Basic form:
link textBreakdown:
- <a> and </a>: opening and closing tags that wrap the clickable content. The visible text or elements between them is what the user clicks (here, “link text”).
-
href=”https://example.com”: the href attribute (short for “hypertext reference”) gives the target URL. It can be:
- an absolute URL (https://example.com) — goes to that full web address.
- a relative URL (e.g., /about.html or images/pic.jpg) — navigates within the same site.
- a fragment (#section) — jumps to an anchor/id on the same page.
- a mailto: or tel: link (mailto:someone@example.com, tel:+123456789) — opens email client or phone dialer.
- Click behavior: browsers navigate to the href when the link is activated (clicked, tapped, or opened via keyboard).
- Link text vs accessibility: The text should describe the destination (avoid “click here”). Provide meaningful link text for screen readers.
Useful optional attributes:
- target=”_blank”: opens the link in a new tab/window (use rel=”noopener noreferrer” with it for security/performance): <a href=”https://example.com” target=”_blank” rel=”noopener noreferrer”>example</a>
- title=”…”: additional info shown on hover (not a substitute for clear link text).
- rel=”nofollow” or other relationship hints for search engines and security.
Examples:
- Relative internal link: <a href=”/contact.html”>Contact us</a>
- Fragment jump: <a href=”#section2”>Go to section 2</a>
- Email link: <a href=”mailto:info@example.com”>Email us</a>
References:
- MDN Web Docs: HTML <a> element — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
- W3C HTML specification (anchor links) — https://www.w3.org/TR/html52/textlevel-semantics.html#the-a-element
The <hr> tag inserts a thematic break — most commonly rendered as a horizontal line — between sections of content. It’s a simple, self-closing element (no separate </hr> needed). Key points:
-
Purpose
- Semantic: marks a thematic shift or a separation between content (e.g., between article sections or topics).
- Visual: browsers typically draw a horizontal line where the tag appears.
-
Syntax
- Minimal: <hr>
- It can include attributes like class, id, title, or inline style: <hr class=”sep”> or <hr style=”border:0;height:1px;background:#ccc”>
-
Accessibility and semantics
- Use <hr> when you want to indicate a change of topic or scene in the flow of content. Screen readers may announce it as a separator or ignore it depending on settings.
- Don’t use <hr> purely for visual decoration if the break has no semantic meaning; use CSS for decorative lines instead.
-
Styling
- Controlled with CSS. Common style rules: height, background-color, border, margin, width, and alignment.
- Example: <hr style=”border:none;height:1px;background:#ddd;margin:24px 0;”>
- You can target it via class: <hr class=”fancy”> and style .fancy in CSS.
-
Best practice
- Prefer semantic use (thematic break). For purely decorative lines, prefer CSS on other elements.
- Include surrounding markup (headings, paragraphs, sections) so the structural meaning is clear.
References
- MDN: <hr> — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
- HTML Living Standard (WHATWG): section on the hr element — https://html.spec.whatwg.org/multipage/semantics.html#the-hr-element
The <br> tag inserts a single line break in text where it’s placed. It is an empty (self-closing) element — it has no separate closing tag — and it forces the following content to start on the next line.
Key points:
- Purpose: break a line without starting a new paragraph. Useful for addresses, poems, or forced visual breaks.
- Syntax: <br> or (XHTML-style) <br />. In HTML5, <br> is standard and sufficient.
- Not for layout: use paragraphs (<p>), CSS (margin, padding, display), or block-level elements for structural/layout spacing. Overusing <br> to control layout is bad practice.
- Accessibility: excessive <br> can confuse screen readers or break reading flow; use semantic markup (lists, paragraphs, headings) when possible.
-
Examples:
- Address: 123 Main St.<br> Springfield, XY 12345
- Line break in a poem: Roses are red,<br> Violets are blue.
References:
- MDN: <br> — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
- W3C HTML spec (line break element) — https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-br-element
Keep <br> for single line breaks where semantic line breaks are needed; otherwise prefer semantic HTML and CSS.
An attribute gives extra information about an element and lives inside the element’s opening tag. It has two parts: a name and a value, written like name=”value”. Example: <a href=”https://example.com”>link</a>
Key points
-
Purpose: Attributes modify or configure an element’s behavior, appearance, or semantics. For example:
- href on <a> tells the browser where the link goes.
- src on <img> gives the image file location.
- alt on <img> provides alternative text for accessibility and when the image fails to load.
- id and class label elements so CSS and JavaScript can target them.
-
Syntax rules:
- Placed inside the opening tag: <tag attr=”value”>content</tag>.
- Most attribute values are quoted (double “ “ or single ‘ ‘); quotes are recommended for reliability.
- Some attributes are boolean: writing the name alone implies true in HTML5 (e.g., <input disabled>), though you can also write disabled=”disabled”.
- Multiple attributes are separated by spaces: <img src=”a.jpg” alt=”A” width=”100”>
-
Types of attributes:
- Global attributes: available on almost every element (e.g., id, class, style, title, data-*).
- Element-specific attributes: only meaningful for certain tags (e.g., src for <img>, href for <a>, rows for <textarea>).
-
Data attributes:
- Custom attributes that start with data- (e.g., data-user=”123”). Useful to store information for scripts without affecting semantics.
-
Example uses:
- Styling hook: <div id=”main” class=”highlight”>…</div>
- Link target: <a href=”page.html” target=”_blank”>Open in new tab</a>
- Accessibility: <button aria-label=”Close”>×</button> (aria-* attributes help assistive tech)
References
- MDN: HTML attributes — https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
- HTML Living Standard (global attributes) — https://html.spec.whatwg.org/
Try it: open your minimal page, add an id or class and use the browser devtools to inspect how attributes appear and how scripts/CSS can select them.
Headings: <h1>…</h1> to <h6>…</h6>.
Paragraph: <p>Paragraph text</p>.
Links: <a href=”https://example.com”>link text</a>.
Images: <img src=”image.jpg” alt=”description”> (self-closing; include alt).
Lists:
Unordered: <ul><li>Item</li></ul>
Ordered: <ol><li>Item</li></ol>
Line break: <br>
Horizontal rule: <hr>
Unordered: <ul><li>Item</li></ul>
Ordered: <ol><li>Item</li></ol>
HTML lists let you group related items. There are two basic types:
-
Unordered list (<ul>)
- Use when order doesn’t matter (e.g., ingredients, features).
- Each item goes inside a list item tag: <li>Item</li>.
- Browser default: bulleted items.
- Example: <ul> <li>Apple</li> <li>Banana</li> <li>Cherry</li> </ul>
-
Ordered list (<ol>)
- Use when order matters (e.g., steps, ranked items).
- Items are also <li> elements.
- Browser default: numbered items (1, 2, 3).
- Example: <ol> <li>Preheat oven</li> <li>Mix ingredients</li> <li>Bake 20 minutes</li> </ol>
Notes and tips:
-
Nesting: lists can be nested to create sublists. Put a new <ul> or <ol> inside an <li>.
Example:
<ul>
</ul><li>Fruit <ul> <li>Apple</li> <li>Banana</li> </ul> </li> <li>Vegetables</li> -
Attributes:
- Use class or id on <ul>, <ol>, or <li> for styling with CSS.
- <ol> supports start=”n” to begin numbering at n, and type=”a” or type=”I” for different numbering styles (but prefer CSS for styling).
-
Accessibility:
- Keep list structure semantic (use <ul>/<ol> not just styled <div>s) so screen readers and assistive tech recognize them.
-
Visual style:
- Control bullets/numbers and spacing with CSS (list-style, margin, padding).
References:
- MDN: HTML lists — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
- MDN: Ordered list — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
The <title> element (placed inside <head>) sets the page’s title string. Key points:
-
Where it appears
- Browser UI: shown in the browser tab, window title, and when bookmarking/favoriting the page.
- Search engines: often used as the title shown in search results and influences SEO.
- Accessibility: screen readers may announce it; it helps users identify the page.
- Social shares and external tools: some platforms use it when generating previews (though Open Graph/Twitter Card tags can override it).
-
Syntax and placement
- Must be inside <head> and there should be exactly one <title> per document: <head> <title>Your page title</title> </head>
-
Best practices
- Keep it concise (typically 50–60 characters for search results).
- Make it descriptive and unique for each page (e.g., “Product Name — StoreName”).
- Avoid keyword stuffing; prioritize clarity for users.
- Use meaningful characters; emojis are allowed but use sparingly.
-
Technical notes
- It’s plain text (HTML entities allowed); HTML tags inside <title> are not rendered.
- If missing, browsers show the URL or blank; search engines may generate a title from content.
References:
- MDN: <title> — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title
- Google SEO guide: Title elements — https://developers.google.com/search/docs/advanced/appearance/title-link
W3C (https://www.w3.org/)
- Who/what: The World Wide Web Consortium is the main standards organization that develops and maintains official web standards (HTML, CSS, SVG, etc.).
- Purpose: Produces the formal HTML specification and recommendations that browsers and tool authors follow.
- Content style: Technical, normative, and precise. The specification defines exact syntax, semantics, APIs, and conformance requirements.
- Best for: Reference when you need authoritative, detailed, and up‑to‑date rules about how HTML must work (useful for implementers, advanced developers, and when resolving edge cases).
- Example use: Checking element content models, formal attribute definitions, or how browsers should handle parsing errors.
W3Schools (https://www.w3schools.com/html/)
- Who/what: A long‑running web tutorial site aimed at beginners and learners.
- Purpose: Teaches HTML/CSS/JavaScript through simple explanations, examples, and interactive “Try it Yourself” editors.
- Content style: Practical, tutorial‑focused, and easy to follow. Less formal than the specification; emphasizes how to do things rather than exhaustive technical detail.
- Best for: Beginners learning by doing, quick examples, and experimenting with code snippets in the browser.
- Caveat: Historically had some outdated or simplified material and occasional inaccuracies; generally good for learning basics but verify important details against MDN or the W3C spec.
Which to use when
- Start with W3Schools or MDN for friendly learning and hands‑on practice.
- Use MDN (Mozilla Developer Network) as the go‑to practical reference for accurate, readable documentation.
- Consult the W3C spec when you need the authoritative standard, exact behavior, or when implementing or debugging subtle or cross‑browser issues.
References
- W3C: https://www.w3.org/
- W3Schools HTML tutorial: https://www.w3schools.com/html/
- MDN Web Docs (recommended practical reference): https://developer.mozilla.org/en-US/docs/Web/HTML
The <body> element in an HTML document is the container for everything a user actually sees and interacts with in the browser window (or that a browser presents to assistive technologies). It sits inside <html> and after the <head>, and its contents make up the page’s visible user interface and interactive content.
Key aspects, briefly:
-
Visible content vs. metadata
- <head> holds metadata (title, scripts, styles, meta tags) that describes or configures the page but is not directly rendered as page content.
- <body> holds the rendered content: headings, paragraphs, images, links, lists, forms, sections, buttons, etc.
-
What “visible” includes
- Textual content: headings (<h1>–<h6>), paragraphs (<p>), inline text formatting (<strong>, <em>, <span>).
- Media: images (<img>), audio (<audio>), video (<video>), and media embedded via <canvas> or <svg>.
- Navigation and linking: anchors (<a>), menus, navigation bars.
- Structure and grouping: sections (<section>, <article>, <nav>, <aside>, <div>), lists (<ul>, <ol>, <li>).
- Interactive controls: forms (<form>, <input>, <button>, <select>), script-generated UI.
- Visual separators and layout elements: <hr>, <br>, containers styled with CSS.
-
Not strictly “visible”
- Some content in <body> may not be visually shown but is still part of the body: elements hidden with CSS (display:none), elements off-screen, or elements meant for accessibility (screen-reader-only content). They still belong in <body> because they affect the user experience.
-
Accessibility and semantics
- Using semantic elements (<nav>, <main>, <header>, <footer>, <article>) inside <body> helps browsers, search engines, and assistive tech understand the page.
- Alt attributes on images, proper heading order, and form labels in the body improve accessibility.
-
Scripts and styles in the body
- While styles and scripts are usually in <head>, they can appear in <body> (e.g., <script> at the end of <body> to defer execution until content loads). But content intended for display belongs in <body>.
Practical takeaway: think of <body> as the stage where everything the user reads, clicks, watches, or types lives. The <head> sets up the play; the <body> performs it.
References:
- MDN Web Docs — <body>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
- W3C HTML5 specification — sections on document structure.
The <br> tag inserts a single line break in the flow of text — like pressing Enter once in a text editor. It forces the following content to start on the next line without creating a new paragraph or additional spacing that a block element (like <p>) would add.
Key points
- Syntax: <br> (HTML5 permits either <br> or self-closing <br />; no closing tag).
- Purpose: Break a line within inline content (poetry lines, addresses, short lines in a form, or manual line breaks).
- No semantic meaning: It only affects presentation, not document structure or meaning. Use it sparingly—prefer block elements (<p>, <h1>–<h6>, <div>) for grouping content.
- Spacing: Unlike <p>, <br> does not add vertical margin; it simply moves text to the next line. Multiple <br> tags create multiple breaks (e.g., <br><br>), but this is considered poor practice for layout.
- Accessibility and style: Overuse can harm readability for screen-reader users and complicate responsive design. For visual spacing or layout, use CSS (margin, padding, display properties) instead.
Examples
- Good use (poetry or address): 123 Main St.<br> Apt. 4B<br> Springfield, OR 99999
- Bad use (to create paragraph spacing): <p>First paragraph.</p> <br><br> <p>Second paragraph.</p> — prefer CSS margins on <p> instead.
Further reading
- MDN: Using the <br> element — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
Unordered: <ul><li>Item</li></ul>
Ordered: <ol><li>Item</li></ol>
Unordered lists (<ul>)
- Purpose: group related items where order doesn’t matter (e.g., ingredients, features).
-
Structure:
- <ul> — container for the list.
- <li> — each list item. Must be inside <ul>.
- Example: <ul> <li>Apples</li> <li>Bananas</li> <li>Cherries</li> </ul>
- Default rendering: bullet points. You can change the marker style with CSS (e.g., list-style-type: circle;).
Ordered lists (<ol>)
- Purpose: group items where order or sequence matters (e.g., steps, ranking).
-
Structure:
- <ol> — container for the numbered list.
- <li> — each list item. Must be inside <ol>.
- Example: <ol> <li>Preheat oven</li> <li>Mix ingredients</li> <li>Bake for 20 minutes</li> </ol>
- Default rendering: numbers (1, 2, 3…). You can change numbering type with the type attribute (e.g., type=”A” for A, B, C) or with CSS (e.g., list-style-type: lower-roman;).
Nesting lists
-
You can put a <ul> or <ol> inside an <li> to create sublists:
<ul>
<li>Fruits
</li> <li>Vegetables</li> </ul><ul> <li>Apple</li> <li>Banana</li> </ul>
Accessibility and semantics
- Use lists for actual lists of items — not just for layout. Screen readers announce lists and item counts.
- Add proper markup and avoid using lists purely for spacing; use CSS instead.
Attributes and extras
- start (on <ol>) — sets starting number: <ol start=”5”>.
- reversed (on <ol>) — counts down: <ol reversed>.
- class and id for styling and scripting: <ul class=”menu”>.
References
The <img> tag inserts an image into a web page. Basic form:
Key parts:
-
src (“source”): the URL or path to the image file (e.g., “image.jpg”, “/images/pic.png”, or “https://…”). The browser fetches this resource to display the image.
-
alt (“alternative text”): short text that describes the image. Purpose and importance:
- Accessibility: screen readers read alt text to users who are blind or have low vision.
- Fallback: if the image fails to load (broken link, slow connection), the alt text is shown instead.
- SEO: search engines use alt text to understand image content.
- Best practice: write concise, meaningful descriptions. If the image is purely decorative, use alt=”” (empty string) so screen readers skip it.
-
Self-closing note: In HTML (HTML5) you can write <img src=”…” alt=”…”> without a separate closing tag. In XHTML or some XML-based contexts you might see <img … />. Browsers accept both in HTML5.
-
Other useful attributes:
- width and height — size in pixels (or use CSS instead).
- title — tooltip text shown on hover (not a replacement for alt).
- loading=”lazy” — hint to defer loading off-screen images until needed.
Example:
References: MDN — <img> element (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) and WebAIM on alt text (https://webaim.org/techniques/alttext/).
Mozilla Developer Network (MDN) HTML guide: https://developer.mozilla.org/en-US/docs/Web/HTML
W3C HTML specification and tutorials: https://www.w3.org/ and https://www.w3schools.com/html/
Good choices — here’s what each resource offers and how to use them, plus a couple more reliable options and learning tips.
- MDN Web Docs (Mozilla)
- Link: https://developer.mozilla.org/en-US/docs/Web/HTML
- What it is: Authoritative, up-to-date documentation and guides for web technologies (HTML, CSS, JavaScript).
- Best for: Beginners who want clear explanations, examples, and reference; intermediate/advanced devs who need precise behavior and browser-compatibility notes.
- How to use it: Start with the “HTML basics” and interactive examples, then use the element and attribute reference when you need specifics.
- W3C (World Wide Web Consortium)
- Link: https://www.w3.org/
- What it is: The standards organization that defines the official HTML specification and related web standards.
- Best for: When you need the formal specification or want to understand the standard’s exact rules.
- How to use it: Use sparingly — specs are dense; consult for precise behavior, formal definitions, and latest standard developments.
- W3Schools (tutorials)
- Link: https://www.w3schools.com/html/
- What it is: Friendly, beginner-oriented tutorials with live examples and quick try-it-yourself editors.
- Best for: Absolute beginners who want step-by-step walkthroughs and immediate practice.
- Caveat: Historically had accuracy issues; cross-check with MDN for correctness on nuanced topics.
- Additional resources worth using
- FreeCodeCamp: https://www.freecodecamp.org/ — project-based learning and exercises; great for practicing.
- YouTube channels (Traversy Media, The Net Ninja): concise video tutorials and project walkthroughs.
- HTML & CSS books: “HTML and CSS: Design and Build Websites” by Jon Duckett — beginner-friendly visual reference.
- How to learn efficiently
- Build small projects: personal homepage, resume page, a simple photo gallery.
- Inspect and modify real pages: use the browser DevTools to view HTML/CSS of sites you like.
- Use the reference while coding: look up tags/attributes on MDN as you encounter them.
- Practice progressively: start with structure and text, then add links/images, forms, and semantic elements, then learn CSS and responsive design.
- Validate and test: run your HTML through the W3C validator (https://validator.w3.org/) and test in multiple browsers.
References
- MDN Web Docs: HTML — https://developer.mozilla.org/en-US/docs/Web/HTML
- W3C — https://www.w3.org/
- W3Schools HTML Tutorial — https://www.w3schools.com/html/
- FreeCodeCamp — https://www.freecodecamp.org/
Start with MDN for reliable info and combine it with hands-on practice (FreeCodeCamp or small projects). Use W3Schools for quick exercises and W3C when you need the formal spec.
- <ol> starts an ordered list — a list where items are numbered (1, 2, 3, …) by the browser.
- <li> begins a list item (short for “list item”). Each <li> inside <ol> becomes one numbered entry.
- Item is the visible text of that list entry.
- </li> closes the list item.
- </ol> closes the ordered list.
So the full snippet
- Item
produces a single numbered entry that typically appears as:
- Item
Notes:
- You can add multiple items by repeating <li>…</li> inside the <ol>: <ol> <li>First</li> <li>Second</li> </ol>
- Use the attribute type or CSS to change numbering style (e.g., roman numerals or letters). For example, CSS: ol { list-style-type: lower-alpha; }.
- For accessibility, keep list items short and semantically correct; screen readers announce the list and the item positions. For more, see MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
Here’s a concise explanation of each common attribute you listed, with short examples and when to use them.
- id
- Purpose: Gives an element a unique identifier on the page.
- Use cases: Targeting a specific element with CSS, JavaScript, or fragment links (anchors).
- Rules: Should be unique within the document.
- Example: <div id=”main”>…</div>
- CSS: #main { background: #f0f0f0; }
- JS: document.getElementById(‘main’)
- class
- Purpose: Labels one or more elements so they can share styles or behavior.
- Use cases: Apply the same CSS or JS behavior to multiple elements.
- Can assign multiple classes: class=”btn primary”
- Example: <p class=”lead”>Intro text</p>
- CSS: .lead { font-size: 1.25rem; }
- href
- Purpose: Specifies the destination URL for links and some other elements (e.g., <a>, <link>).
- Use cases: Create hyperlinks or reference external resources.
- Example: <a href=”https://example.com”>Visit</a>
- Notes: Can be absolute (“https://…”) or relative (“page2.html”). For links to page sections use href=”#section-id”.
- src
- Purpose: Specifies the source URL for media elements (images, scripts, iframes, audio, video).
- Use cases: Load external content into the page.
- Example: <img src=”photo.jpg” alt=”Photo”>
- Notes: For scripts use <script src=”app.js”></script>.
- alt
- Purpose: Alternative text describing the content of an image.
- Use cases: Accessibility (screen readers), SEO, fallback when image fails to load.
- Required: Always include meaningful alt text for informative images; use alt=”” for decorative images.
- Example: <img src=”logo.png” alt=”Acme Corp logo”>
- title
- Purpose: Short advisory text about an element; browsers typically show it as a tooltip on hover.
- Use cases: Provide extra, non-essential information.
- Example: <abbr title=”HyperText Markup Language”>HTML</abbr>
- Notes: Not a substitute for alt (accessibility) or labels (forms).
- style
- Purpose: Inline CSS styles applied directly to an element.
- Use cases: Quick, element-specific styling; avoid for large projects (prefer external CSS).
- Example: <p style=”color: red; font-weight: bold;”>Warning</p>
- Notes: Inline styles have high specificity and can make maintenance harder.
Quick comparisons and best practices
- id vs class: id = unique; class = reusable. Use classes for styling many elements and ids for single-element hooks (or fragment links).
- href vs src: href tells the browser where to navigate or fetch a linked resource; src embeds/fetches the resource into the document.
- alt vs title: alt is essential for accessibility and used when the image cannot be shown; title is optional, for extra tooltip-like info.
- style vs external CSS: Prefer external or internal stylesheet (<link> or <style>) over inline style for maintainability.
References
- MDN HTML attributes: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
- MDN image alt guidance: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML
If you want, I can show short code examples for each attribute in a single HTML snippet.
The declaration <!DOCTYPE html> at the top of an HTML file is a simple instruction to the web browser: it tells the browser to interpret the document as HTML5 and to render the page in “standards” or “no‑quirks” mode rather than in an old, backward‑compatibility mode.
Key points, briefly:
- Purpose: It signals the document type/version so browsers use the modern HTML parsing and CSS layout rules. Without it, some browsers fall back to “quirks mode,” emulating very old browser behavior and producing inconsistent layouts.
- Not an HTML tag: It’s a declaration, not an element in the DOM; it isn’t nested and has no closing tag.
- Simplicity: HTML5 standardized a single, short doctype — <!DOCTYPE html> — replacing the long, version‑specific strings used in older HTML/XHTML documents.
- Backwards compatibility: Using this doctype avoids legacy quirks and ensures more predictable rendering across browsers.
References:
- MDN Web Docs — <!DOCTYPE>: https://developer.mozilla.org/en-US/docs/Glossary/Doctype
- W3C — HTML5 specification (doctypes section): https://www.w3.org/TR/html5/syntax.html#the-doctype
If you want, I can show how rendering differs with and without the doctype or how to test for quirks mode in your browser.
In HTML, elements are marked by tags. For the browser (and tools like validators, screen readers, and search engines) to correctly interpret a page, tags must be opened, closed, and nested in a well-formed way. That means:
-
Every opening tag <tag> that requires a closing tag should have a corresponding closing tag </tag>.
- Correct: <p>This is a paragraph.</p>
- Incorrect: <p>This is a paragraph.
-
When elements are nested, they must be closed in the reverse order they were opened (like stacked boxes or parentheses).
-
Correct: <p><strong>Important</strong> text.</p>
- Open <p>, then open <strong>, close </strong>, then close </p>.
-
Incorrect: <p><strong>Important</p></strong>
- This closes <p> before </strong>, which breaks the structure.
-
Correct: <p><strong>Important</strong> text.</p>
Why this matters:
- Browsers can sometimes “fix” minor mistakes, but this can produce unexpected layout or accessibility problems.
- Proper nesting keeps the document’s semantic structure clear (important for accessibility, styling with CSS, and scripting with JavaScript).
- Well-formed HTML is easier to read, debug, and maintain.
Notes and exceptions:
- Some elements are void/self-closing and don’t need a closing tag (e.g., <img src=”…” alt=””>, <br>, <hr>, <meta>). Don’t try to nest content inside these.
- Some tags shouldn’t contain certain other tags by HTML rules (e.g., you generally shouldn’t put block-level elements like <div> directly inside a <p>).
- Use an HTML validator (e.g., https://validator.w3.org/) or the browser console to find and fix nesting/closing errors.
Reference: MDN on elements and syntax — https://developer.mozilla.org/en-US/docs/Web/HTML/Element
An ordered list (<ol>) creates a sequence of items that are numbered by the browser. Each item inside the list is marked with an <li> (list item) tag. The basic structure:
- <ol> starts the ordered list.
- <li>…</li> wraps each item.
- </ol> ends the ordered list.
Example:
- First item
- Second item
- Third item
Behavior and useful attributes:
- Default numbering is 1., 2., 3., etc. Browsers render numbers automatically.
-
type — controls numbering style (deprecated in HTML5 but still supported):
- type=”1” (numbers), type=”a” (lowercase letters), type=”A” (uppercase letters), type=”i” (lowercase Roman), type=”I” (uppercase Roman). Example: <ol type=”A”>…</ol>
- start — sets the initial number/value: Example: <ol start=”5”> starts numbering at 5 (so items show 5., 6., …).
- value attribute on <li> — sets that item’s specific number (useful for non-sequential numbering): Example: <li value=”10”>This item is numbered 10</li>
- CSS can change appearance (e.g., list-style-type, list-style-position).
Nesting:
-
You can nest lists. A nested <ol> inside an <li> creates a sub-numbered list.
Example:
<ol>
<li>Item A
<ol>
</ol> </li> </ol><li>Subitem A.1</li>
Accessibility:
- Use semantic markup (<ol>/<li>) rather than manually numbered paragraphs; screen readers announce the list and item counts.
- Use <li> only inside <ol> or <ul> (or <menu>).
References:
- MDN: Ordered lists — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
- HTML Living Standard: list element details — https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element
That’s the core: <ol> defines a numbered list, and each <li> is one numbered entry.
<!DOCTYPE html> — declares HTML5.
— root element. — metadata:Hello
This is a minimal HTML page.
Visit exampleThis file is a complete, minimal HTML document. Line-by-line:
- <!DOCTYPE html>
- Declares the document type as HTML5. It tells the browser to use modern HTML parsing rules.
- <html> … </html>
- The root element that contains the whole HTML document. Everything visible or metadata goes inside this.
- <head> … </head>
-
Holds metadata and resources for the page (not directly visible in the page content).
-
<meta charset=”utf-8”>
- Specifies the character encoding (UTF-8). Ensures characters like emojis and non-Latin letters display correctly.
-
<title>My Page</title>
- The page title shown in the browser tab, bookmarks, and search-engine results. Must be inside <head>.
-
- <body> … </body>
-
Contains the visible content that the user sees on the webpage.
-
<h1>Hello</h1>
- A top-level heading. <h1> is the most important heading; <h2>–<h6> are progressively less important.
-
<p>This is a minimal HTML page.</p>
- A paragraph element for blocks of text.
-
<a href=”https://example.com”>Visit example</a>
- An anchor (link). The href attribute gives the target URL. Clicking the text “Visit example” navigates to that address.
-
Notes and best practices
- Proper nesting and closing: Every opened element should be closed in the right order (e.g., don’t close </html> before </body>).
- Indentation and whitespace: Not required for browsers, but makes the file easier to read.
- Always include <meta charset=”utf-8”> near the top of <head> to avoid character issues.
- Use meaningful <title> text — it matters for usability and SEO.
- Add alt attributes to images (not present here) for accessibility: <img src=”…” alt=”description”>.
- You can add CSS (<style> or <link>) and JavaScript (<script>) inside <head> or just before </body> as needed.
References
- MDN Web Docs — HTML basics: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- W3C/HTML Living Standard: https://www.w3.org/TR/html52/
The <p> element defines a paragraph of text in HTML. It groups related sentences into a block-level container, which browsers display with space (margin) above and below by default.
Key points:
- Syntax: <p>Paragraph text</p>
- Block-level: occupies its own horizontal space and starts on a new line.
- Automatic spacing: browsers typically apply default top/bottom margins; you can adjust these with CSS (e.g., p { margin: 1em 0; }).
-
Nesting rules: <p> should not contain other block-level elements like <div>, <h1>, <ul>, or another <p>. It can contain inline elements such as <a>, <strong>, <em>, <span>, or <img>.
- Correct: <p>This is a <strong>bold</strong> word and a <a href=”#”>link</a>.</p>
- Incorrect: <p>Start<div>bad</div>End</p> (browsers will implicitly close the <p> before the <div>).
- Semantics: indicates a paragraph of prose — use it when content is a normal paragraph. Avoid using <p> for purely layout purposes; use CSS and appropriate semantic elements instead.
- Accessibility & SEO: proper paragraph markup helps screen readers and search engines understand content structure.
Example:
HTML paragraphs are created with the <p> tag and typically get spacing applied by the browser.
References:
- MDN Web Docs: <p> element — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
- HTML Living Standard — https://html.spec.whatwg.org/
The Mozilla Developer Network (MDN) HTML guide is a comprehensive, up-to-date reference and learning resource for HTML maintained by Mozilla and the web developer community. It’s widely trusted because it combines clear tutorials with authoritative reference material and follows current web standards.
What you’ll find there
- Introduction & basics: Clear, beginner-friendly explanations of HTML concepts (elements, attributes, document structure).
- Tutorials: Step-by-step guides for common tasks (creating pages, forms, media, accessibility basics).
- Reference pages: Detailed entries for every HTML element and global attributes, showing allowed content, examples, and browser compatibility.
- Examples & live demos: Code snippets you can copy and try immediately.
- Best practices: Advice on semantics, accessibility (ARIA), and modern patterns (responsive design).
- Browser compatibility: Notes on which features work in which browsers and versions.
- Links to related topics: CSS, JavaScript, HTTP, and web APIs so you can learn the full stack of front-end web development.
Why use MDN
- Accuracy: Kept current with web standards (W3C, WHATWG) and real-world browser behavior.
- Practical focus: Balances clear conceptual explanations with runnable examples.
- Community-reviewed: Content is edited and improved by many developers, reducing errors.
- Free and ad-free: Openly accessible without paywalls.
How to use it effectively
- Start with “HTML basics” pages to learn structure and common tags.
- Use the element reference when you need precise behavior, attributes, or examples.
- Check the browser compatibility table before using newer features.
- Follow accessibility guidance included with many entries to make pages usable for more people.
Quick link: https://developer.mozilla.org/en-US/docs/Web/HTML
Reference: MDN Web Docs — HTML (Mozilla).
Here’s a concise explanation of each attribute with examples and typical uses.
-
id
- What: A unique identifier for a single element on the page.
- Use: Targeting an element via CSS, JavaScript, or fragment links (anchors).
- Example: <div id=”header”>…</div>
- Notes: Must be unique within the document. Good for one-off styles or JS hooks.
-
class
- What: A label (or multiple labels) you can give to elements.
- Use: Grouping elements to style or select them with CSS/JS.
- Example: <p class=”note important”>…</p>
- Notes: Multiple elements can share the same class; an element can have multiple classes separated by spaces.
-
href
- What: Stands for “hypertext reference”; specifies the URL for links.
- Use: Required on <a> and used on <link>.
- Example: <a href=”https://example.com”>Visit</a>
- Notes: Can be absolute (https://…) or relative (/page.html). For same-page anchors use href=”#section1”.
-
src
- What: Source URL for external resources.
- Use: Required on <img>, <script>, <iframe>, <audio>, <video>, etc.
- Example: <img src=”photo.jpg” alt=”…”>
- Notes: Tells the browser where to load the resource from; unlike href on <a>, src causes the browser to fetch the resource into the document.
-
alt
- What: Alternative text describing an image.
- Use: Accessibility (screen readers), shown if image fails to load, used by search engines.
- Example: <img src=”logo.png” alt=”Company logo”>
- Notes: Always include meaningful alt text for informative images. Use alt=”” for purely decorative images.
-
title
- What: A short advisory text about the element.
- Use: Often shown as a tooltip on hover; can provide extra context.
- Example: <button title=”Save changes”>Save</button>
- Notes: Not a substitute for accessible labeling; screen-reader support varies.
-
style
- What: Inline CSS for that specific element.
- Use: Quick, one-off styling.
- Example: <p style=”color: red; margin: 10px;”>Text</p>
- Notes: Prefer external or internal stylesheets (class/id + CSS) for maintainability. Inline style has highest specificity and can be harder to manage.
Quick comparison tips
- id vs class: id = unique single target; class = reusable group.
- href vs src: href points to where a link goes; src points to a resource the browser should load in place.
- alt vs title: alt is essential for accessibility on images; title is optional tooltip-like info and not a reliable substitute.
References
- MDN: Using the id attribute — https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
- MDN: class global attribute — https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class
- MDN: href and src docs — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
- MDN: alt attribute — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt
- MDN: title and style attributes — https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title and https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style
If you want, I can show short live examples demonstrating selection with CSS and JavaScript for each attribute.
An unordered list groups related items with bullet points. It uses two tags:
- <ul> … </ul> — the container (“unordered list”). It tells the browser “start a bulleted list here.”
- <li> … </li> — a list item inside the container. Each <li> becomes one bullet (one entry) in the list.
Example:
- Apples
- Bananas
- Cherries
Notes and tips:
- Bullets: By default browsers render bullets (•) before each <li>. The style can be changed with CSS (e.g., list-style-type: circle; or none).
- Nesting: You can nest lists—put a new <ul> or <ol> inside an <li> to create sublists.
- Semantics: Use <ul> when order does not matter (e.g., features, ingredients). Use <ol> when order matters (steps, rankings).
- Accessibility: Use clear text inside <li>. Screen readers announce list structure, which helps navigation.
- Styling: Common CSS targets include ul, li, ul > li, and classes/ids for custom appearance.
References:
- MDN: HTML lists — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
- W3C/HTML spec for lists — https://html.spec.whatwg.org/ (search “ul element”)
Provide extra info inside opening tag: <tag attribute=”value”>.
Common attributes: id, class, href, src, alt, title, style.
Tags should be properly opened and closed and nested (e.g., <p><strong>text</strong></p>).
“Tags should be properly opened and closed and nested” means three simple rules that keep your HTML valid and predictable:
-
Every element that requires a closing tag must have one.
- Opening tag: <tag> — Closing tag: </tag>
- Example: <p>This is a paragraph.</p>
- Exceptions (void elements) are self-contained and don’t get a separate closing tag: <img src=”…”>, <br>, <hr>, <input>, etc.
-
Tags must be nested in a well-formed, LIFO (last-in, first-out) order.
- If you open A, then B, you must close B before closing A.
- Correct: <p><strong>bold text</strong></p>
- Incorrect: <p><strong>bold text</p></strong> — this breaks structure and can render unpredictably.
-
Closing tags match the opening tags exactly.
- Case-insensitive in HTML (so </P> works), but use consistent lowercase for clarity: </p>, </div>, </a>.
- Don’t try to close a different element than the one opened.
Why it matters:
- Browsers parse HTML into a DOM tree. Proper nesting produces the intended tree and predictable styles/behavior.
- Bad nesting can cause layout issues, broken links, incorrect text formatting, and accessibility problems (screen readers rely on structure).
- Valid HTML is easier to debug, maintain, and style with CSS.
Quick examples:
-
Good: <ul> <li><a href=”#”>Item</a></li> <li><a href=”#”>Item 2</a></li> </ul>
-
Bad: <ul> <!– anchors closed after list item — wrong –>
</ul>
Further reading:
- MDN: “Tags and normalized markup” and HTML syntax: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- W3C / HTML specification for formal rules: https://www.w3.org/TR/html52/markup.html
Tip: When editing, use an editor with tag highlighting or an HTML linter to catch nesting errors quickly.