--><!DOCTYPE html> <!
-- Declaration for HTML5 (no attributes allowed)
--> <html lang="en"> <!-- Root element
- lang: specifies language
- global attrs: id, class, style, title, data-*
--><head> <!-- Metadata container
- global attrs allowed
--> <meta charset="UTF-8"> <!-- Self-closing
- charset: character encoding
- global attrs allowed
--> <meta name="author" content="Dave Gray"> <!-- Self-closing
- name: type of metadata (author, description, etc.)
- content: metadata value
- global attrs allowed
--> <meta name="description" content="This page contains all the things I am learning how to create as I learn
HTML."> <!-- Same as above -->
--><title>My First Web Page</title> <!-- Sets browser tab title
- global attrs allowed
- contains only text
--> <link rel="icon" href="[Link]" type="image/x-icon"> <!-- Self-closing
- rel: relationship type (icon)
- href: path to file
- type: MIME type
- global attrs allowed
--><link rel="stylesheet" href="[Link]" type="text/css"> <!-- Self-closing
- rel: stylesheet
- href: path to CSS
- type: text/css
- global attrs allowed
</head>
--><body> <!-- Main visible content
- global attrs: id, class, style, title, data-*
--> <h1 id="" class="" style="" title="">Hello World!</h1> <!-- Heading
- id: unique identifier
- class: for styling groups
- style: inline CSS
- title: tooltip text
- data-*: custom attributes
--><p id="" class="" style="" title="">This is my first web page.</p> <!-- Paragraph
- same global attributes as above
- contains inline elements and text
--><hr> <!-- Horizontal rule
- Self-closing (void element)
- Renders a horizontal line
- Global attributes allowed: id, class, style, title, data-*, etc.
--><br> <!-- Line break
- Self-closing (void element)
- Inserts a single line break
- Global attributes allowed (rarely used)
--><abbr title="Mozilla Developer Network">MDN</abbr> <!-- Abbreviation
- title: required; shows full meaning on hover
- Global attributes allowed: id, class, style, etc.
--><em>really need a getaway</em> <!-- Emphasis
- Renders in italic by default
- Semantic meaning: emphasis
- Global attributes allowed
--><address>
Margaritaville Island Reserve Riviera Cancún<br>
Bahia Petempich Puerto Morelos, Mexico<br>
Colonia Morelos, México 77580
</address>
<!-- Address block
- Typically used for physical or contact information
- Renders in italic by default
- Block-level element
- Global attributes allowed
- May contain <br>, <a>, <span>, etc.
--><strong>No way!</strong> <!-- Strong importance
- Renders bold text
- Semantic meaning: important
- Global attributes allowed
--><<< © Dave Gray >>>
<!-- HTML Entities
- < = <
- > = >
- © = ©
- Used to render reserved characters in HTML
LIST TYPES
--><ol> <!-- Ordered list
- Block-level
- Contains only <li> children
- Global attributes allowed: id, class, style, title, data-*
--><li> ... </li> <!-- List item
- Used within <ol> (ordered list) or <ul> (unordered list)
- Can contain block or inline elements (e.g., <p>, <span>)
- Global attributes allowed
--><ul> <!-- Unordered list
- Block-level
- Contains only <li> children
- Renders with bullet points
- Global attributes allowed
--><dl> <!-- Definition list
- Block-level
- Contains <dt> (term) and <dd> (definition)
- Used for key-value style data or glossaries
- Global attributes allowed
--><dt>North Pole</dt> <!-- Definition Term
- Used inside <dl>
- Defines the term or item
- Global attributes allowed
--><dd>I hear this is <strong>cold</strong>!</dd> <!-- Definition Description
- Describes the <dt> term above it
- Can include any inline or block content
- Global attributes allowed
LINKS
FIGURES