Welcome to HTML Mastery ! This repository is a curated guide to mastering HTML concepts from the basics to advanced topics, designed to support both beginners and experienced developers. With handwritten notes and practical examples, you'll gain a deep understanding of HTML for building robust web foundations.
- Go Through With Notes First [ Which I provided ] + Project is in master branch
- Download Notes = HTML NOTES
- in notes = the table conept , you might feel lost , so that's why i talked about it in detail in this repository !
This repository provides:
- Handwritten Notes: Personal notes covering each HTML concept in-depth.
- Code Examples: Real-world applications to help visualize each concept.
- Project Ideas: Hands-on mini-projects to reinforce learning.
How to Use: Each topic is explained in detail. Start from the basics and move to advanced concepts. Make sure to experiment with code snippets provided in each section!
- Clear Explanations: Simplified notes and examples make even complex topics understandable.
- Code + Theory: Balance of code and theoretical notes ensures strong foundational understanding.
- Real Projects: Build projects to solidify your knowledge and create portfolio-ready work.
I usually use Google chrome for development and I recommend it too. Download Google Chrome if you do not have one.
I will use Visual studio code. I strongly suggest to use Visual Studio Code because it has lots of productivity extensions that makes super productive. Now, let's download visual studio code.
To know how to use visual studio code, watch the following video
1. class : Assigns one or more class names to an element, allowing CSS and JavaScript to target it.
2. id : Provides a unique identifier for an element, used for CSS styling or JavaScript access.
3. style : Inline styling for elements, usually written in CSS.
4. title : Adds extra information about an element, often displayed as a tooltip on hover.
5. lang : Specifies the language of the element's content. (This text is set to Spanish language.)
6. data : Used to store custom data private to the page or application.
7. tabindex : Specifies the order of elements when using the Tab key for navigation.
8. contenteditable : Allows the content to be edited directly by the user. (You can edit this text.)
9. hidden : Hides an element without removing it from the DOM. (This paragraph is hidden.)
10. dir : Sets text direction (e.g., ltr for left-to-right or rtl for right-to-left). (This text is right-to-left.)
action: Defines the URL where form data will be sent after submission.method: Specifies HTTP method to send form data (GETorPOST).autocomplete: Enables or disables autocomplete for the form.novalidate: Prevents form validation when submitting.target: Specifies where to open the response after submitting the form (e.g.,_blank,_self).name: Identifies form controls for data submission.value: Sets the initial value of an element like<input>.placeholder: Displays placeholder text in empty form fields.required: Makes an input field mandatory before form submission.readonly: Prevents the user from modifying the input value.disabled: Disables an input element.maxlength: Limits the number of characters allowed in an input.min/max: Sets the range for numeric, date, or range inputs.step: Specifies the interval for numeric inputs.pattern: Provides a regular expression for input validation.
Used for <img>, <video>, <audio>, etc.
src: Specifies the source file of an image, audio, or video.alt: Alternative text for images, used for accessibility.width/height: Sets the width or height of media elements in pixels.autoplay: Automatically starts playback when the media file is ready.controls: Displays playback controls for audio and video.loop: Allows media to loop after finishing.muted: Starts media muted by default.preload: Specifies how the media should be loaded (auto,metadata,none).poster: For videos, specifies an image to be shown while the video is downloading.
Common for <a> and <link> elements.
href: Defines the destination URL for the link.target: Specifies where to open the linked document (_blank,_self, etc.).rel: Specifies the relationship between the current document and the linked document (e.g.,nofollow,noopener).download: Indicates that the target should be downloaded when clicked.type: Defines the MIME type of the linked document.
For structuring tables with <table>, <th>, <tr>, <td>, etc.
colspan: Allows a cell to span multiple columns.rowspan: Allows a cell to span multiple rows.headers: Associates table cells with header cells for accessibility.scope: Specifies whether a<th>element applies to a row, column, or group.
Used primarily with <button> and <input> elements.
type: Defines the type of button or input (e.g.,button,submit,text,checkbox).checked: Pre-checks a checkbox or radio button.multiple: Allows selecting multiple options in<input type="file">and<select>elements.accept: Specifies acceptable file types for file inputs.for: Connects a label to a form element using the element'sid.
srcset: For images, specifies different image sources for responsive images.defer/async: Used with<script>to control how scripts are loaded.crossorigin: Manages CORS requests for<img>,<video>, and<audio>.sandbox: Adds security restrictions to an<iframe>.aria-*: Provides additional accessibility information for screen readers.
Comments are crucial for documentation, organizing code, and leaving notes for future reference. They are ignored by browsers and do not affect the page rendering.
A simple comment is enclosed between <!-- and -->. This is the most common type of comment in HTML.
<!-- This is a simple comment -->
<p>This is a paragraph.</p>Use: For general notes or explanations within the HTML code.
Comments can span multiple lines. Just place <!-- at the beginning and --> at the end, with line breaks in between.
<!--
This is a multi-line comment.
You can write a lot of details here.
This will not be displayed in the browser.
-->
<p>Some content here.</p>Use: For longer explanations, to temporarily hide code, or to break up sections of the code for clarity.
You can comment out code to temporarily disable it or for testing purposes. The commented-out code won’t be rendered by the browser.
<!-- <p>This paragraph is commented out and will not be displayed.</p> -->
<p>This paragraph is visible.</p>Use: Temporarily hiding code during development or testing.
During development, you might comment out sections of code to help debug or isolate problems.
<!--
<div>
This section is causing issues, so I'm commenting it out for now.
</div>
-->Use: To isolate and debug problematic sections of code.
Comments can be used to explain what a block of code does, which can be helpful for team members or when revisiting the code later.
<!--
This section contains the header for the webpage
It includes the title, navigation links, and logo.
-->
<header>
<h1>Welcome to My Website</h1>
<nav>...</nav>
</header>Use: To explain the purpose or structure of a particular section of the page.
These tags form the foundation of an HTML document.
<!DOCTYPE html>: Declares the document type and version of HTML. It tells the browser to render the document in HTML5 mode.<html>: The root element that encloses all the content in the document.<head>: Contains metadata about the HTML document, such as the title, links to stylesheets, and scripts.<body>: Contains the content of the HTML document (text, images, videos, etc.) that is visible to the user.<title>: Sets the title of the document, visible on the browser tab.
Tags that define the layout and sections of a webpage.
<header>: Represents introductory content or a set of navigational links (usually at the top of the page).<footer>: Represents the footer content of a document or section, typically containing copyright, contact info, etc.<main>: Specifies the main content of a document, excluding headers, footers, and sidebars.<nav>: Defines a section of navigation links.<section>: Defines a section in a document, used to group related content.<article>: Represents a self-contained piece of content, such as a blog post, news article, or user comment.<aside>: Defines content that is tangentially related to the content around it, often used for sidebars.<div>: A generic container used to group elements for styling or scripting. It has no semantic meaning.<span>: A generic inline container used to style or manipulate small parts of text.
Used to define and structure text on the page.
<p>: Defines a paragraph of text.<h1>,<h2>, ...,<h6>: Define headings, where<h1>is the highest (most important) and<h6>is the lowest.<strong>: Indicates that text should be strongly emphasized, typically displayed in bold.<em>: Indicates that text should be emphasized, typically displayed in italics.<b>: Represents bold text, but without the semantic emphasis of<strong>.<i>: Represents italicized text, but without the semantic emphasis of<em>.<u>: Underlines text.<small>: Displays text in a smaller font size.<mark>: Highlights text, typically used for search results.<del>: Represents text that has been deleted or removed.<ins>: Represents text that has been inserted into a document.<blockquote>: Defines a block of text that is a quotation from another source.<q>: Defines a short inline quotation.<code>: Represents a block of code.<pre>: Represents preformatted text, maintaining whitespace and formatting.<br>: Represents a line break within text.<hr>: Defines a thematic break or horizontal rule, often used to separate content.
Used for defining lists of items.
<ul>: Defines an unordered (bulleted) list.<ol>: Defines an ordered (numbered) list.<li>: Defines a list item in both unordered and ordered lists.<dl>: Defines a description list.<dt>: Defines a term (or name) in a description list.<dd>: Defines the description or definition of a term in a description list.
Used for linking, embedding, and referencing external content.
<a>: Defines a hyperlink to another page or resource.<img>: Embeds an image.<audio>: Defines an audio file.<video>: Defines a video file.<source>: Specifies multiple media resources for<audio>and<video>elements, allowing for multiple formats.<iframe>: Embeds another document or webpage within the current document.<object>: Embeds an object such as a Flash file, PDF, or Java applet.<embed>: Embeds external content, such as multimedia or interactive content.<link>: Defines relationships between the current document and external resources (often used for linking stylesheets).<area>: Defines clickable areas inside an image map.<map>: Defines an image map with clickable areas.<picture>: Defines a responsive image container for multiple sources.
Used to create forms for user input and interaction.
<form>: Defines an HTML form used to collect user input.<input>: Defines an input field for various types of data (text, password, checkbox, etc.).<textarea>: Defines a multi-line text input field.<button>: Defines a clickable button, used to submit forms or trigger JavaScript actions.<select>: Defines a dropdown list.<option>: Defines an option in a<select>dropdown.<optgroup>: Groups related options in a dropdown list.<label>: Defines a label for an<input>element.<fieldset>: Groups related elements within a form and often used with<legend>.<legend>: Defines a caption for a<fieldset>element.<datalist>: Provides a list of predefined options for an<input>element.<output>: Defines the result of a calculation or user action in a form.
Used for displaying tabular data.
<table>: Defines a table.<tr>: Defines a table row.<td>: Defines a table cell (data).<th>: Defines a table header cell.<thead>: Groups the header content in a table.<tbody>: Groups the body content in a table.<tfoot>: Groups the footer content in a table.<caption>: Defines a caption for a table.<col>: Specifies column properties for an HTML table.<colgroup>: Groups columns to apply attributes to multiple columns at once.
Used for linking and embedding JavaScript and CSS.
<script>: Embeds or links to a JavaScript file.<noscript>: Defines content to be displayed if JavaScript is not supported or disabled.<style>: Defines internal CSS styles for the document.
Provide metadata about the HTML document.
<meta>: Specifies metadata such as character encoding, author, description, or keywords.<base>: Specifies a base URL for all relative URLs in the document.<link>: Used for external resources like stylesheets or icons.<title>: Specifies the title of the document shown in the browser’s title bar or tab.<head>: Contains metadata about the document, such as links to CSS and JavaScript files.
Miscellaneous tags used for various purposes.
<canvas>: Provides a drawing surface for graphics, often used for dynamic content like charts and games.<svg>: Defines scalable vector graphics, used to create vector-based drawings.<math>: Embeds mathematical notation in web documents.<wbr>: Suggests possible line break points within text content.
-
Use Case:
<div>is a generic container used for grouping and styling elements. It doesn't provide any inherent styling by itself but is crucial for structuring layouts, especially when combined with CSS classes or IDs.
-
Example:
<div class="container"> <p>This is a paragraph inside a div container.</p> </div>
-
Use Case:
- Used for grouping text into paragraphs. Every
<p>element automatically has margins above and below it, ensuring text is well-spaced.
- Used for grouping text into paragraphs. Every
-
Example:
<p>This is a paragraph of text that is displayed with block-level behavior.</p>
-
Use Case:
- These elements represent headings, with
<h1>being the most important and<h6>the least. They are used to create a document outline and are block-level by default.
- These elements represent headings, with
-
Example:
<h1>Main Heading</h1> <h2>Subheading</h2>
-
Use Case:
- Used to create numbered lists. Each list item (
<li>) inside an<ol>is a block-level element.
- Used to create numbered lists. Each list item (
-
Example:
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
-
Use Case:
- Used to create bullet-point lists. Like
<ol>, each list item (<li>) inside the<ul>is block-level.
- Used to create bullet-point lists. Like
-
Example:
<ul> <li>Item A</li> <li>Item B</li> </ul>
-
Use Case:
- Represents an item in either an ordered (
<ol>) or unordered (<ul>) list. Although it’s a list item, it behaves as a block-level element within its parent list.
- Represents an item in either an ordered (
-
Example:
<ul> <li>This is a list item.</li> </ul>
-
Use Case:
- Defines a header for a document or section, typically containing navigation links, a logo, or introductory content. It’s commonly used in semantic layouts.
-
Example:
<header> <h1>Website Header</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> </nav> </header>
-
Use Case:
- Defines a footer for a document or section. It typically contains copyright information, links, or other metadata.
-
Example:
<footer> <p>© 2024 My Website</p> </footer>
-
Use Case:
- Represents a thematic grouping of content, typically with a header. It’s used to group related content together, especially in larger, more complex layouts.
-
Example:
<section> <h2>Our Services</h2> <p>We offer a variety of services...</p> </section>
-
Use Case:
- Represents a self-contained piece of content that could be distributed or syndicated, such as a blog post or news article. It is often used in blogs or content-heavy websites.
-
Example:
<article> <h2>Article Title</h2> <p>This is an article with content that can be read independently.</p> </article>
-
Use Case:
- Defines navigation links. It is commonly used for creating menus or navigation bars in a website.
-
Example:
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
-
Use Case:
- Represents content that is tangentially related to the content around it, like a sidebar or additional information.
-
Example:
<aside> <h3>Related Articles</h3> <p>Check out these related articles...</p> </aside>
-
Use Case:
- Defines the main content of the document, excluding headers, footers, and sidebars. It’s important for accessibility and SEO.
-
Example:
<main> <h1>Main Content Area</h1> <p>This is the primary content of the page.</p> </main>
-
Use Case:
- Defines an HTML form that is used to collect user input. It contains other form elements such as
<input>,<select>, and<textarea>, all of which are block-level elements.
- Defines an HTML form that is used to collect user input. It contains other form elements such as
-
Example:
<form action="/submit" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="name"> <button type="submit">Submit</button> </form>
-
Use Case:
- Used for displaying a section of content that is quoted from another source. It typically has an indentation or some other visual cue.
-
Example:
<blockquote> <p>"The only limit to our realization of tomorrow is our doubts of today." - Franklin D. Roosevelt</p> </blockquote>
-
Use Case:
- Creates a horizontal line, typically used to separate content or create visual breaks between sections.
-
Example:
<hr>
-
Use Case:
- Represents contact information for the author or owner of a document or section. It’s typically used to mark the address section of a page.
-
Example:
<address> <p>Email: <a href="mailto:example@example.com">example@example.com</a></p> </address>
'''
-
Use Case:
<details>is used to create a disclosure widget that the user can toggle open or closed.<summary>provides a summary or label for the details.
-
Example:
<details> <summary>More Info</summary> <p>Here is some additional information...</p> </details>
In HTML, non-blocking elements refer to elements that do not disrupt the flow of content on the page or take up the full width of their parent container. These elements allow other content to appear alongside them, and they typically do not create a new block-level box.
Here's a comprehensive list of non-blocking elements and their use cases:
These elements do not start on a new line and only take up as much width as their content requires.
- Use case: A generic inline container for styling or grouping inline elements.
- Example: Wrapping text in a specific style.
<p>This is <span style="color:red;">important</span> text.</p>- Use case: Defines a hyperlink. It allows users to navigate to another page or resource.
- Example: Creating a clickable link to another webpage.
<a href="<https://www.example.com>">Click here</a>- Use case: Embeds images within text. It is treated as an inline element by default.
- Example: Displaying an image within text without breaking the flow.
<p>Check out this image: <img src="image.jpg" alt="Image description"></p>- Use case: Used to indicate that the text should be strongly emphasized, often displayed in bold.
- Example: Emphasizing important text in a paragraph.
<p><strong>Warning:</strong> Please follow the instructions carefully.</p>- Use case: Marks text to be emphasized, typically displayed in italics.
- Example: Highlighting a word for emphasis.
<p>This is <em>important</em> information.</p>- Use case: Displays inline code snippets, typically within a text paragraph.
- Example: Showing a piece of code in a sentence.
<p>Use the <code>print()</code> function to output text in Python.</p>- Use case: Represents a short inline quotation. Typically enclosed in quotation marks.
- Example: Displaying an inline quote.
<p>He said, <q>Learning HTML is fun!</q></p>- Use case: Renders text in a smaller font size, usually for fine print.
- Example: Including disclaimers or footnotes.
<p><small>Disclaimer: This is a test message.</small></p>- Use case: Represents an abbreviation or acronym. Often used with the
titleattribute to provide a full description. - Example: Displaying an abbreviation with its full form as a tooltip.
<p>The <abbr title="Hypertext Markup Language">HTML</abbr> standard is widely used.</p>- Use case: Boldface text without indicating any additional emphasis.
- Example: Displaying a word in bold.
<p>The answer is <b>42</b>.</p>- Use case: Italic text, similar to
<em>but without added emphasis. - Example: Displaying a word in italics.
<p>The word <i>etymology</i> comes from Greek.</p>Some form elements are inline by default, which allows them to flow with surrounding content.
- Use case: Accepts user input. Can be used in forms to capture data from users.
- Example: An inline text field in a form.
<label for="name">Name:</label>
<input type="text" id="name" name="name">- Use case: Represents a clickable button that can trigger actions when clicked.
- Example: A submit button in a form.
<form>
<button type="submit">Submit</button>
</form>- Use case: Defines a dropdown list of options from which the user can select.
- Example: A dropdown list for selecting a country.
<select name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
</select>- Use case: Defines a label for a form element, typically associated with
<input>,<select>, and<textarea>. - Example: Labeling a form input.
<label for="email">Email:</label>
<input type="email" id="email" name="email">These are used for inline-level text manipulation and formatting.
- Use case: Used to isolate text that might be formatted in a different direction from the surrounding text.
- Example: Isolating bidirectional text in different languages.
<p>This is a <bdi>non-Latin</bdi> language.</p>- Use case: Overrides the default bidirectional text algorithm.
- Example: Forcing text to display in a specific direction.
<bdo dir="rtl">This text is right to left</bdo>- Use case: Represents a specific period in time, such as a date or a time.
- Example: Showing a date or time on a webpage.
<time datetime="2024-11-10">November 10, 2024</time>Some embedded elements can be inline, meaning they don't disrupt the page layout.
- Use case: Embeds another document within the current document.
- Example: Embedding a YouTube video or external content inline.
<iframe src="<https://www.youtube.com/embed/example>" width="560" height="315"></iframe>- Use case: Embeds external resources like multimedia files or interactive content, like Flash or Java applets.
- Example: Embedding a PDF document.
<object data="file.pdf" type="application/pdf" width="600" height="400"></object>- Use case: Embeds content like a multimedia file (audio, video, etc.).
- Example: Embedding a PDF file or audio.
<embed src="audio.mp3" width="300" height="50">- Use case: Embeds Scalable Vector Graphics (SVG) directly within an HTML page.
- Example: Drawing an inline SVG shape.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>These elements are specifically designed to give meaning to the structure of web pages, improving readability, accessibility, and SEO.
- Description: Represents the introductory content of a page or section. It often contains navigation links, logo, and other introductory elements.
- Use Case: Used at the top of a webpage or within a section to provide introductory information and navigation.
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>- Description: Defines a set of navigation links. It groups links to important sections of a website.
- Use Case: Used to create navigation bars, links to other pages, or in-page links.
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>- Description: Represents a self-contained, independent piece of content. It could be a blog post, news article, or any other standalone content.
- Use Case: Used for blog posts, news articles, forum posts, or any other piece of content that could be reused or syndicated.
<article>
<h2>Title of the Article</h2>
<p>This is the content of the article...</p>
</article>- Description: Represents a thematic grouping of content, such as a chapter or a specific section of a page.
- Use Case: Used to group related content together, like sections of a page (e.g., a "Contact Us" section, "About Us" section).
<section>
<h2>About Us</h2>
<p>We are a company that...</p>
</section>- Description: Represents the footer of a page or section. It often contains copyright information, contact details, or links to privacy policies.
- Use Case: Used at the bottom of a page or section to hold information like copyright notices, contact details, or additional navigation links.
<footer>
<p>© 2024 My Website</p>
<p><a href="#contact">Contact</a></p>
</footer>- Description: Represents content that is tangentially related to the content around it, often used for sidebars, pull quotes, or related links.
- Use Case: Used for sidebars, additional information, or advertisements that are related but not central to the content.
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#">Article 1</a></li>
<li><a href="#">Article 2</a></li>
</ul>
</aside>- Description: Represents the primary content of a document. There should be only one
<main>element per document. - Use Case: Used to wrap the central content of a page, excluding headers, footers, sidebars, etc.
<main>
<h1>Welcome to Our Website</h1>
<p>This is the main content area.</p>
</main>- Description: Represents any content that is referenced from the main content, such as images, diagrams, or illustrations.
- Use Case: Used for images, diagrams, or any media that is referenced from the main content, typically with an optional caption.
<figure>
<img src="image.jpg" alt="A beautiful landscape">
<figcaption>Beautiful landscape in the mountains.</figcaption>
</figure>- Description: Represents a caption or description for the content inside the
<figure>element. - Use Case: Used within a
<figure>element to provide a caption for an image, chart, or other media content.
<figure>
<img src="diagram.png" alt="Chart showing data trends">
<figcaption>Chart showing the rise in web traffic.</figcaption>
</figure>- Description: Represents text that has been highlighted or marked for reference or emphasis, typically used for search results or important keywords.
- Use Case: Used to highlight keywords or important sections of text in the document.
<p>We offer <mark>great deals</mark> on all our products.</p>- Description: Represents a specific time or range of time. It can be used for dates, times, or durations.
- Use Case: Used to represent specific dates, times, or time ranges, such as event schedules or blog post dates.
<time datetime="2024-11-10">November 10, 2024</time>- Description: Represents a disclosure widget from which the user can obtain additional information, typically a toggleable section.
- Use Case: Used to create collapsible sections, like a "Read more" button or expandable details.
<details>
<summary>Click to reveal more info</summary>
<p>Here is the additional information...</p>
</details>- Description: Represents a summary or label for a
<details>element. It's visible when the details are collapsed. - Use Case: Used as the clickable heading to toggle visibility of the content inside the
<details>element.
<details>
<summary>More about us</summary>
<p>We are a company specializing in...</p>
</details>- Description: Represents contact information for the author or owner of a document or article.
- Use Case: Used for contact information such as email, phone number, or address.
<address>
<p>Email us at: <a href="mailto:contact@example.com">contact@example.com</a></p>
</address>- Description: Represents the progress of a task or action, such as file upload or download.
- Use Case: Used to indicate the progress of a process, such as a download or upload.
<progress value="50" max="100">50%</progress>- Description: Represents the result of a calculation or user action, such as a form input.
- Use Case: Used to display the result of a calculation or dynamic input to the user.
<output for="number1 number2" name="result">0</output>-
Structural Elements:
<header>,<footer>,<main>,<section>,<article>,<nav>,<aside> -
Content and Media Elements:
<figure>,<figcaption>,<mark>,<time>,<address>,<progress>,<output> -
Interactive and Descriptive Elements:
<details>,<summary>
To create a table, you use the <table> element. The basic building blocks of a table are rows (<tr>), headers (<th>), and cells (<td>).
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table><table>: Defines the table itself.<tr>: Represents a row in the table.<th>: Defines a header cell, typically bold and centered by default.<td>: Defines a standard cell in the table.
Headers are often used to describe the content of the columns or rows. You can define headers using the <th> element.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
<tr>
<td>John Doe</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>34</td>
<td>London</td>
</tr>
</table>colspan: Makes a cell span multiple columns.rowspan: Makes a cell span multiple rows.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td rowspan="2">Row 1, Cell 1 (spans 2 rows)</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td colspan="2">Row 2, Cell 2 (spans 2 columns)</td>
</tr>
</table>You can use CSS to add styles to your table for a cleaner and more attractive design.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
<tr>
<td>John Doe</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>34</td>
<td>London</td>
</tr>
</table>
</body>
</html>-
Table Caption: You can add a caption to describe the table using the
<caption>element.<table border="1"> <caption>Employee Information</caption> <tr> <th>Name</th> <th>Position</th> <th>Salary</th> </tr> <tr> <td>John Doe</td> <td>Developer</td> <td>$100,000</td> </tr> <tr> <td>Jane Smith</td> <td>Designer</td> <td>$85,000</td> </tr> </table>
-
Table with
thead,tbody, andtfoot: These elements are used for grouping header, body, and footer content, improving readability and accessibility.<table border="1"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Location</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>28</td> <td>New York</td> </tr> <tr> <td>Jane Smith</td> <td>34</td> <td>London</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">End of the Table</td> </tr> </tfoot> </table>
<table border="1">
<caption>Sales Data</caption>
<thead>
<tr>
<th>Month</th>
<th>Sales</th>
<th>Expenses</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$5000</td>
<td>$3000</td>
</tr>
<tr>
<td>February</td>
<td>$4000</td>
<td>$2500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$9000</td>
<td>$5500</td>
</tr>
</tfoot>
</table><caption>: Adds a title to the table.<thead>,<tbody>,<tfoot>: Grouping elements for header, body, and footer content.colspan: Allows a cell to span across multiple columns.rowspan: Allows a cell to span across multiple rows.
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 |
| Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |
| Name | Age | Location |
|---|---|---|
| John Doe | 28 | New York |
| Jane Smith | 34 | London |
| Month | Sales | Expenses |
|---|---|---|
| January | $5000 | $3000 |
| February | $4000 | $2500 |
| Total | $9000 | $5500 |
| Name | Age | Location |
|---|---|---|
| John Doe | 28 | New York |
| Jane Smith | 34 | London |
| Month | Sales | Expenses |
|---|---|---|
| January | $5000 | $3000 |
| February | $4000 | $2500 |
| Total | $9000 | $5500 |
In HTML, you can add images using the <img> tag. Below are the various ways to add images in HTML, with explanations and examples:
To include an image, you can use the <img> tag with the src attribute specifying the image URL and the alt attribute for accessibility.
<img src="image.jpg" alt="Description of the image">If your image is stored locally (in the same directory as your HTML file), you can reference it directly by its filename or relative path.
<img src="images/myimage.jpg" alt="A beautiful scenery">You can also add an image hosted on an external website by providing the full URL.
<img src="<https://www.example.com/images/logo.png>" alt="Website Logo">You can specify the width and height of an image directly in the <img> tag using the width and height attributes (in pixels).
<img src="image.jpg" alt="Description" width="500" height="300">For responsive design, you can use the srcset attribute to provide different image sources for different screen sizes.
<img src="image.jpg" srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 2000w" alt="Responsive image">- The browser will choose the appropriate image based on the display width and device resolution.
You can wrap an <img> tag with an anchor <a> tag to make the image clickable, linking to another page.
<a href="<https://www.example.com>">
<img src="logo.png" alt="Click here to visit Example.com">
</a>The <picture> element allows you to specify multiple image sources for different scenarios, like varying screen resolutions or aspect ratios.
<picture>
<source srcset="image-small.jpg" media="(max-width: 600px)">
<source srcset="image-medium.jpg" media="(max-width: 1200px)">
<img src="image-large.jpg" alt="A responsive image example">
</picture>- This approach allows you to display different images based on the viewport size or other conditions.
While the <img> tag is for inserting images into content, you can also use CSS to set an image as the background of an element.
<div class="background-image">
<p>This is content over a background image.</p>
</div>
<style>
.background-image {
background-image: url('background.jpg');
background-size: cover; /* Ensures the image covers the entire div */
height: 500px;
}
</style>You can add a tooltip to an image by using the title attribute. When a user hovers over the image, the text from title will appear.
<img src="image.jpg" alt="Description" title="This is a beautiful landscape.">To improve page load performance, you can use the loading="lazy" attribute to defer loading images until they come into view.
<img src="image.jpg" alt="Lazy-loaded image" loading="lazy"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Images in HTML</title>
</head>
<body>
<!-- Basic Image -->
<h2>Basic Image</h2>
<img src="image.jpg" alt="Description of image">
<!-- Image with Local Path -->
<h2>Image with Local Path</h2>
<img src="images/scenery.jpg" alt="Beautiful Scenery">
<!-- External URL Image -->
<h2>External Image</h2>
<img src="<https://www.example.com/logo.png>" alt="External Logo">
<!-- Image with Width and Height -->
<h2>Image with Specified Width and Height</h2>
<img src="image.jpg" alt="Scenery" width="600" height="400">
<!-- Responsive Image with srcset -->
<h2>Responsive Image</h2>
<img src="image.jpg" srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 2000w" alt="Responsive Image Example">
<!-- Image as Link -->
<h2>Image as a Link</h2>
<a href="<https://www.example.com>">
<img src="logo.png" alt="Click to Visit Example" width="100">
</a>
<!-- Using picture for Art Direction -->
<h2>Using picture for Art Direction</h2>
<picture>
<source srcset="image-small.jpg" media="(max-width: 600px)">
<source srcset="image-medium.jpg" media="(max-width: 1200px)">
<img src="image-large.jpg" alt="A responsive image example">
</picture>
<!-- Background Image with CSS -->
<h2>Background Image with CSS</h2>
<div class="background-image">
<p>This content is over a background image.</p>
</div>
<style>
.background-image {
background-image: url('background.jpg');
background-size: cover;
height: 300px;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<!-- Lazy Loaded Image -->
<h2>Lazy Loaded Image</h2>
<img src="image.jpg" alt="Lazy Loaded Image" loading="lazy">
</body>
</html>-
src: Specifies the image source (URL or path). -
alt: Provides a description for the image (important for accessibility). -
width/height: Defines the size of the image in pixels. -
srcset: Defines multiple sources for responsive images. -
title: Displays a tooltip on hover. -
loading="lazy": Defers the image load until it’s needed. -
background-image: Used in CSS to set an image as the background.To add or embed video and audio in HTML, you can use the
<video>and<audio>elements, respectively. Here's how you can embed different types of video and audio in an HTML document:
You can embed a video using the <video> tag. It supports various attributes like controls, autoplay, loop, and poster.
- make sure in the sub file of your new folder on vs code the music or video is uploaded.
- if you want to add pinterest high quality GIF you can simply right click - go to Copy Image Address and add in
<!-- Embedding a Video -->
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<p>Your browser does not support HTML5 video. You can <a href="video.mp4">download the video</a> instead.</p>
</video>Explanation:
<video>: This is the HTML tag to embed the video.widthandheight: These attributes define the size of the video.controls: This attribute adds playback controls such as play, pause, volume, etc.<source>: Specifies multiple video sources for different formats (MP4, OGG). The browser will play the first one it supports.type: Specifies the MIME type of the video source.- Fallback Content: The
<p>tag inside provides fallback content for browsers that don't support the video element.
To embed audio, use the <audio> tag. It can also include the controls, autoplay, and loop attributes.
<!-- Embedding Audio -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<p>Your browser does not support HTML5 audio. You can <a href="audio.mp3">download the audio</a> instead.</p>
</audio>Explanation:
<audio>: The HTML tag used to embed audio.controls: Adds the default audio controls (play, pause, volume, etc.).<source>: Specifies the audio file sources and their MIME types (MP3, OGG).- Fallback Content: Provides an alternative link for browsers that don’t support the
<audio>tag.
autoplay: Automatically starts the video/audio when the page loads.muted: Starts the video/audio with the sound muted.loop: Makes the video/audio loop indefinitely once it ends.poster: For the<video>tag, it specifies an image to show while the video is loading (used as a preview).preload: Specifies if and how the video or audio should be preloaded when the page loads:auto: The browser should load the entire media file.metadata: Only metadata (like duration) should be loaded.none: No media is loaded until playback begins.
<!-- Advanced Video Example -->
<video width="640" height="360" controls autoplay loop muted poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.ogv" type="video/ogg">
<p>Your browser does not support HTML5 video. You can <a href="video.mp4">download the video</a> instead.</p>
</video>
<!-- Advanced Audio Example -->
<audio controls autoplay loop>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<p>Your browser does not support HTML5 audio. You can <a href="audio.mp3">download the audio</a> instead.</p>
</audio>- Always include multiple sources with different formats to ensure compatibility across browsers.
- The fallback content (like the
<p>tag) ensures users without support for the<video>or<audio>tags have a download link. - The
autoplayandmutedattributes are commonly used together for video or audio that plays automatically but is muted (e.g., background media).
Let me know if you need further details or specific use cases!
If You want Little More extra or Specific Tag Knowlege or Api Knowledge
- visit = w3schools