HTML Learning Hierarchy
Introduction to HTML
What is HTML?
History of HTML
Structure of an HTML document
Tags: <!DOCTYPE html>, <html>, <head>, <body>
Basic HTML Tags
Document Structure
Tags:
<!DOCTYPE html>: Declares the document type
<html>: Root element
<head>: Contains meta-information
<body>: Contains the content of the document
Text Formatting Tags
Bold Text
Tags: <strong> (semantic), <b> (non-semantic)
Italics Text
Tags: <em> (semantic), <i> (non-semantic)
Underline Text
Tag: <u>
Strikethrough Text
Tags: <s>, <del>
HTML Learning Hierarchy
Lists
Unordered Lists
Tags: <ul>, <li>
Ordered Lists
Tags: <ol>, <li>
Description Lists
Tags: <dl>, <dt>, <dd>
Links and Anchors
Hyperlinks
Tag: <a href="URL">
Attributes:
href: URL of the link
target: Specifies where to open the linked document (e.g., _blank, _self)
Images
Adding Images
Tag: <img src="URL" alt="description">
Attributes:
src: URL of the image
alt: Alternative text for the image
width: Width of the image
height: Height of the image
HTML Learning Hierarchy
Tables
Basic Table Structure
Tags:
<table>: Defines the table
<tr>: Table row
<td>: Table data cell
<th>: Table header cell
Forms
Form Structure
Tag: <form>
Attributes:
action: URL where the form data will be sent
method: HTTP method to use (GET or POST)
Semantic HTML
Semantic Elements
Tags:
<header>: Header for a document or section
<footer>: Footer for a document or section
<article>: Independent content
<section>: Thematic grouping of content
HTML5 Features
HTML Learning Hierarchy
Audio and Video
Tags:
<audio>: Embeds sound content
<video>: Embeds video content
Attributes:
controls: Adds playback controls
autoplay: Starts playing automatically
loop: Loops the media
Best Practices
Code Indentation and Formatting
Accessibility Considerations
Use of alt attributes for images
SEO Basics
Use of semantic HTML
Proper use of headings
