HTML Fundamentals

Basic HTML Syntax

The Need for a Doctype

Why Doctype?

  • Acts as a declaration to inform the browser about the version of HTML used in the document.
  • Ensures proper rendering and compatibility across different browsers.
<!DOCTYPE html>
<html lang="en">
...
</html>

Setting the Language

Importance

  • Helps search engines and assistive technologies understand the document's language.
  • Essential for accessibility and internationalization.
<html lang="en">
...
</html>

The HTML <head>

Key Uses

  • Setting character encoding, document title.
  • Metadata for SEO and social platforms.
  • Linking to icons, stylesheets, scripts.
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
  <meta name="description" content="A brief description of the page">
</head>

The HTML <body>

  • Container for the page's visible content.
  • Where you place text, images, and other media.
<body>
  <!-- Page content goes here -->
</body>

Anatomy of an HTML Element

Components

  • Opening tag
  • Content
  • Closing tag
  • Attributes
<p class="text-class">This is a paragraph.</p>

Void Elements

  • Elements without a closing tag or inner content.
  • Example: <img>, <br>, <input>
<img src="image.jpg" alt="Description">

Good Document Structure

Headings and Content

  • Use headings (<h1> through <h6>) to structure content logically.
  • Don't skip heading levels for styling purposes.
<h1>Main Title</h1>
<h2>Subsection</h2>
<p>Content beneath the subsection heading...</p>

Semantic vs. Presentational HTML

Semantic HTML

  • Provides meaning to the web content.
  • Examples: <main>, <article>, <nav>

Presentational HTML

  • Focuses on appearance, which should be handled by CSS.
  • Deprecated tags: <font>, <center>

Lists in HTML

Types of Lists

  • Unordered (<ul>)
  • Ordered (<ol>)
  • Description (<dl>)
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
  • Item 1
  • Item 2

Advanced Text Techniques

Emphasis and Importance

  • <em> for emphasis (typically italic).
  • <strong> for importance (typically bold).
<p>The <em>quick</em> brown <strong>fox</strong> jumps <b> over</b> </p>

The quick brown fox jumps over

Other Semantic Elements

  • <abbr> for abbreviations.
  • <blockquote> for quotations.
  • <time> for dates and times.
  • Use semantic elements for meaningful markup.
<time datetime="2024-04-14">April 14th, 2024</time>

Links: The Web's Cornerstone

  • Links are fundamental to the web's interconnected nature.
  • Good link text is crucial for accessibility and SEO.
<a href="https://www.example.com">Visit Example.com</a>

Media in HTML

Basics

  • <img> for images.
  • <audio> and <video> for multimedia.
  • Use alt text for images.
<img src="path/to/image.jpg" alt="Description">
Description

Alright, lets practice