01.
HTML Comments for Organization
HTML comments are notes added in code that are not displayed in the
browser. They help organize and explain the structure of a webpage.
<!-- This is a comment -->
Purpose: They help programmers understand the code structure and
label different sections (e.g., ``).
Feature: They are completely ignored by the browser and do not appear
on the webpage.
02. Table with Header Row (<th>)
An HTML table header is created using the <th> (table header) tag.
It is used to define headings of columns or rows in a table.
Effect: Browsers automatically make the text inside <th> bold and
centered.
Example: <tr> <th>Roll No</th> <th>Name</th> </tr>
03. Ordered vs. Unordered Lists
Ordered List (<ol>) Unordered List (<ul>)
Feature Displays items in a numbered Displays items with bullet
sequence points
Marker Uses numbers or letters (1, 2, A). Uses bullets (circles, squares).
Order Sequence matters. Sequence does not matter.
04. Style Attribute vs. <style> Tag
Style Attribute (Inline): Used to apply CSS directly inside an HTML
element
Used for a single element. It has the highest priority but is hard to manage.
<style> Tag (Internal): Used to define CSS inside the <head> section
Used for the entire page. It is cleaner and keeps CSS in the <head>
section.
Feature Style Attribute <style> Tag
Type Inline CSS Internal CSS
Scope Single element Entire page
Reusability Not reusable Reusable
Priority Highest Lower than inline
Code Cleanliness Less clean More organized
05. Paragraph (<p>) and Line Break (<br>)
<p> Tag: Defines a paragraph. It adds a blank space (margin) before and
after the text block. Block-level element
<br> Tag: Defines a single line break. It moves text to the next line
without extra spacing. Empty (self-closing) tag
Feature <p> <br>
Purpose Defines paragraph Inserts line break
Type Block element Inline/empty tag
Spacing Adds space before & after No extra space
Usage For large text blocks For small breaks
06. <head> vs. <header>
Tag Purpose Visibility
Contains metadata, titles, and CSS
<head> Invisible to the user.
links.
Contains introductory content like Visible at the top of the
<header>
logos/nav. page.
Feature <head> <header>
Purpose Metadata Page/section heading
Visibility Not visible Visible
Location Before <body> Inside <body>
Usage SEO, scripts, styles UI layout
Repeatable Only once Can be multiple
07. Proper HTML Program Structure
1. <!DOCTYPE html>: Declares the document type.
2. <html>: The root element that wraps everything.
3. <head>: Contains the title and metadata.
4. <body>: Contains all the visible content (text, images).
08. Subscript and Superscript
Subscript (<sub>): Displays text slightly below the normal line
Commonly used in chemical formulas, mathematical expressions
p>H<sub>2</sub>O</p>
Superscript (<sup>): Raises the text (e.g., $a^{2} + b^{2}$).
09. Creating a Frame
Tag: Historically, the <frameset> and <frame> tags were used to divide a
window into multiple parts.
Modern Way: Today, the <iframe> tag is used to embed one webpage
inside another.
Feature <frame> <iframe>
HTML Version Old (deprecated) Modern (HTML5)
Usage Inside <frameset> Inside <body>
Support Not supported now Fully supported
Flexibility Less flexible More flexible
10. Hyperlink Syntax
Syntax: <a href="URL"> Link Text </a>
Parts: <a> is the anchor tag, and href (Hypertext Reference) is the
attribute that holds the link destination.
11. Different Types of Lists
1. Ordered List (<ol>): Numbered list.
2. Unordered List (<ul>): Bulleted list.
3. Description List (<dl>): List of terms and their definitions.
12. Tags used to create a Table
The core tags are:
<table> (the container), Defines the entire table
<tr> (row), Defines a row in the table
<th> (header), and
<td> (data cell).
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Course</th>
</tr>
<tr>
<td>Kankana</td>
<td>20</td>
<td>BCA</td>
</tr>
</table>
13. Building Blocks of HTML
The building blocks of HTML are the basic components used to create and
structure a webpage. They form the foundation of all HTML documents.
1. Elements: The overall component (e.g., <p>Hello</p>).
2. Tags: The markers like <p> (opening) and </p> (closing).
3. Attributes: like src or href. Provide additional information about
elements
14. Purpose of <audio> and <video>
They allow developers to insert multimedia files directly into the page
without needing third-party plugins (like Flash).
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
</video>
Feature <audio> <video>
Media Type Sound only Sound + Visual
Display No screen display Shows video screen
Use Music, podcasts Movies, clips
Attributes controls, autoplay controls, autoplay, width, height
15. Table with 3 Rows and 3 Columns
To create this, you need one <table> tag containing three <tr> tags, and inside
each <tr>, you place three <td> tags.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Course</th>
</tr>
<tr>
<td>Riya</td>
<td>19</td>
<td>BCA</td>
</tr>
<tr>
<td>Amit</td>
<td>20</td>
<td>BBA</td>
</tr>
<tr>
<td>Sneha</td>
<td>18</td>
<td>BSc</td>
</tr>
</table>
16. All HTML Tags for Displaying a Table
<table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td>.
17. Accessibility Attributes (alt)
Importance: The alt attribute in HTML is used to provide alternative text
for images. It helps describe the image when it cannot be displayed. the
<img src="[Link]" alt="Beautiful red flower">
18. <strong> vs. <b> Tags
Tag Meaning Appearance
<b> Physical style only (Bold). Bold text.
<strong> Semantic importance (Logical). Bold text + screen reader emphasis.
Feature <strong> <b>
Purpose Important text Bold text only
Meaning Semantic Non-semantic
Accessibility Supported (emphasized) Not emphasized
Use case Warning, key info Styling only
19. colspan Attribute
Usage: It is used within a <td> or <th> tag to merge multiple columns
into one.
Example: <td colspan="2"> will span across two column widths.
01 & 07. Block vs. Inline Elements
Feature Block Elements Inline Elements
Takes up the full width Takes up only as much width as
Space
available. necessary.
Line Break Always starts on a new line. Does not start on a new line.
Examples <div>, <h1>, <p> <span>, <a>, <img>
02 & 06. Margin vs. Padding
Margin: It is the space outside the border of an element. It creates
distance between different elements.
Padding: It is the space inside the border, between the content and the
border. It makes the element's background larger.
Feature Margin Padding
Space Type Outside element Inside element
Distance between
Effect Space inside element
elements
Affected (background
Background Not affected
expands)
Use Separating elements Adding inner spacing
03 & 04. Using Classes for Width, Height, and Bold
CSS classes allow developers to easily apply reusable styles such as width,
height, and bold text to multiple HTML elements efficiently.
Width/Height: Define a class with specific dimensions and apply it to
multiple tags.
o Example: .my-box { width: 100px; height: 50px; }
Bold Styling: Use the font-weight property within a class.
o Example: .bold-text { font-weight: bold; }
Benefit: Using a class allows you to update the style once and reflect
changes across all elements using that class.
08. Styling an HTML Table
To style a table, use the following properties:
Borders: table, th, td { border: 1px solid black; }
Padding: td { padding: 10px; } (adds space inside cells).
Row Colors: tr:nth-child(even) { background-color: #f2f2f2; } (creates
zebra stripes).
09. External CSS vs. Inline CSS
Inline CSS
CSS is written inside the HTML element using style attribute
Applies to only one element
External CSS
CSS is written in a separate .css file
Linked to HTML using <link> tag
Feature Inline CSS External CSS
Location Inside HTML tag Separate file
Reusability Not reusable Reusable
Code Cleanliness Poor Clean
Priority Highest Lower
Best Use Small changes Large websites
10. Advantages of ID and Class Selectors
Selector Main Advantage
ID (#) Uniqueness: Best for styling a single, specific element (like a
Navigation Bar).
Advantages of ID Selector:
Targets one specific element only
Highest priority in CSS
Useful for unique sections like header, footer
Helps in precise styling and JavaScript targeting
Selector Main Advantage
Reusability: Allows you to apply the same style to many different
elements.
Advantages of Class Selector:
Can be reused on many elements
Class (.)
Helps maintain consistent design
Makes code clean and organized
Flexible for grouping similar elements