HTML5 Tutorial

Welcome back, Student!

Here is a 40-day HTML5 Tutorial

Well organized and easy to understand HTML5 tutorials with examples of how to use List types, Tables,Headings,Paragraphs,Header, Aside,Footer,Section, Forms, New input types,Select, option and more.

Week 1: Introduction to HTML5 and Basic Structure (Days 1-7)

Day 1:
What is HTML5? Understanding HTML as a markup language, not a programming language. Overview of HTML5 as the latest and most enhanced version of HTML. A brief history of HTML and the evolution to HTML5. The cooperation between W3C and WHATWG.
Day 2:
Setting up your development environment. Basic tools needed: a modern browser and a simple text editor. Understanding the basic HTML5 template.
Day 3:
The <!DOCTYPE html> declaration and its significance in HTML5. The <html> element and its lang attribute.
Day 4:
The <head> section. The <title> element for creating a title.
Day 5:
The <meta> element for character encoding.
Day 6:
The <body> section. Basic content elements:
  • headings (<h1> to <h6>)
  • paragraphs (<p>)
  • line breaks (<br>)
Day 7:
Creating lists:
  • unordered lists (<ul>, <li>)
  • ordered lists (<ol>, <li>)
  • definition lists (<dl>, <dt>, <dd>)
  • Nesting lists

Week 2: Semantic HTML5 Elements (Days 8-14)

Day 8:
Introduction to semantic HTML5 elements. Why use semantic markup?
Day 9:
Structural elements: <header>, <nav> for marking navigation, and understanding its correct use.
Day 10:
Content sectioning elements:
  • <article> for independent, self-contained content
  • <section> for thematic grouping of content, and the rule for using <section> with a natural heading
Day 11:
More content sectioning:
Day 12:
Grouping headings with the <hgroup> element. Understanding when and why to use <hgroup> to modify the document outline. The concept of no more hgroup.
Day 13:
Other semantic elements:
  • <main> (the new main element)
  • <address> for contact information
Day 14:
Review of HTML5 structural elements and their role in creating a semantic document structure. Progressive markup and using <div> with HTML5-ish id and class names for older browsers.

Week 3: Text Formatting and Links (Days 15-21)

Day 15:
Basic text formatting:
  • <b> (bold)
  • <i> (italics)
  • <u> (underline)
  • <strong> (strong emphasis)
  • <em> (emphasis)
Day 16:
More text formatting:
  • <mark> for highlighting text
  • <small> for fine print
  • <del> for deleted text
  • <ins> for inserted text
Day 17:
Quotations:
  • <q> for short inline quotations
  • <blockquote> for longer block quotations
  • The <cite> element
Day 18:
Defining terms with the <dfn> element. Using preformatted text with <pre>.
Day 19:
The <abbr> element for abbreviations. <code> for insert code in webpage.
Day 20-21:
Creating hyperlinks with the <a> element. The href attribute. Link targets using the target attribute.

Week 4: Images and Tables (Days 22-28)

Day 22:
Embedding images with the <img> element. The src and alt attributes. Adding alternate text for accessibility.
Day 23:
Image formats (JPEG, PNG, GIF). Using the <figure> and <figcaption> elements to contain images with captions.
Day 24-28:
Creating tables:
  • <table>
  • <tr> (table row)
  • <th> (table header)
  • <td> (table data) elements
  • <thead> (table header)
  • <tbody> (table body)
  • <tfoot> (table footer)
  • colspan and rowspan

Week 5: Introduction to HTML5 Forms (Days 29-35)

Day 29:
Introduction to HTML5 Forms. The <form> element and its attributes (action, method).
Day 30:
Basic form controls: <input> element with type="text", type="password", type="checkbox", type="radio", type="submit", type="reset", and type="button".
Day 31:
The <label> element for associating labels with form controls. The for attribute.
Day 32:
The <textarea> element for multi-line text input. The <select> and <option> elements for dropdown lists.
Day 33:
New HTML5 input types: email, url, number, range, date, time, month, week, color.
Day 34:
Form attributes: placeholder, required, autofocus, autocomplete, pattern, min, max, step.
Day 35:
The <datalist> element for providing predefined options for input fields. The <output> element for displaying the result of a calculation.

Week 6: HTML5 Multimedia - Audio and Video (Days 36-40)

Day 36:
The <audio> element for embedding audio. The src, controls, autoplay, loop, and muted attributes for the <audio>.
Day 37:
The <video> element for embedding video. Video formats supported by HTML5. The src, controls, width, height, poster, autoplay, loop, and muted attributes for the <video> element.
Day 38-39:
<SVG> and <Animation>
Day 40:
<iframe>: embed another HTML document within the current HTML page and how to embed youtube video.