Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

HTML Notes

The document provides a comprehensive overview of HTML, including its structure, essential tags, and features. It covers topics such as the basic layout of an HTML document, commonly used tags, and specific elements like links, images, and lists. Additionally, it emphasizes the importance of HTML in web development and its integration with other technologies.

Uploaded by

kumarsuraj97334
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML Notes

The document provides a comprehensive overview of HTML, including its structure, essential tags, and features. It covers topics such as the basic layout of an HTML document, commonly used tags, and specific elements like links, images, and lists. Additionally, it emphasizes the importance of HTML in web development and its integration with other technologies.

Uploaded by

kumarsuraj97334
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 32

Lessons

1. Introduction - 1 7. Anchor Tag - 11 13. Video & Audio Tag - 26

2. Page Structure - 2 8. List - 12 14. I Frames - 27

3. Basic Tags - 4 9. Table - 16 15. SVG - 28

4. Link & Script Tags - 7 10. Core Web Vitals - 18 16. Semantic Tags - 29

5. Image Tags - 8 11. Forms and Input Tags - 20 17. Entities Tags - 31

6. Pre Tag - 10 12. ID & Classes - 24

Chapter 1 - Introduction
HTML (HyperText Markup Language) was created by Tim Berners-Lee in 1991 as a
standard for creating web pages. It's a markup language used to structure content
on the web, defining elements like headings, paragraphs, links, and images. HTML
forms the backbone of web content. In layman's terms, HTML is like the skeleton
of a website. It's a set of instructions that tells a web browser how to display text,
images, videos, and other elements on a webpage. Think of it as the building
blocks that create the structure and look of a website, similar to how bricks and
mortar are used to build a house.
In a nutshell:

HTML is the language of the web, used to create websites.

HTML defines the barebone structure or layout of web pages that we see on
the Internet.

HTML consists of a set of tags contained within an HTML document, and the
associated files typically have either a ".html" or ".htm" extension.

There are several versions of HTML, with HTML5 being the most recent
version.

→ Features of HTML

Lessons 1
It is platform-independent. For example, Chrome displays the same pages
identically across different operating systems such as Mac, Linux, and
Windows.

Images, videos, and audio can be added to a web page (For example -
YouTube shows videos on their website)

HTML is a markup language and not a programming language.

It can be integrated with other languages like CSS, JavaScript, etc. to show
interactive (or dynamic) web pages

Chapter 2 - Page Structure


An HTML document is structured using a set of nested tags. Each tag is enclosed
within <…> angle brackets and acts as a container for content or other HTML tags.
Let's take a look at a basic HTML document structure:

→DOCTYPE Declaration
<!DOCTYPE html>

The <!DOCTYPE html> declaration informs the web browser about the HTML version
being used. The latest version is HTML5. But if this changes in the future (maybe
10 years down the line), the doctype declaration will be helpful!

→HTML Root Element

Lessons 2
<html>

The <html> tag is the root element that encapsulates all the content on the page.

</html>

The </html> tag marks the end of the <html> section.

→Head Section
<head>

The <head> tag contains metadata and links to external resources like CSS and
JavaScript files.

</head>

The </head> tag marks the end of the <head> section.

→Title Tag
<title>Document</title>

The <title> tag sets the title of the web page, which is displayed in the browser's
title bar or tab.

→ Body Tag
<body>

The <body> tag contains the visible content of the web page. This is where text,
images, and other elements go.

</body>

Lessons 3
The </body> tag marks the end of the visible content of the web page.
Every HTML page should include at least these essential elements to define the
basic layout. In upcoming tutorials, we'll dive deeper into the fascinating world of
HTML.

→ Summary
The <!DOCTYPE html> tag specifies that the document is an HTML5 document.

The <html lang="en"> tag defines the document to be in English.

The <head> section contains metadata and the title of the webpage, which
appears in the browser's title bar.

The <body> section contains the content that will be displayed on the webpage.

The h1 and p are two types of tags. We will learn about more tags in the later
section

Chapter 3 - Basic Tags


If you want to build a beautiful website, tags are essential elements that help you
achieve that.

An HTML tag acts as a container for content or other HTML tags. Tags are words
enclosed within < and > angle brackets.

They serve as keywords that instruct the web browser on how to format and
display the content.

→Commonly used tags in HTML


Here are some commonly used tags in HTML. These are the only tags used 70%
of the time

Document Structure Tags


1. <!DOCTYPE html> : Specifies the document type.

2. <html> : Encloses the entire HTML document.

Lessons 4
3. <head> : Contains meta-information and links to scripts and stylesheets.

4. <body> : Contains the content of the web page.

Metadata Tags
1. <title> : Sets the title of the web page.

2. <meta> : Provides metadata such as character set, author, and viewport


settings.

3. <link> : Links external resources like stylesheets.

Text Formatting Tags


1. <p> : Paragraph.

2. <h1> , <h2> , <h3> , <h4> , <h5> , <h6> : Headings.

3. <strong> : Strong emphasis (typically bold).

4. <em> : Emphasis (typically italic).

5. <br> : Line break.

6. <hr> : Horizontal rule.

List Tags
1. <ul> : Unordered list.

2. <ol> : Ordered list.

3. <li> : List item.

Hyperlink and Media Tags


1. <a> : Anchor (used for links).

2. <img> : Image.

3. <audio> : Audio content.

4. <video> : Video content.

Form Tags

Lessons 5
1. <form> : Form.

2. <input> : Input field.

3. <textarea> : Text area.

4. <button> : Button.

5. <select> : Dropdown list.

6. <option> : Options within a <select> or <datalist> .

Table Tags
1. <table> : Table.

2. <tr> : Table row.

3. <td> : Table data cell.

4. <th> : Table header cell.

5. <thead> : Table header group.

6. <tbody> : Table body group.

7. <tfoot> : Table footer group.

Semantic Tags
1. <header> : Header section.

2. <footer> : Footer section.

3. <article> : Article.

4. <section> : Section.

5. <nav> : Navigation.

6. <aside> : Sidebar content.

→Paired and Unpaired HTML Tags


Well, that was a really long list. Don't worry we will study these in detail. In HTML,
tags can be broadly categorized into two types:

Lessons 6
1. Paired Tags (Container Tags)
These are tags that come in pairs, consisting of an opening tag and a
corresponding closing tag. The content goes between these two tags.

Opening Tag: The opening tag starts with < and ends with > . For
example, <p> .

Closing Tag: The closing tag also starts with < but includes a forward
slash / before the tag name, and ends with > . For example, </p> .

Examples:
Paragraphs: <p>This is a paragraph.</p>

Headings: <h1>This is a heading.</h1>

2. Unpaired Tags (Self-Closing Tags or Stand-Alone Tags)


These are tags that don't require a closing tag. They are self-contained,
encapsulating all the information within a single tag.

Self-Closing Tag: A self-closing tag starts with < and ends with /> (though
the / is optional in HTML5). For example, <img /> or <br> .

Note: Later if you happen to use react or a framework like Next.js, you will have to
close the tag like this <br/> <hr/> . So it is better to cultivate the habit!

Examples of self-closing tags:


Line Break: <br/>

Horizontal Rule: <hr/>

Image: <img src="image.jpg" alt="An example image"/>

Chapter 4 - Link & Script Tags


The <link> and <script> tags are essential elements within an HTML
document's <head> section. They serve various purposes, like linking external
stylesheets or including JavaScript files.

Lessons 7
→The <link> Tag
The <link> tag is commonly used to link external stylesheets to an HTML
document. It's a self-closing tag, meaning it doesn't require a closing tag.

Below is an example HTML code snippet that includes a <link> tag to link an
external stylesheet:

<link rel="stylesheet" type="text/css" href="styles.css">

→The <script> Tag


The <script> tag is used to include JavaScript code or files in an HTML document.
Unlike the <link> tag, the <script> tag must be closed with a </script> tag.
Below is an example HTML code snippet that includes a <script> tag to link an
external JavaScript file:

<script src="script.js" type="text/javascript"></script>

Chapter 5 - Image Tags


Images play a crucial role in enhancing web pages by providing a visual context
that complements textual content. In HTML, the <img> tag is used to embed
images into web pages.

→Basic Syntax for Embedding Images


This is how the syntax to embed an image in html looks like:

<img src="image's path" />

→Key Features of the <img> Tag


It's a self-closing tag, meaning it doesn't require a corresponding closing tag.

Lessons 8
Commonly used attributes include the "alt" attribute for image descriptions
and the "src" attribute for specifying the image location.

Supports various image formats including PNG, JPEG, JPG, and GIF.

→Setting Mandatory Attributes


The "src" and "alt" attributes are essential for the proper functioning of
the <img> tag.

src attribute: Specifies the path to the image file.

alt attribute: Provides a text description for the image.

<img src="images/profile_picture.jpg" alt="Profile Picture"


/>

Note: To find the image's location, right-click on the image, go to properties, and
check the location field.

→Setting Image Dimensions


Although dimensions can be set using the "width" and "height" attributes in
the <img> tag, modern best practices recommend using CSS for this purpose.

<img src="image.png" alt="Description" width="300" height


="100" />

Setting the width and height attributes for images in HTML can have a positive
impact on Search Engine Optimization (SEO). Specifying these dimensions in
the <img> tag allows browsers to allocate the correct amount of space on a web
page even before the image is fully loaded. This prevents layout shifts, improving
the Cumulative Layout Shift (CLS) score—a key metric in Google's Core Web
Vitals. A better CLS score can lead to a higher page ranking in search engine
results.

Note: Styling dimensions and other properties are now more commonly managed
through CSS for better flexibility and maintainability.

Lessons 9
Chapter 6 - Pre Tag
The <pre> tag serves as an indispensable tool in HTML for displaying
preformatted text, such as code snippets in various programming languages.

→What Does the <pre> Tag Do?


The <pre> tag preserves the original formatting of text, making it an excellent
choice for displaying code where spacing and indentation are key.

→Syntax for Using the <pre> Tag

<pre>
<!-- code snippet in any programming language -->
</pre>

→Displaying a Simple Python Program and Its Output


In this section, we will use HTML to display a simple Python program that prints
'Hello, World!' to the console. Don't worry, you don't need to know Python; we're
just showing how to display the program using the HTML <pre> tag.

Python Program

<pre>
# A simple Python program to print "Hello, World!"
def main():
print("Hello, World!")

if __name__ == "__main__":
main()
</pre>

Program Output
This HTML code will display the program exactly as it is, preserving spaces and
new lines. We'll use the <pre> tag to achieve this 'preformatted' display, as shown

Lessons 10
below.

# A simple Python program to print "Hello, World!"


def main():
print("Hello, World!")

if __name__ == "__main__":
main()

Chapter 7 - Anchor Tag


Links are fundamental to navigating the web. In HTML, links are created using
the <a> tag, also known as the Anchor tag.

→Key Characteristics of HTML Links


Specified by the <a> tag.

Also known as hyperlinks.

Used to link one document to another.

Includes a closing tag </a> .

→Syntax of HTML Links

<a href="Your specified path">


content
</a>

→Essential Attributes of the Anchor Tag


HTML links primarily use two attributes:

href attribute: Defines the URL the link points to.

target attribute: Specifies where to open the linked document.

Lessons 11
→Target Attribute Values
_blank: Opens the linked document in a new window or tab.

_top: Opens document in the full body of the window.

_self: Opens document in the same window or tab (default behavior).

_parent: Opens the linked document in the parent frame.

→Linking to Specific Page Sections


To link to a specific section of a webpage, you can:

Use the name or id attribute of the target section.

Use a hyperlink with a hash (#) followed by the target id or name.

Chapter 8 - List
Our day-to-day lives often involve the use of lists. For example, when we go
shopping, the bill we receive includes a list of all the items we've purchased. In a
similar manner, web developers use lists to neatly display data on websites.

→Types of HTML Lists


HTML provides different types of lists to display data in various forms. Each list
contains one or more list items.

Unordered List: Displays items using bullets.

Ordered List: Displays items in a numerical sequence, and supports various


numbering styles like Arabic numerals, Roman numerals, and so on.

Definition List: Organizes items in a format similar to a dictionary, with terms


and their corresponding definitions.

→HTML Unordered List


Basic Example

Lessons 12
<ul>
<li>Pen</li>
<li>Pencil</li>
<li>Eraser</li>
</ul>

Output:
Pen

Pencil

Eraser

Customizing Bullet Points with 'type' Attribute


You can specify the style of bullet points using the type attribute. It supports three
values:

disc - default bullet style

square

circle

Example Using Square Bullets:

<ul type="square">
<li>Notebook</li>
<li>Marker</li>
</ul>

→HTML Ordered List


An ordered list is a list of items that are arranged in a specific, sequential order.
Each item in the list is usually numbered to indicate its position in the sequence.
Ordered lists are commonly used when the sequence of the items is important,
such as in step-by-step instructions or rankings.

Lessons 13
Basic Example

<ol>
<li>Mango</li>
<li>Orange</li>
<li>Litchi</li>
</ol>

Output:
1. Mango

2. Orange

3. Litchi

Setting the 'type' Attribute


The type attribute specifies the style of numbering. You have several options:

1. Uppercase Roman Numerals: Use type="I"

2. Lowercase Roman Numerals: Use type="i"

3. Arabic Numerals: Use type="1" (This is the default if the type attribute is not
specified)

4. Lowercase Alphabetical Letters: Use type="a"

5. Uppercase Alphabetical Letters: Use type="A"

Setting the 'start' Attribute


The start attribute specifies the starting number for the list.

<ol type="A" start="3">


<li>Pen</li>
<li>Pencil</li>
</ol>

Output:

Lessons 14
3. Pen

4. Pencil

→HTML Definition Lists


A Definition List in HTML is used to represent a list of terms along with their
corresponding descriptions or definitions. The Definition List is created using
the <dl> (Definition List) element, which wraps around one or more pairs
of <dt> (Definition Term) and <dd> (Definition Description) elements.

Definition List Example


Here's a simple example to illustrate:

<h1>HTML Definition List</h1>


<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language: The standard language for
creating web pages.</dd>
<dt>CSS</dt>

Lessons 15
<dd>Cascading Style Sheets: A stylesheet language used f
or describing the .</dd>
<dt>JavaScript</dt>
<dd>A programming language commonly used in web developm
ent to add features.</dd>
</dl>

Chapter 9 - Table
HTML tables allow you to arrange data like text, images, and links in rows and
columns. You use the <table> tag to start and end a table.

→Key Elements of HTML Table


<table> : Defines the table itself.

<tr> : Used for table rows.

<th> : Used for table headings.

<td> : Used for table cells (data).

→Basic Table Structure

<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Harry</td>
<td>100</td>
</tr>
</table>

→rowspan and colspan Attributes

Lessons 16
Rowspan: If you want a table cell to span multiple rows, you can use
the rowspan attribute.

<td rowspan="value">

Colspan: If you want a table cell to span multiple columns, you can use
the colspan attribute.

<td colspan="value">

→Visual Representation of Rowspan and Colspan

→Adding a Caption
To add a title to your table, you can use the <caption> element. This element helps
both in terms of SEO and accessibility.

<table>
<caption>Student Details</caption>
<!-- Rest of the table here -->
</table>

→Table Headers and Footers


Besides <th> for individual header cells, HTML tables allow you to group header
or footer content using <thead> and <tfoot> .

Lessons 17
<table>
<thead>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>

→Column Groups
You can use the <colgroup> and <col> elements to apply styles to an entire column
in an HTML table.

<table>
<colgroup>
<col style="background-color:yellow">
</colgroup>
<!-- rest of the table -->
</table>

Chapter 10 - Core Web Vitals


Core Web Vitals are the subset of Web Vitals that apply to all web pages, should
be measured by all site owners, and will be surfaced across all Google tools. Each
of the Core Web Vitals represents a distinct facet of the user experience, is
measurable in the field, and reflects the real-world experience of a critical user-
centric outcome.

The metrics that make up Core Web Vitals will evolve over time. The current set
for 2020 focuses on three aspects of the user experience—loading, interactivity,
and visual stability—and includes the following metrics (and their respective
thresholds):

Lessons 18
Largest Contentful Paint (LCP): measures loading performance. To provide a
good user experience, LCP should occur within 2.5 seconds of when the page
first starts loading.

Interaction to Next Paint (INP): measures interactivity. To provide a good user


experience, pages should have a INP of 200 milliseconds or less.

Cumulative Layout Shift (CLS): measures visual stability. To provide a good


user experience, pages should maintain a CLS of 0.1. or less.

To ensure you're hitting the recommended target for these metrics for most of
your users, a good threshold to measure is the 75th percentile of page loads,
segmented across mobile and desktop devices.
Tools that assess Core Web Vitals compliance should consider a page passing if it
meets the recommended targets at the 75th percentile for all three of the Core
Web Vitals metrics.

Lessons 19
Chapter 11 - Forms and Input Tags
→Input Types
Input types in HTML forms are the backbone of interactive web applications. They
allow users to send information to web servers for various purposes like
searching, logging in, or providing feedback. In this blog, we'll explore common
HTML input types: text, password, radio, and checkbox.

→Text Input
The text input type is the most basic form of input and is widely used for
collecting simple text data.

<input type="text" name="username" placeholder="Enter your us


ername">

In the above example, the placeholder attribute provides a hint to the user about
what to enter.

→Password Input
The password input type is similar to the text type but hides the characters
entered by the user for security reasons.

<input type="password" name="password" placeholder="Enter you


r password">

→Radio Buttons
Radio buttons are used when you want the user to select only one option from a
set of choices.

→Note
if we want that user can only choose one of the radio button , then we have to
put the same word in the name tag .

Lessons 20
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

→Checkbox
Checkboxes allow the user to select multiple options from a set.

<input type="checkbox" id="subscribe" name="subscribe" value


="yes">
<label for="subscribe">Subscribe to newsletter</label>

→More input types


Here is a comprehensive list of input types you can use in html

Input Type Description

text Allows the user to type a single line of text.

password Allows the user to type a password.

submit Represents a button that, when pressed, submits the form.

Represents a button that, when pressed, resets all the form controls to
reset
their initial values.

Represents an option in a set of options that are mutually exclusive


radio
with each other.

Represents an option in a set that may be selected independently of


checkbox
other options.

button Represents a clickable button.

color Allows the user to select a color.

date Allows the user to select a date.

datetime-local Allows the user to select a date and time with no time zone.

email Allows the user to enter an email address.

file Allows the user to select one or more files from their device storage.

Lessons 21
hidden Represents a value that is not displayed but is submitted to the server.

image Defines an image that acts as a submit button.

month Allows the user to select a month and year.

number Allows the user to enter a number.

range Allows the user to select a number from a range.

search Allows the user to enter a search query string.

tel Allows the user to enter a telephone number.

time Allows the user to select a time.

url Allows the user to enter a URL.

week Allows the user to select a week.

→The Textarea Element


The textarea element is used when you need multiline text input from the user.
This is particularly useful for comments, reviews, or any other type of input where
the length is unpredictable.

<textarea name="comment" rows="4" cols="50">


Enter your comment here...
</textarea>

The rows and cols attributes define the visible dimensions of the textarea.

→The Select Element


The select element creates a dropdown menu for the user. It is useful when you
have a predefined list of options for the user to choose from.

<select name="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>

Each option inside the select tag represents an item in the dropdown list.

Lessons 22
→action
The action attribute specifies the URL where the form data should be sent after
submission.

<form action="/submit.php" method="POST"></form>

→method
The method attribute defines how data is sent. The two most common methods
are GET and POST .

<form action="/submit.php" method="POST"></form>

→placeholder
This attribute provides a hint to the user as to what can be entered in the field.

<input type="text" placeholder="Enter your username">

→required
The required attribute makes a field mandatory to fill out.

<input type="text" required>

→pattern
The pattern attribute specifies a regular expression that the input must match to
be valid.

<input type="text" pattern="[a-zA-Z0-9]+">

Chapter 12 - ID & Classes

Lessons 23
HTML offers multiple ways to select and style elements. Two of the most
commonly used selectors are IDs and Classes. This blog explores what they are,
how to use them, and their differences.

→What is an ID?
An ID is an attribute, a unique identifier assigned to only one HTML element within
a page. It is often used for unique styling and JavaScript manipulations.

<div id="myUniqueID">This is a div with an ID.</div>

→What are Classes?


The class attribute lets you give the same name to multiple HTML elements. That
way, you can easily change their look or behavior all at once. Classes are not
unique and can be assigned to multiple elements. They are generally used for
applying the same styles or behaviors to a group of elements.

<div class="myClass">This is a div with a class.</div>


<p class="myClass">This is a paragraph with the same class.</
p>

→The Style Tag


The style tag in HTML is used to include embedded CSS (Cascading Style
Sheets) within an HTML document. It is commonly placed within
the <head> section of the HTML file, although it can technically be used in
the <body> as well. The style tag allows you to define the look and feel of various
HTML elements on the page, including their colors, sizes, margins, and other
visual styles.
Here's a simple example:

<!DOCTYPE html>
<html>
<head>

Lessons 24
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>

→Using IDs and Classes in CSS


In CSS, elements with IDs are selected using a hash (#) symbol before the ID, and
elements with classes are selected using a dot (.) before the class name.

/* CSS for ID */
#myUniqueID {
background-color: yellow;
}

/* CSS for Class */


.myClass {
font-size: 18px;
}

→Differences Between IDs and Classes


Uniqueness: IDs are unique, and classes can be reused.

JavaScript: IDs are often used for JavaScript operations.

Styling: Both can be used for styling, but IDs have higher specificity.

Chapter 13 - Video & Audio Tag


This tutorial aims to provide a comprehensive guide on
using <video> and <audio> tags in HTML to embed media files.

Lessons 25
→The <video> Tag
The <video> tag is used to embed video files in an HTML document. It supports
multiple attributes to control the video playback.
Example usage:

<video src="video.mp4" controls></video>

Attributes for <video> Tag


src: Specifies the path to the video file.

controls: Adds video controls, like play, pause, and volume.

autoplay: Automatically starts playing the video when the page loads.

loop: Repeats the video once it ends.

muted: Mutes the video by default.

poster: Specifies an image to be displayed before the video starts playing.

width and height: Specifies the dimensions of the video.

→ Tip - if video does not autoplay then we have to mute the video for playing .

→The <audio> Tag


The <audio> tag is used to embed audio files in an HTML document. It also
supports multiple attributes for control.
Example usage:

<audio src="audio.mp3" controls></audio>

Attributes for <audio> Tag


src: Specifies the path to the audio file.

controls: Adds audio controls, like play, pause, and volume.

autoplay: Automatically starts playing the audio when the page loads.

Lessons 26
loop: Repeats the audio once it ends.

muted: Mutes the audio by default.

preload: Specifies if and how the audio should be loaded when the page loads
('auto', 'metadata', 'none').

Chapter 14 - I Frames
An iFrame is an HTML element that enables an inline frame for the embedding of
external content. Essentially, you can load another web page within a designated
area of your current webpage.

→Basic Syntax
The basic syntax of an iFrame is quite straightforward:

<iframe src="URL" width="width" height="height"></iframe>

→Attributes of iFrame
Several attributes can enhance the functionality of an iFrame:

src: Specifies the URL of the page to embed.

height and width: Define the dimensions.

frameborder: Indicates whether to display a border.

scrolling: Controls the scrollbars.

name: For targeting the iFrame in JavaScript.

→Practical Examples
Embedding a YouTube Video

Lessons 27
<iframe src="https://www.youtube.com/embed/VIDEO_ID" framebor
der="0" allowfullscreen></iframe>

→Embedding Google Maps

<iframe src="https://maps.google.com/maps?q=LOCATION&output=e
mbed" frameborder="0"></iframe>

Chapter 15 - SVG
SVG stands for Scalable Vector Graphics. Unlike raster images like PNGs or JPGs,
SVGs are not pixel-based. They're composed of vectors—mathematical formulas
that describe shapes, paths, and fills. This means SVGs can be resized without
losing quality.

→Note
if we want to show svg file through the image tag , then we have to add a attribute
in the svg tag into the .svg file . Attribute → xmlns="http://www.w3.org/2000/svg"

→How to Embed SVG in HTML


SVG can be embedded in HTML in several ways:

1. Inline SVG: Directly writing the SVG XML code within HTML.

2. Using an <img> tag: Point the src attribute to an SVG file.

3. Using CSS: Setting SVG as a background image in a CSS file.

→Inline SVG Example

<svg height="100" width="100">


<circle cx="50" cy="50" r="40" stroke="black" stroke-

Lessons 28
width="3" fill="red" />
</svg>

→<img> Tag Example

<img src="image.svg" alt="Sample SVG">

→CSS Background Example

.background {
background-image: url('image.svg');
}

→SVG Attributes
SVG comes with a set of attributes to control its behavior:

width and height: To set the dimensions.

viewBox: To set the coordinate system.

fill and stroke: To set the colors.

Chapter 16 - Semantic Tags


Semantic tags add meaning to your HTML. They tell both the browser and the
developer what kind of content is being presented.
Here are some of the key semantic tags you must know about:

1. <header> : Used to represent the top section of a web page, often containing
headings, logos, and navigation.

2. <nav> : Signifies a navigation menu on a web page.

3. <article> : Indicates a self-contained piece of content, such as a blog post or


news article.

Lessons 29
4. <section> : Represents a thematic grouping of content on a web page.

5. <aside>: Typically used for sidebars or content that is tangentially related to


the main content.

6. <footer> : Represents the footer of a web page, usually containing copyright


information and contact details.

7. <figure> and <figcaption> : Used for embedding images, diagrams, or charts,


along with a caption.

8. <main> : Signifies the main content area of a web page.

9. <time> : Used to represent time-related information, like dates and times.

Why Use Semantic Tags?


They enhance SEO, improve accessibility, and make your code easier to read and
maintain.

Lessons 30
Chapter 17 - Entities Tags
HTML entities are a crucial part of HTML markup language. They enable you to
display characters that are reserved in HTML or that aren't readily available on the
keyboard. In this blog, we'll explore what HTML entities are, their types, and how
to use them.

→Why Use HTML Entities?


Here are some reasons:

Reserved Characters: Characters like <, >, and & are reserved in HTML.

Special Symbols: For symbols like ©, ®, or mathematical symbols.

Non-Breaking Spaces: To create white spaces that won't break into a new
line.

→Common HTML Entities


&lt; for <
&gt; for >
&amp; for &
&nbsp; for a non-breaking space
&copy; for ©

→How to Use HTML Entities


Entities can be implemented easily within HTML code. Here are some examples:

Using Reserved Characters

<p>The price is 10 &lt; 20.</p>

Displaying Special Symbols

<p>Copyright &copy; 2023.</p>

Lessons 31
Creating Non-Breaking Spaces

<p>This is an example&nbsp;text.</p>

Lessons 32

You might also like