Skip to content
beginnerPhase 30 · HTML

HTML Fundamentals

Master HTML elements, attributes, nesting, and document structure.

45m
0 problems
Topic Progress0%

HTML Document Structure

Every HTML document follows a specific structure that browsers interpret to render web pages.

Basic HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Document Breakdown

<!DOCTYPE html>     → Document type declaration
<html lang="en">   → Root element (language attribute)
<head>              → Document metadata
  <meta charset>    → Character encoding
  <meta viewport>   → Responsive design settings
  <title>           → Browser tab title
</head>
<body>              → Visible content
  <h1>              → Heading
  <p>               → Paragraph
</body>
</html>

Why Structure Matters

  • Browser interpretation: Browsers parse HTML to build the DOM
  • Accessibility: Screen readers use structure to navigate
  • SEO: Search engines use structure to understand content
  • Maintainability: Well-structured HTML is easier to maintain

Head Section Elements

<head>
    <!-- Character encoding (must be first) -->
    <meta charset="UTF-8">
    
    <!-- Responsive design -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- SEO -->
    <meta name="description" content="Page description for search engines">
    <meta name="keywords" content="html, css, javascript">
    
    <!-- Favicon -->
    <link rel="icon" href="/favicon.ico">
    
    <!-- Stylesheets -->
    <link rel="stylesheet" href="styles.css">
    
    <!-- Title -->
    <title>Page Title</title>
</head>

Elements and Tags

HTML elements are the building blocks of web pages. Understanding elements is fundamental to HTML.

Element Anatomy

<p class="intro">Hello, World!</p>
|_||_________||_____________||__|
 |     |          |          |
 |   attribute   content   closing tag
 |   name        text
 opening tag

Element = Opening tag + Content + Closing tag

Element Types

Container Elements (have content):

<p>This is a paragraph element</p>
<div>A block container</div>
<span>An inline container</span>

Void Elements (no content, self-closing):

<img src="photo.jpg" alt="Photo">
<br>
<hr>
<input type="text">
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">

Block vs Inline Elements

Block Elements (take full width):
<div>    <p>    <h1>-<h6>    <ul>    <table>

Inline Elements (take content width):
<span>    <a>    <strong>    <em>    <img>

Nesting Elements

<!-- Correct nesting -->
<div>
    <p>
        <strong>Bold text</strong>
    </p>
</div>

<!-- Incorrect nesting (invalid) -->
<div>
    <p>
        <strong>Bold text</p>
    </strong>
</div>

Self-Closing Tags

<!-- XHTML style (optional in HTML5) -->
<img src="photo.jpg" alt="Photo" />
<br />
<hr />

<!-- HTML5 style (preferred) -->
<img src="photo.jpg" alt="Photo">
<br>
<hr>

Attributes

Attributes provide additional information about HTML elements.

Attribute Syntax

<tagname attribute="value">Content</tagname>

Examples:
<a href="https://example.com">Link</a>
<img src="photo.jpg" alt="Description">
<div id="main" class="container">Content</div>
<input type="text" name="username" required>

Common Attributes

Attribute Purpose Example
id Unique identifier <div id="main">
class CSS class(es) <p class="intro">
style Inline CSS <h1 style="color: red">
title Tooltip text <p title="Info">
href Link URL <a href="/page">
src Image/source URL <img src="img.jpg">
alt Alternative text <img alt="Desc">
type Input type <input type="email">
name Form field name <input name="user">
value Default value <input value="text">

Boolean Attributes

<!-- Present = true, absent = false -->
<input type="text" required>       <!-- required is true -->
<input type="text" disabled>       <!-- disabled is true -->
<button type="submit" disabled>Submit</button>
<a href="/page" target="_blank">Link</a>

Data Attributes

<!-- Custom attributes with data- prefix -->
<div data-user-id="123" data-role="admin">
    User Info
</div>

<!-- Access via JavaScript -->
<script>
const div = document.querySelector('div');
console.log(div.dataset.userId);  // "123"
console.log(div.dataset.role);    // "admin"
</script>

Global Attributes

<!-- These work on any element -->
<div id="unique" class="styled">
<p contenteditable="true">Editable text</p>
<div hidden>Hidden content</div>
<span lang="fr">Texte en français</span>
<div tabindex="0">Focusable</div>

Practice Problems

0/3solved
Build HTML Fundamentals Component

Create a reusable React component implementing HTML Fundamentals. Include proper state management and accessibility.

Solution
// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where needed
HTML Fundamentals Testing

Write unit and integration tests for HTML Fundamentals using React Testing Library.

Solution
// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility tests
HTML Fundamentals Performance

Optimize HTML Fundamentals for performance. Consider memoization, code splitting, and bundle size.

Solution
// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysis

Quiz

1. What does the <!DOCTYPE html> declaration do?

Question 1 options

2. What is the difference between a block and inline element?

Question 2 options

3. Which of these is a void element?

Question 3 options

4. What does the alt attribute do?

Question 4 options

Flashcards

Question

What are the three parts of an HTML element?

Click to reveal answer

Answer

Opening tag (<tag>), content, and closing tag (</tag>). Void elements are self-closing.

Question

What is the difference between block and inline elements?

Click to reveal answer

Answer

Block elements (div, p) take full width. Inline elements (span, a) only take content width.

Question

What are boolean attributes?

Click to reveal answer

Answer

Attributes that are either present (true) or absent (false). Examples: required, disabled, readonly.

Question

What is the purpose of the lang attribute?

Click to reveal answer

Answer

Specifies the language of the content. Used by screen readers and search engines. Example: lang="en".

Question

What is HTML Fundamentals?

Click to reveal answer

Answer

HTML Fundamentals is a key concept in frontend development.

Revision Notes

Key Takeaways

  • 1.HTML documents have a specific structure with DOCTYPE, html, head, and body
  • 2.Elements consist of opening tag, content, and closing tag
  • 3.Block elements take full width, inline elements take content width
  • 4.Attributes provide additional information about elements
  • 5.Void elements are self-closing and have no content

Interview Tips

  • •Know the difference between block and inline elements
  • •Understand the purpose of common attributes
  • •Know the correct HTML document structure
  • •Be familiar with void elements and self-closing tags

Cheat Sheet

HTML Fundamentals Cheat Sheet

Document Structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page</title>
</head>
<body>
  Content here
</body>
</html>

Element Types:

  • Container: Have opening/closing tags
  • Void: Self-closing (img, br, hr)
  • Block: Full width (div, p, h1)
  • Inline: Content width (span, a, strong)

Common Attributes:

  • id: Unique identifier
  • class: CSS classes
  • style: Inline CSS
  • href: Link URL
  • src: Image URL
  • alt: Alternative text