HTML Basics

Role of HTML: HTML (Hypertext Markup Language) is the foundation of web structure, defining the
elements of a webpage.

HTML Elements: Used to represent content on the page. Most of them are made by an opening and a
closing tag (e.g., <h1></h1> , <p></p> ).

HTML Structure: HTML consists of a head and body, where metadata, styles, and content are structured.

Common HTML Elements: Headings ( <h1> - <h6> ), paragraphs ( <p> ), and div containers ( <div> ).

div elements: The div element is a generic HTML element that does not hold any semantic meaning. It is
used as a generic container to hold other HTML elements.

Void Elements: Do not have a closing tag (e.g., <img> ).

Attributes: Adding metadata and behavior to elements.

Identifiers and Grouping

IDs: Unique element identifiers.

Classes: Grouping elements for styling and behavior.

Special Characters and Linking

HTML entities: Using special characters like &amp; and &lt; .

link element: Linking to external stylesheets.

script element: Embedding external JavaScript files.

Boilerplate and Encoding

HTML boilerplate: Basic structure of a webpage, which includes the DOCTYPE, html, head, and body
elements. It should be used as the starting point for an HTML document.

UTF-8 character encoding: Ensuring universal character display.

1
SEO and Social Sharing

Meta tags (description): Providing a short description for the web page and impacting SEO.

Open Graph tags: Enhancing social media sharing.

Media Elements and Optimization

Replaced elements: Embedded content (e.g., images, iframes).

Optimizing media: Techniques to improve media performance.

Image formats and licenses: Understanding usage rights and types.

SVGs: Scalable vector graphics for sharp visuals.

Multimedia Integration

HTML audio and video elements: Embedding multimedia.

Embedding with <iframe> : Integrating external video content.

Paths and Link Behavior

Target attribute types: Controlling link behavior.

Absolute vs. relative paths: Navigating directories.

Path syntax: Understanding / , ./ , ../ for file navigation.

Link states: Managing different link interactions (hover, active).

Importance of Semantic HTML

Structural hierarchy for heading elements: It is important to use the correct heading element to maintain
the structural hierarchy of the content. The h1 element is the highest level of heading and the h6
element is the lowest level of heading.

Presentational HTML elements: Elements that define the appearance of content. Ex. the deprecated
center , big , and font elements.

2
Semantic HTML elements: These elements provide meaning to the structure of the content. Examples
include:

<header> <!-- Represents introductory content --> </header>

<nav> <!-- Contains navigation links --> </nav>
<article> <!-- Represents self-contained content --> </article>
<aside> <!-- Used for sidebars or related content --> </aside>
<section> <!-- Groups related content within a document --> </section>
<footer> <!-- Defines the footer for a section or document --> </footer>

Semantic HTML Elements

• em : Marks text that has stress emphasis.

• i : Used for highlighting alternative voice or mood, idiomatic terms from another language,
technical terms, and thoughts.
• strong : Marks text that has strong importance.
• b : Used to bring attention to text that is not important for the meaning of the content.
• dl , dt , dd : Used to represent description list, term, and description.
• blockquote : Used to represent a section that is quoted from another source.
• q : Used to represent a short inline quotation.
• abbr : Used to represent an abbreviation or acronym.
• address : Used to represent the contact information.
• time : Used to represent a date and/or time.
• sup : Superscript text.
• sub : Subscript text.
• code : A fragment of computer code.
• u : Inline text with annotation.
• ruby : Ruby annotation.
• s : Strikethrough content.

HTML Form Elements and Attributes

<form method="value-goes-here" action="url-goes-here">

<!-- inputs go inside here -->
</form>

Input Types: text , email , password , radio , checkbox , number , date

<!-- Text input -->

<input
type="text"

3
 id="name"
name="name"
placeholder="e.g. Quincy Larson"
size="20"
minlength="5"
maxlength="30"
required
/>

<!-- Number input -->

<input
type="number"
id="quantity"
name="quantity"
min="2"
max="10"
disabled
/>

<!-- Button -->

<input type="button" value="Show Alert" />

Label element examples:

<!-- Implicit form association -->

<form action="">
<label>
Full Name:
<input type="text" />
</label>
</form>

<!-- Explicit form association -->

<form action="">
<label for="email">Email Address: </label>
<input type="email" id="email" />
</form>

Buttons:

<button type="button">Show Form</button>

<button type="submit">Submit Form</button>
<button type="reset">Reset Form</button>

Fieldsets and Legends:

4
 <!-- Radio group -->
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
<input id="no-option" type="radio" name="hotel-stay" />
</fieldset>

<!-- Checkbox group -->

<fieldset>
<legend>Why did you choose to stay at our hotel? (Check all that apply)</
legend>
<label for="location">Location</label>
<input type="checkbox" id="location" name="location" value="location" />
<label for="price">Price</label>
<input type="checkbox" id="price" name="price" value="price" />
</fieldset>

Working with HTML Table Elements and Attributes

<table>
<caption>Exam Grades</caption>
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Davis</td>
<td>Alex</td>
<td>54</td>
</tr>
<tr>
<td>Doe</td>
<td>Samantha</td>
<td>92</td>
</tr>
<tr>
<td>Rodriguez</td>
<td>Marcus</td>

5
 <td>88</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Average Grade</td>
<td>78</td>
</tr>
</tfoot>
</table>

HTML Tools

• HTML validator: Checks syntax validity.

• DOM inspector: Inspect and modify page structure.
• Devtools: Debug, profile, and analyze pages.

Introduction to Accessibility

WCAG (Web Content Accessibility Guidelines): Four principles - Perceivable, Operable, Understandable,
Robust (POUR).

Assistive Technology: Screen readers, braille keyboards, magnifiers, alternative pointers, voice recognition.

Accessibility Auditing Tools: Google Lighthouse, WAVE, IBM Equal Accessibility Checker, axe DevTools.

Best Practices: - Proper heading structure. - Use th and td correctly in tables. - Associate inputs with
labels. - Use good alt text. - Use meaningful link text. - Provide transcripts, captions, and audio
descriptions.

tabindex attribute: Use 0 or -1 only.

accesskey attribute: Defines keyboard shortcuts.

WAI-ARIA, Roles, and Attributes

WAI-ARIA: Provides additional meaning to HTML for assistive technologies.

ARIA roles: role="tab" , role="menu" , role="alert"

aria-label / aria-labelledby: Define accessible names.

6
aria-hidden: Hides elements from screen readers.

aria-expanded: Conveys toggle state.

aria-live: Announces dynamic content.

Other ARIA attributes: - aria-controls - aria-describedby - aria-haspopup , aria-checked ,

aria-disabled , aria-selected