HTML5 Detailed Notes
1. Introduction to Markup Languages
Markup languages are systems for annotating a document in a way that is syntactically
distinguishable from the text. These annotations instruct the system how to interpret the text.
Examples of Markup Languages:
- HTML (HyperText Markup Language): For web page development.
- XML (eXtensible Markup Language): For data transport and storage.
- Markdown: For simple text formatting.
2. Introduction to HTML5
HTML5 is the fifth and latest major version of HTML. It aims to improve the language with support
for the latest multimedia, keeping it easily readable by humans and consistently understood by
computers.
Key Features:
- Audio and Video support
- New semantic elements (like <article>, <section>, <nav>, etc.)
- Canvas and SVG for graphics
- Improved form controls (date pickers, sliders, etc.)
- Offline capabilities with local storage
3. Setting Up Development Environment
To start working with HTML5, the following setup is required:
- Text Editor (Visual Studio Code, Sublime Text, Atom)
- Browser (Google Chrome, Mozilla Firefox)
HTML5 Detailed Notes
Optional tools:
- Live Server extension for real-time preview
- Emmet plugin for HTML snippets
4. Anatomy of an HTML Tag
An HTML tag consists of:
- Opening Tag: <tagname>
- Content: The data between tags
- Closing Tag: </tagname>
Example:
<b>This is bold text</b>
5. Basic Structure of an HTML Document
Every HTML5 page starts with a document type declaration:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Content goes here.
</body>
</html>
6. HTML Content Models
Content Models define what types of elements are expected inside certain HTML elements:
HTML5 Detailed Notes
- Metadata content: <meta>, <title>
- Flow content: Most elements used inside <body>
- Sectioning content: <article>, <section>, <nav>, <aside>
- Heading content: <h1> to <h6>
- Phrasing content: <span>, <strong>
- Embedded content: <img>, <video>
- Interactive content: <a>, <button>
7. Meta-Tags and SEO Basics
Meta tags provide metadata about the HTML document.
Important Meta Tags:
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Best HTML5 tutorial">
They help improve SEO and responsiveness.
8. Formatting Tags
Formatting tags allow basic styling:
- <b> Bold text
- <i> Italic text
- <u> Underlined text
- <mark> Highlighted text
- <small> Smaller text
- <sub> Subscript
- <sup> Superscript
HTML5 Detailed Notes
9. Text Level Formatting
Text-level formatting defines the presentation of specific text:
- <em> Emphasized text
- <strong> Important text
- <code> Inline code representation
10. Lists
HTML provides three types of lists:
- Ordered List (<ol>): Numbered list.
- Unordered List (<ul>): Bulleted list.
- Definition List (<dl>): Key-value pairs.
Example:
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
11. Hyperlinks and Anchors
Hyperlinks are created using the <a> tag.
Syntax:
<a href="https://www.example.com">Visit Example</a>
Anchor links can jump to different sections in the page using id attributes.
12. Working with Images and Image Maps
Adding Images:
HTML5 Detailed Notes
<img src="image.jpg" alt="description" width="500" height="600">
Image Maps allow clickable areas inside images using <map> and <area> tags.
13. Tables in HTML
Tables are created with:
<table>
<tr> (table row)
<td> (table data)
<th> (table header)
</table>
Attributes like colspan and rowspan help in merging cells.
14. Forms and Input Elements
Forms collect user input:
<form action="/submit" method="post">
<input type="text" name="name">
<input type="submit">
</form>
Input types include text, password, checkbox, radio, file, etc.
15. Input Types and Validation
HTML5 introduced many input types:
- email, url, number, date, range, color.
Validation Attributes:
- required
- minlength
HTML5 Detailed Notes
- maxlength
- pattern
Example:
<input type="email" required>
16. Block vs Inline Elements
Block-level elements:
- Always start on a new line.
- Example: <div>, <p>, <h1>
Inline elements:
- Do not start on a new line.
- Example: <span>, <a>, <strong>
17. Multimedia (Audio, Video)
HTML5 supports multimedia:
- <audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
- <video controls>
<source src="video.mp4" type="video/mp4">
</video>
18. Creating Layouts with Divs
Divisions (<div>) help structure the webpage into sections.
Example:
<div class="container">
HTML5 Detailed Notes
<header>Header Content</header>
<nav>Navigation Bar</nav>
<main>Main Content</main>
<footer>Footer</footer>
</div>
19. HTML5 APIs (LocalStorage, Canvas, Geolocation)
HTML5 introduced several powerful APIs:
- localStorage: Store data locally without expiration.
- canvas: Draw graphics on the web page.
- geolocation: Access user's geographical location (with permission).
20. HTML DOM Introduction
DOM (Document Object Model) represents the page structure as a tree of objects.
Each element becomes a node in the tree.
JavaScript can manipulate the DOM using methods like getElementById(), createElement(),
appendChild().
21. Model Question Bank
MCQ:
Q. HTML stands for?
(a) HighText Machine Language (b) HyperText and links Markup Language (c) HyperText Markup
Language (Answer: c)
Short Questions:
- Define HTML5.
HTML5 Detailed Notes
- Purpose of <meta> tag?
Medium Questions:
- Explain different types of lists in HTML.
Long Questions:
- Create a form with input validation using HTML5 features.
