Comprehensive Guide to HTML
HyperText Markup Language
HTML is the standard markup language for creating web pages and web
applications. With HTML, you can create your own website. HTML is easy
to learn - You will enjoy it!
HTML Document Structure
Basic Structure
Every HTML document follows a basic structure that includes the
DOCTYPE declaration, html, head, and body elements.
<!-- Document type declaration -->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!-- Meta tags, CSS, JavaScript -->
</head>
<body>
<!-- Content goes here -->
</body>
</html>
Document Hierarchy
Key Components
HTML documents follow a tree-like structure where elements are nested
DOCTYPE: Declares the document type and HTML version
within other elements. This hierarchical organization helps browsers render
html: Root element of the HTML document
the content correctly and allows for proper styling with CSS.
head: Contains meta-information about the document
body: Contains the visible page content
HTML Elements and Tags
HTML Element Structure Types of HTML Elements
An HTML element consists of a start tag, content, and an end tag. Block-level Elements
Some elements are self-closing. Start on a new line and take up the full width available.
<div>Block element</div>
<p>Paragraph</p>
Inline Elements
Do not start on a new line and only take up necessary width.
<span>Inline element</span>
<strong>Bold text</strong>
Self-closing Elements
HTML Attributes Elements that don't have content and don't need a closing tag.
Attributes provide additional information about HTML elements. <img src="image.jpg">
<input type="text">
<a href="https://www.example.com">Link</a>
Text Formatting in HTML
Headings Text Formatting Tags
HTML provides six levels of headings, from h1 (most important) to
Tag Description Example
h6 (least important).
<b> Bold text Bold text
<h1>Heading 1</h1>
<h2>Heading 2</h2> <strong> Important text Important text
<h3>Heading 3</h3>
<i> Italic text Italic text
<em> Emphasized text Emphasized text
Heading 1
Heading 2 <mark> Marked/highlighted text Marked text
Heading 3 <small> Smaller text Smaller text
<del> Deleted text Deleted text
Paragraphs and Line Breaks
<ins> Inserted text Inserted text
<p>This is a paragraph.</p>
<sub> Subscript text H2 O
<br>
<sup> Superscript text X2
Text Direction
<bdo dir="rtl">This text will go right-to-left</bdo>
HTML Lists and Tables
HTML Lists HTML Tables
HTML provides three types of lists: ordered, unordered, and Tables are used to organize data in rows and columns.
description lists.
<table>
<ul> <tr>
<th>Header 1</th>
<li>Item 1</li>
<li>Item 2</li> <th>Header 2</th>
</ul> </tr>
<tr>
<td>Data 1</td>
<ol> <td>Data 2</td>
<li>First item</li>
</tr>
<li>Second item</li> </table>
</ol>
Key table tags: <table>, <tr>, <th>, <td>, <caption>
HTML Links and Navigation
HTML Links and Navigation
Types of Links
HTML links are created using the anchor tag <a> with the href
attribute.
External Links
<a href="https://www.example.com">Visit Example</a>
Internal Links
<a href="about.html">About Us</a>
Anchor Links
<a href="#section2">Go to Section 2</a>
<h2 id="section2">Section 2</h2>
Link Attributes
Navigation Structures
target="_blank": Opens link in new tab
title: Adds tooltip text Common navigation patterns in HTML websites:
download: Specifies file to download
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
HTML Images and Multimedia
Images in HTML Audio and Video
Images are added using the <img> tag, which is self-closing.
<img src="image.jpg" alt="Description of image"
width="300" height="200">
Important Attributes
src: Source URL of the image
alt: Alternative text for accessibility
width/height: Dimensions in pixels
loading: "lazy" for performance
Image Maps
HTML Audio
<map name="workmap">
<area shape="rect" coords="34,44,270,350" <audio controls>
href="computer.htm"> <source src="audio.mp3" type="audio/mpeg">
</map> Your browser does not support audio.
</audio>
HTML Video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support video.
</video>
HTML Forms and Input Types
HTML Form Structure Input Types
Forms are used to collect user input and send data to a server.
<form action="/submit" method="post">
<input type="text" name="name">
<input type="submit">
</form>
<input type="text"> - Text input
<input type="password"> - Password
<input type="radio"> - Radio button
<input type="checkbox"> - Checkbox
<input type="email"> - Email input
<input type="date"> - Date picker
Semantic HTML
What is Semantic HTML? Semantic Elements
Semantic HTML uses tags that convey meaning about the structure
<header> - Header content
and content of the web page. <nav> - Navigation links
<main> - Main content
<footer> - Footer content
Improved accessibility
Better SEO
HTML5 Features and Best Practices
HTML5 Features and APIs
Key HTML5 Features Best Practices
Canvas: 2D drawing API for graphics and animations Accessibility: Use semantic elements and ARIA attributes
Media Elements: Native audio and video support Responsive Design: Adapt to different screen sizes
Storage: Local storage and session storage APIs Performance: Optimize loading and rendering
Geolocation: Access to geographical location Security: Validate inputs and prevent XSS attacks
<canvas id="myCanvas" width="200" height="100"> <meta name="viewport" content="width=device-width,
</canvas> initial-scale=1.0">
