Science Knowings: HTML Course For Social Media

HTML5 Semantic Elements

Dive into HTML5 Semantic Elements

Let's leave behind HTML4's div and span and embrace HTML5's semantic wonders that enhance accessibility, readability, and search engine optimization.

Why Semantic Elements Matter

Semantic elements provide context and structure to your web pages, making them more accessible to screen readers, search engines, and even humans.

Lists: <ul> vs. <ol>

<ul> is for unordered lists (bullets), while <ol> is for ordered lists (numbers).

Blockquote and Address

<blockquote> indicates quoted text, while <address> is used for contact information (author, company, etc.).

Header Tags: <h1> to <h6>

These tags define headings and should be used in descending order of importance (<h1> for main headings, <h2> for subheadings, etc.).

Navigation: <nav> and <ul>

<nav> defines a navigation section, while <ul> can be used to create a navigation menu.

Main Content: <main>

<main> is a container for the primary content of your page, excluding navigation and other elements.

Section, Article, and Aside

<section> represents a distinct section of the page, <article> is for standalone content (like blog posts), and <aside> is for supplemental content.

Footer: <footer>

<footer> contains information about the author, copyright notices, and other page-related details.

Time and Date: <time> and <date>

<time> is used to represent a timestamp, while <date> is for specifying a date.

Progress Bar: <progress>

<progress> allows you to display the progress of a task or download.

Details and Summary

<details> can be used to hide non-essential content, while <summary> provides a visible toggle.

Meter: Measuring Progress

<meter> is used to display a measured value within a known range.

Canvas: Drawing Graphics

<canvas> allows you to draw graphics on a web page using JavaScript.

Audio and Video: <audio> and <video>

These elements embed audio and video content into your web page, allowing users to play and control the media.

Explore HTML Metadata Next!

In our next session, we'll dive into HTML metadata, which provides information about your web page to browsers and search engines. Stay tuned!