HTML Notes
1. Introduction to HTML
HTML (HyperText Markup Language) is the foundational language for creating web pages. It allows
developers to structure content and elements on the web.
HTML uses tags (keywords surrounded by angle brackets < >) to identify different types of content.
Tags often come in pairs like <tagname> and </tagname>, with the first tag in the pair being the
opening tag and the second being the closing tag.
2. Basic Structure of an HTML Document
The basic structure of an HTML document looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Explanation:
- <!DOCTYPE html>: This declaration defines the document type and version of HTML being used
(HTML5 in this case).
- <html>: This is the root element of the HTML page. All other elements are nested within it.
- <head>: Contains meta-information about the document such as the title, character set, and links
to stylesheets or scripts.
- <title>: Sets the title of the webpage, which is displayed on the browser tab.
- <body>: This is where the visible content of the webpage is placed. Text, images, links, and other
elements go here.
- <h1>: Represents a top-level heading. HTML supports multiple levels of headings, from <h1>
(most important) to <h6> (least important).
- <p>: Represents a paragraph of text.
3. Common HTML Tags
3.1 Headings
HTML provides six levels of headings, <h1> to <h6>, where <h1> is the highest or most important
level and <h6> is the least.
Example:
<h1>This is an H1 Heading</h1>
<h2>This is an H2 Heading</h2>
<h3>This is an H3 Heading</h3>
3.2 Paragraph
The <p> tag defines a paragraph of text. Browsers automatically add some space (margin) before
and after a paragraph.
Example:
<p>This is a simple paragraph.</p>
3.3 Links
The <a> tag is used to create hyperlinks. The href attribute specifies the URL of the page the link
goes to.
Example:
<a href="https://www.example.com">Visit Example.com</a>
3.4 Images
The <img> tag is used to embed images. It requires the src attribute to define the image source
(URL or path) and the alt attribute for alternate text (useful for accessibility).
Example:
<img src="image.jpg" alt="A description of the image">
3.5 Lists
HTML supports ordered and unordered lists:
- Ordered List (<ol>): Items are numbered.
Example:
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
- Unordered List (<ul>): Items are bulleted.
Example:
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
3.6 Tables
Tables are used to display data in a tabular format.
Example:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Explanation:
- <table>: Defines the table.
- <tr>: Defines a row in the table.
- <th>: Defines a header cell in the table.
- <td>: Defines a standard cell in the table.
4. Attributes
Attributes provide additional information about HTML elements. They are always included in the
opening tag and usually come in name/value pairs like name="value".
Common Attributes:
- id: Specifies a unique id for an element.
Example:
<h2 id="section1">This is a Heading with an ID</h2>
- class: Specifies one or more class names for an element, which can be used to style elements with
CSS.
Example:
<p class="intro">This paragraph has a class attribute.</p>
- style: Adds inline CSS styles to an element.
Example:
<p style="color: red;">This paragraph has inline styles.</p>
- src: Specifies the source of an embedded object like an image.
Example:
<img src="logo.png" alt="Logo">
- href: Specifies the URL of the linked page.
Example:
<a href="https://www.example.com">Visit Example.com</a>
5. HTML Semantics
Semantic HTML elements clearly describe their meaning in a human- and machine-readable way.
Common Semantic Elements:
- <header>: Represents the header of a document or section.
Example:
<header>
<h1>My Website</h1>
</header>
- <nav>: Contains the navigation links.
Example:
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>
- <section>: Defines a section in a document.
Example:
<section>
<h2>Section Title</h2>
<p>This is a section.</p>
</section>
- <article>: Represents an independent piece of content like a blog post.
Example:
<article>
<h2>Article Title</h2>
<p>This is an article.</p>
</article>
- <footer>: Defines the footer of a document or section.
Example:
<footer>
<p>Copyright © 2024 My Website</p>
</footer>
6. Multimedia
6.1 Images
The <img> tag embeds images in the document.
Example:
<img src="image.jpg" alt="A beautiful scenery" width="500" height="600">
6.2 Audio
The <audio> tag is used to embed sound content.
Example:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
6.3 Video
The <video> tag is used to embed video content.
Example:
<video controls width="500">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
7. HTML Forms and Inputs
HTML forms are used to collect user inputs and send them to a server.
Example:
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<input type="submit" value="Submit">
</form>
Common Input Types:
- text: Single-line text input.
- password: Password input (text hidden).
- email: Input for email addresses.
- radio: Radio button (single choice from a group).
- checkbox: Checkbox (multiple choices).
- submit: Submit button to send the form data to the server.
8. HTML Entities
HTML entities are special characters that cannot be easily typed or have reserved meanings in
HTML.
Examples:
- : Non-breaking space
- <: Less than (<)
- >: Greater than (>)
- &: Ampersand (&)
9. HTML5 Features
9.1 New Elements
HTML5 introduced several new elements, such as:
- <article>: Represents an article.
- <section>: Defines a section in a document.
- <nav>: Defines navigation links.
- <header>: Represents a header for a section.
