HTML CARDS Flashcards
(23 cards)
HTML
Explanation: HyperText Markup Language that structures web content.
Breakdown: It uses tags (like <p>) to tell browsers how to display text, images, and links.
Example: A simple page with <!DOCTYPE html>, <html>, <head>, and <body>.
Key Points:
Declares document type <!DOCTYPE html>.
Main sections: <head> and <body>.
Works with CSS (style) and JS (behavior).
HTML Elements
Explanation: A piece of content wrapped by a start and end tag (e.g., <p>…</p>).
Breakdown: Acts like a container that defines headings, paragraphs, or links.
Example: <h1>Title</h1> shows a level‑1 heading.
Key Points:
Consists of a start tag, content, and an end tag.
Some are self-closing (<br></br>, <img></img>).
Elements can nest.
Nested Elements
Explanation: Placing one element inside another to build structure.
Breakdown: Like boxes in boxes; for example, a <strong> tag inside a <p>.</strong>
Example: <p>This is <em>emphasized</em> text.</p>
Key Points:
Inner elements must close before outer.
Improves semantic structure.
Use indentation for readability.
Headings
Explanation: Six levels of titles (<h1>–<h6>) to structure content.
Breakdown: <h1> is a top-level title; smaller numbers mean less importance.
Example: <h2>Section title</h2>
Key Points:
Block-level, bold by default.
Aids SEO and accessibility.
Empty Elements
Explanation: Elements that don’t enclose content (self-closing).
Breakdown: They perform actions (line break, image) without text inside.
Example:<br></br>, <img></img>, <hr>.
Key Points:
No closing tag.
Often need attributes like src or alt.
Paragraphs
Explanation: <p> defines a block of text as a paragraph.
Breakdown: Separates ideas into readable blocks with space before/after.
Example: <p>This is a paragraph.</p>
Key Points:
Block-level element.
Browsers add spacing.
Line Break (<br></br>)
Explanation: Inserts a line break without starting a new paragraph.
Breakdown: Moves content down one line like pressing Enter.
Example: Line 1<br></br>Line 2
Key Points:
Self-closing.
No extra margin.
Use sparingly.
Formatting Tags
Explanation: <b>/<strong> and <i>/<em> style text visually vs. semantically.</em></i></strong></b>
Breakdown: <b> and <i> change appearance; <strong> and <em> add meaning.</em></strong></i></b>
Example: <strong>Important</strong> vs <b>Bold</b>
Key Points:
Prefer <strong>/<em> for meaning.
<b>/<i> for purely visual changes.</i></b></em></strong>
Attributes
Explanation: Settings inside tags (name=”value”) that configure elements.
Breakdown: Like options: href for links, src for images, and alt for alt text.
Example: <a>Link</a>
Key Points:
Written in the opening tag.
Use quotes around values.
Boolean attributes (e.g., disabled) omit values.
href Attribute
Explanation: Specifies a link’s destination URL.
Breakdown: Found in <a> tags: external, internal, email, or anchor links.</a>
Example: <a>Jump</a>
Key Points:
mailto: for emails
Use relative paths for local links
src Attribute
Explanation: Defines source URL for media (images, videos, scripts).
Breakdown: Tells the browser where to fetch the file.
Example:<img></img>
Key Points:
Required for <img></img>, <video>,
, <iframe>.</video>
Often paired with alt or type.
Image Links
Explanation: Clickable images by wrapping <img></img> in <a>.</a>
Breakdown: Combines link destination and image display.
Example: <a><img></img></a>
Key Points:
Keep alt and href.
Use target if needed.
Image Tags
Explanation: <img></img> embeds images; needs src and alt.
Breakdown: No closing tag, shows picture on page.
Example: <img></img>
Key Points:
Always include alt text.
Can set dimensions.
Iframes
Explanation: <iframe> embeds another page/document inside.
Breakdown: Acts as a window to another URL.
Example: <iframe src="video.html" width="600" height="400"></iframe>
Key Points:
Use titles for accessibility.
Not all sites allow embedding.
Lists
Show items: <ul> bulleted, <ol> numbered, <dl> description.
Breakdown: Use <li> for list items and <dt>/<dd> for terms and definitions.
Example: <ul><li>Item</li></ul>
Key Points:
Can nest lists.
Style with CSS.
Tables
Explanation: <table> organizes data in rows <tr>, cells <td>, headers <th>.
Breakdown: Use for tabular data. Add borders or styling as needed.
Example: <table border="1"><tr><th>Name</th></tr></table>
Key Points:
Optional <thead>, <tbody>, <tfoot>.
colspan and rowspan for merging.
Special Elements
Explanation: Tags like <!DOCTYPE>, <meta></meta>, <title>, <style>,
that configure the document.</style></title>
Breakdown: Found in <head>, define page type, encoding, styles, and scripts.
Example: <meta></meta>
Key Points:
<!DOCTYPE html> declares HTML5.
<meta></meta>
makes pages responsive.
lang Attribute
Explanation: Declares content language (e.g., en, es).
Breakdown: Helps browsers and screen readers handle text correctly.
Example: <html lang="en">
Key Points:
Improves accessibility and SEO.
Can apply to individual elements.
title Attribute
Explanation: Shows a tooltip on hover with extra info.
Breakdown: Useful for clarification or hints.
Example: <p title="More info">Text</p>.
Key Points:
Not visible until hover.
Keep text brief.
HTML Comment Tags
Explanation: <!-- comment --> to leave notes in code.
Breakdown: Hidden from users, only visible in source.
Example: <!-- TODO: update link -->
Key Points:
Do not nest comments.
Use for documentation or temporary disabling.
CSS Methods
Explanation: Three ways to add CSS: inline, internal, and external.
Breakdown: inline via style, internal in <style> tag, external in .css file.</style>
Example: <link></link>
Key Points:
External is best for multiple pages.
Inline for quick, one-off tweaks.
Internal for single-page styles.
class vs. id
Explanation: Class groups elements; ID identifies one unique element.
Breakdown: Classes reusable; IDs unique.
Example: <div class="box"> vs <h1 id="main-title">
Key Points:
CSS selectors .classname and #idname
Use classes for shared styles
Use IDs for one-time hooks or anchors.
Colors (RGB & Hex)
Explanation: Define colors by numeric codes: rgb() or hex #RRGGBB.
Breakdown: RGB uses three 0–255 values; hex uses pairs of hex digits.
Example: color: rgb(255,0,0); or color: #FF0000;
Key Points:
Many formats: names, RGB, hex, HSL
Hex shorthand (#F00) for some colors.
Use CSS for consistent styling.
