Lecture Note on HTML (HyperText
Markup Language)
1. Introduction to HTML
HTML stands for HyperText Markup Language.
It is the standard language used to create and design webpages.
HTML is not a programming language; it is a markup language used to structure content.
Invented by Tim Berners-Lee in 1991.
HTML describes the structure of web pages using elements.
Elements are the building blocks of HTML pages.
2. Basic Structure of an HTML Document
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>
Explanation:
- <!DOCTYPE html>: Declares the HTML5 document type.
- <html>: Root element of an HTML page.
- <head>: Contains metadata (title, links, scripts).
- <title>: Sets the title in the browser tab.
- <body>: Contains the visible content of the page.
3. HTML Elements and Tags
Tags are keywords surrounded by angle brackets: <tagname>content</tagname>.
HTML tags usually come in pairs: an opening tag and a closing tag.
Example:
<p>This is a paragraph</p>
Empty Tags (no closing tag): <br>, <img>, <hr>
4. Text Formatting Tags
<b>: Bold text
<i>: Italic text
<u>: Underline
<strong>: Important text
<em>: Emphasized text
<small>: Smaller text
<mark>: Highlighted text
5. HTML Attributes
Attributes provide additional information about elements.
Common Attributes: id, class, style, href, src, alt
Example:
<img src='[Link]' alt='Company Logo' width='200' height='100'>
6. HTML Links (Anchor Tags)
Example:
<a href='[Link] Example</a>
Attributes: href – The destination URL, target='_blank' – Opens link in a new tab
7. HTML Images
Example:
<img src='[Link]' alt='Description' width='500' height='300'>
Attributes: src, alt, width, height
8. HTML Lists
Ordered List:
<ol><li>First</li><li>Second</li></ol>
Unordered List:
<ul><li>Apple</li><li>Banana</li></ul>
Definition List:
<dl><dt>HTML</dt><dd>HyperText Markup Language</dd></dl>
9. HTML Tables
Example:
<table border='1'><tr><th>Name</th><th>Age</th></tr><tr><td>Alice</td><td>24</
td></tr></table>
Tags: <table>, <tr>, <th>, <td>
10. HTML Forms
Example:
<form action='/submit' method='post'>
Name: <input type='text' name='username'><br>
Email: <input type='email' name='email'><br>
<input type='submit' value='Submit'>
</form>
Input Types: text, password, checkbox, radio, submit, email, file
11. HTML5 Semantic Elements
Semantic Tags:
<header>: Top of page or section
<nav>: Navigation links
<main>: Main content
<section>: Section of content
<article>: Independent content
<aside>: Side content
<footer>: Bottom of page
12. Multimedia in HTML
Video:
<video width='320' height='240' controls><source src='video.mp4'
type='video/mp4'></video>
Audio:
<audio controls><source src='audio.mp3' type='audio/mpeg'></audio>
13. HTML Comments
Syntax: <!-- This is a comment -->
Comments are ignored by the browser.
14. HTML Best Practices
Use semantic tags for better accessibility.
Always close tags properly.
Use lowercase for tag names.
Use quotes around attribute values.
Indent nested elements for readability.
Validate HTML using W3C Validator.
15. Conclusion
HTML is the foundation of web development, used to structure and display content on the
web.
Mastering HTML is essential for learning CSS, JavaScript, and frontend development
frameworks.