Lecture 3

March 12, 2025

HTML properties, syntax vs. semantics, semantic tags, common elements

Element Properties

HTML elements are the building blocks of every webpage, and understanding their properties gives you control over how they behave and appear.

What Are Element Properties?

Every HTML element has properties that define its characteristics and behavior. These properties fall into several categories:

Attributes: These are additional values that configure elements or adjust their behavior. Attributes are always specified in the opening tag.

<img src="image.jpg" alt="Description of image" width="500" height="300">

In this example, src, alt, width, and height are all attributes of the img element.

Content: Most elements can contain content between their opening and closing tags. This content can be text or other nested elements.

<p>This text is the content of the paragraph element.</p>

Inheritance: Elements inherit certain properties from their parent elements, creating a cascading effect throughout the document.

Common Element Properties

Global Attributes

These can be applied to almost any HTML element:

id: Provides a unique identifier for an element
class: Assigns one or more CSS class names to an element
style: Contains inline CSS styles
title: Provides additional information typically displayed as a tooltip
lang: Specifies the language of the element’s content
data-*: Allows you to store custom data private to the page or application

Event Handler Attributes

These allow elements to respond to user actions:

onclick: Triggers when the user clicks the element
onmouseover: Triggers when the mouse pointer moves over the element
onkeydown: Triggers when the user presses a key

For more detailed information, refer to MDN’s comprehensive documentation on HTML attributes: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

Syntax vs. Semantics

Understanding the difference between syntax and semantics in HTML is crucial for writing effective, accessible code.

Syntax: The Rules of HTML

HTML syntax refers to the rules that define how HTML elements should be written. This includes:

Elements begin with an opening tag: <tagname>
Elements end with a closing tag: </tagname>
Some elements are self-closing: <img src="image.jpg" />
Elements can be nested inside other elements
Elements should be properly closed and nested

Example of correct syntax:

<div>
  <h1>Main Heading</h1>
  <p>This is a <strong>paragraph</strong> with proper nesting.</p>
</div>

Example of incorrect syntax:

<div>
  <h1>Incorrect Heading</p>  <!-- Tags don't match -->
  <p>This is <strong>improperly nested</p></strong>  <!-- Improper nesting -->
</div>

Browsers try to fix syntax errors automatically, but this can lead to unexpected results. Using proper syntax ensures your page works as intended across all browsers.

Semantics: The Meaning Behind HTML

Semantics refers to the meaning conveyed by the elements you choose. While syntax tells you if your code is grammatically correct, semantics is about using the right elements for the right purpose.

For example, these two code snippets have correct syntax, but very different semantics:

<!-- Poor semantics -->
<div class="heading">Introduction</div>
<div class="paragraph">This is some content.</div>

<!-- Good semantics -->
<h1>Introduction</h1>
<p>This is some content.</p>

Both will display similarly, but the second example communicates the structure and purpose of the content to:

Screen readers and accessibility tools: Helping users with disabilities navigate your content
Search engines: Improving SEO by clearly indicating the importance of content
Browsers: Enabling appropriate default styling
Other developers: Making your code easier to understand and maintain

Why Semantics Matter

Accessibility: Screen readers rely on semantic markup to communicate page structure to users
SEO: Search engines give more weight to content in semantic elements like <h1> than generic containers
Responsive design: Proper semantics make it easier to create layouts that adapt to different devices
Code maintenance: Semantic code is easier to understand and modify later

<header>: Introductory content or navigational aids at the top of a section or page
<nav>: Section with navigation links
<main>: The main content of the document
<article>: Self-contained composition (a blog post, news article, forum post)
<section>: Standalone section of a document
<aside>: Content tangentially related to the content around it
<footer>: Footer for a document or section

Text Semantics

<h1> to <h6>: Headings with <h1> having the highest importance
<p>: Paragraph
<blockquote>: Extended quotation
<cite>: Title of a creative work
<time>: Time value or date
<mark>: Highlighted text
<em>: Emphasized text (usually italicized)
<strong>: Important text (usually bold)

Here’s an example of semantic HTML structure for a blog post:

<article>
  <header>
    <h1>Understanding HTML Semantics</h1>
    <p>Posted on <time datetime="2025-03-12">March 12, 2025</time> by <span>Jane Doe</span></p>
  </header>
  
  <section>
    <h2>The Importance of Semantic HTML</h2>
    <p>Semantic HTML improves accessibility, SEO, and code readability.</p>
    
    <blockquote cite="https://example.com/source">
      <p>Good semantics lead to better websites for everyone.</p>
      <cite>— Web Standards Guide</cite>
    </blockquote>
  </section>
  
  <aside>
    <h3>Related Articles</h3>
    <ul>
      <li><a href="#">CSS Fundamentals</a></li>
      <li><a href="#">JavaScript Basics</a></li>
    </ul>
  </aside>
  
  <footer>
    <p>Tags: <a href="#">HTML</a>, <a href="#">Web Development</a></p>
  </footer>
</article>

For more details on semantic elements, see MDN’s HTML elements reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

Benefits of Using Semantic Tags

Accessibility: Screen readers and assistive technologies can better interpret your content
SEO optimization: Search engines understand the structure and importance of your content
Code readability: Other developers can quickly understand your document structure
Default styling: Browsers apply appropriate default styles to semantic elements
Future-proofing: As web technologies evolve, semantic markup is more likely to remain compatible

Common Elements

Let’s explore the most frequently used HTML elements that form the backbone of web pages.

Document Structure Elements

<!DOCTYPE html>: Declares the document type and HTML version
<html>: The root element of an HTML page
<head>: Contains meta-information about the document
<body>: Contains the visible page content
<meta>: Provides metadata about the HTML document
<title>: Defines the document’s title shown in the browser tab

Basic document structure:

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

Text Content Elements

<h1> to <h6>: Headings of decreasing importance
<p>: Paragraph
<ul>, <ol>, <li>: Unordered lists, ordered lists, and list items
<dl>, <dt>, <dd>: Definition lists, terms, and descriptions
<div>: Generic container for flow content
<span>: Generic inline container

Example of text content elements:

<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a paragraph with <span class="highlight">highlighted</span> text.</p>

<h3>Types of Lists</h3>
<h4>Unordered List</h4>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<h4>Ordered List</h4>
<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

<h4>Definition List</h4>
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language, the standard language for creating web pages.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets, used for styling HTML elements.</dd>
</dl>

Inline Elements

<a>: Creates a hyperlink
<strong>: Indicates strong importance (typically bold)
<em>: Emphasizes text (typically italic)
<code>: Displays code snippets
<br>: Line break
<img>: Embeds an image
<span>: Generic inline container

Example of inline elements:

<p>
  Visit <a href="https://www.example.com">our website</a> to learn more. 
  <strong>Important note:</strong> This is <em>emphasized</em> text.
</p>

<p>
  Here's an example of HTML code: <code>&lt;p&gt;Hello, world!&lt;/p&gt;</code>
</p>

<p>
  First line<br>Second line
</p>

Form Elements

<form>: Container for a web form
<input>: Input control (many types: text, checkbox, radio, etc.)
<textarea>: Multiline text input
<button>: Clickable button
<select> and <option>: Dropdown list and its options
<label>: Label for a form control

Example of a simple form:

<form action="/submit" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
  </div>
  
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <div>
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4"></textarea>
  </div>
  
  <div>
    <label for="country">Country:</label>
    <select id="country" name="country">
      <option value="us">United States</option>
      <option value="ca">Canada</option>
      <option value="uk">United Kingdom</option>
    </select>
  </div>
  
  <div>
    <input type="checkbox" id="subscribe" name="subscribe">
    <label for="subscribe">Subscribe to newsletter</label>
  </div>
  
  <button type="submit">Submit</button>
</form>

Media Elements

<img>: Embeds images
<video>: Embeds video content
<audio>: Embeds sound content
<figure> and <figcaption>: For figures with captions

Example of media elements:

<figure>
  <img src="diagram.jpg" alt="HTML document structure diagram" width="600">
  <figcaption>Figure 1: Basic HTML document structure</figcaption>
</figure>

<video controls width="500">
  <source src="tutorial.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<audio controls>
  <source src="explanation.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Table Elements

<table>: Defines a table
<tr>: Table row
<th>: Table header cell
<td>: Table data cell
<thead>, <tbody>, <tfoot>: Table sections
<caption>: Table caption

Example of a table:

<table>
  <caption>Monthly Budget</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Budget</th>
      <th>Actual</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Rent</td>
      <td>$1200</td>
      <td>$1200</td>
    </tr>
    <tr>
      <td>Groceries</td>
      <td>$400</td>
      <td>$425</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>$1600</td>
      <td>$1625</td>
    </tr>
  </tfoot>
</table>

Additional Important Concepts

Nesting Elements

HTML elements can be nested inside each other, creating a hierarchical structure. Proper nesting is crucial for document validity.

<article>
  <h1>Main Article Title</h1>
  <p>Introduction paragraph with <a href="#">a link</a> embedded in it.</p>
  <section>
    <h2>Section Heading</h2>
    <p>Section content goes here.</p>
  </section>
</article>

Self-Closing Elements

Some HTML elements don’t require a closing tag because they cannot contain content:

<img src="logo.png" alt="Company Logo">
<input type="text" name="username">
<br>
<hr>
<meta charset="UTF-8">

Character Entities

Special characters that have meaning in HTML must be represented using character entities:

< for <
> for >
& for &
" for "
' for '
for non-breaking space

<p>The &lt;p&gt; tag defines a paragraph in HTML.</p>

Comments

Comments in HTML are invisible in the browser but can help document your code:

<!-- This is a comment that won't be displayed -->
<!-- 
  Multi-line comments 
  are useful for longer explanations
-->

Resources for Further Learning

MDN Web Docs - HTML: https://developer.mozilla.org/en-US/docs/Web/HTML

< Look at other lectures