Scribd
Upload
6 views39 pages

HTML

HTML, or HyperText Markup Language, is the standard language for creating web pages, using tags to structure content like text, images, and links. The document outlines key concepts including HTML document structure, semantic HTML, attributes, forms, and best practices for accessibility and SEO. It also covers how to integrate CSS and JavaScript, ensuring responsive design and cross-browser compatibility.

Uploaded by

isbahkhan438
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views39 pages

HTML

HTML, or HyperText Markup Language, is the standard language for creating web pages, using tags to structure content like text, images, and links. The document outlines key concepts including HTML document structure, semantic HTML, attributes, forms, and best practices for accessibility and SEO. It also covers how to integrate CSS and JavaScript, ensuring responsive design and cross-browser compatibility.

Uploaded by

isbahkhan438
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

HTML5

Introduction to HTML

HTML, or HyperText Markup Language, is the standard language used to create web pages.
Think of it as the basic building block of the web. When you visit a website, what you see on the
page—like text, images, buttons, and links—is all put together using HTML.

Key Points to Understand:

1.​ What is HTML?


○​ HTML is a language that tells a web browser (like Chrome, Firefox, or Safari)
how to display the content of a web page.
○​ It’s called a "markup" language because it uses tags to mark up different parts of
the content, like paragraphs, headings, lists, and images.
2.​ How Does HTML Work?
○​ HTML is made up of elements, which are the basic units of an HTML document.
Each element is defined by a tag.
○​ Tags are keywords enclosed in angle brackets, like <tag>. Most tags come in
pairs: an opening tag <p> and a closing tag </p>. The content goes between
these tags.
○​ For example, <p>This is a paragraph.</p> creates a paragraph of text.
3.​ The Structure of an HTML Document
○​ A basic HTML document has a simple structure:
■​ <!DOCTYPE html>: This tells the browser that the document is written in
HTML5, the latest version of HTML.
■​ <html>: This is the root element of an HTML page. Everything inside this
tag is part of the web page.
■​ <head>: This section contains information about the page, like its title
and links to stylesheets (CSS files).
■​ <body>: This is where the content of the page goes, like text, images,
and links. What you see in the browser is usually inside the <body> tag.
4.​ Why Learn HTML?
○​ HTML is essential for creating websites. Whether you want to build a personal
blog, a portfolio, or even a full-fledged business website, HTML is where you
start.
○​ It's easy to learn: HTML is one of the simplest coding languages to pick up. You
don’t need any prior programming experience to get started.
○​ It’s widely used: Knowing HTML is a valuable skill. Even if you don't become a
web developer, understanding HTML can help you customize websites, create
email templates, and understand how the web works.
5.​ What Can You Do with HTML?
○​ Create Text Content: You can format text with headings, paragraphs, lists, and
more.
○​ Add Images and Media: HTML lets you embed images, videos, and audio on
your page.
○​ Link Pages Together: You can create hyperlinks to connect different pages or
websites.
○​ Structure Your Content: With HTML, you can organize content into sections,
articles, headers, footers, etc.

When learning HTML, there are several other important concepts and practices that
complement the basic understanding of HTML tags. These concepts help you create
well-structured, accessible, and visually appealing web pages. Here's a detailed guide:

1. HTML Document Structure

●​ Doctype Declaration: Always start an HTML document with <!DOCTYPE html>. This
tells the browser that you're using HTML5, which is the latest version of HTML.
●​ HTML Document: The entire HTML document is enclosed within the <html> tag. Inside
it, there are two main sections:
○​ <head>: Contains meta-information about the document, like its title, character
set, linked CSS files, and JavaScript files.
○​ <body>: Contains all the content that will be visible to the user, such as text,
images, links, and other elements.

2. Character Encoding

●​ Meta Charset: Use <meta charset="UTF-8"> in the <head> section to specify the
character encoding. UTF-8 is the most common and supports a wide range of
characters, including special symbols and characters from different languages.

3. Semantic HTML

●​ Semantic Tags: Semantic HTML refers to using HTML tags that describe the meaning
of the content. Examples include:
○​ <header>: Represents the header of a document or section.
○​ <footer>: Represents the footer of a document or section.
○​ <nav>: Represents navigation links.
○​ <article>: Represents a self-contained piece of content, like a blog post.
○​ <section>: Represents a section of content.
○​ <aside>: Represents content that's tangentially related to the main content, like
a sidebar.
○​ <main>: Represents the main content of the document.
●​ Why It Matters: Semantic tags make your HTML more readable for humans and
machines (like search engines and screen readers), improving accessibility and SEO.

4. HTML Attributes

●​ Attributes: Attributes provide additional information about HTML elements. They are
written within the opening tag and usually come in name-value pairs like
name="value".
●​ Common Attributes:
○​ id: A unique identifier for an element. Used for styling with CSS and for linking
within the page with anchors.
○​ class: Used to group elements for styling with CSS or for selecting them with
JavaScript.
○​ src: Specifies the source of an embedded object, like an image or script.
○​ href: Specifies the destination of a link.
○​ alt: Provides alternative text for images, which improves accessibility.
○​ title: Provides extra information about the element, usually displayed as a
tooltip.

5. Links and Navigation

●​ Hyperlinks: Links are created using the <a> tag. The href attribute defines the
destination URL.
●​ Types of Links:
○​ External Links: Links to other websites. Example: <a
href="https://www.example.com">Visit Example</a>.
○​ Internal Links: Links to other pages within your site. Example: <a
href="about.html">About Us</a>.
○​ Anchor Links: Links that jump to a specific part of the same page. Example: <a
href="#section1">Go to Section 1</a>.
●​ Navigation: Use the <nav> tag to group a set of navigation links. This helps search
engines and screen readers identify the main navigation of the page.

6. Forms

●​ Form Basics: Forms are used to collect user input. A form is created using the <form>
tag.
●​ Form Elements: Common form elements include:
○​ <input>: A versatile tag used for various types of input, such as text, email,
password, and more.
○​ <textarea>: For multi-line text input.
○​ <select>: For drop-down menus.
○​ <button>: For clickable buttons.
●​ Form Attributes:
○​ action: The URL where the form data will be sent.
○​ method: The HTTP method used to send the form data (GET or POST).
●​ Labels: Use the <label> tag to associate a label with a form element. This improves
accessibility by making it easier for users to understand what input is required.

7. Images and Multimedia

●​ Images: Use the <img> tag to embed images. The src attribute specifies the image file
location, and the alt attribute provides alternative text.
●​ Responsive Images: Use the srcset attribute to provide different image files for
different screen sizes, ensuring the image looks good on all devices.
●​ Multimedia:
○​ Videos: Embed videos using the <video> tag. The controls attribute allows
the user to play, pause, and control the video.
○​ Audio: Embed audio using the <audio> tag. Like videos, you can add
controls for user interaction.

8. Tables

●​ Table Structure: Tables are created using the <table> tag. Inside a table:
○​ <tr> defines a table row.
○​ <th> defines a header cell.
○​ <td> defines a standard cell.
●​ Table Accessibility: Use the scope attribute in <th> tags to clarify whether the header
applies to a row or a column. Use <caption> to describe the table's content.

9. Lists

●​ Ordered Lists: Use the <ol> tag for ordered lists, where each item is numbered.
●​ Unordered Lists: Use the <ul> tag for unordered lists, where each item is bulleted.
●​ List Items: Each item in a list is defined by the <li> tag.

10. Comments

●​ Adding Comments: Use <!-- Comment goes here --> to add comments in your
HTML code. Comments are not displayed on the webpage but help you and others
understand the code. (Write (Ctrl+/) to comment out a line)
11. Best Practices

●​ Code Readability:
○​ Indentation: Use consistent indentation (e.g., 2 or 4 spaces) to make your HTML
code more readable.
○​ Line Breaks: Use line breaks to separate different sections of your HTML
document.
○​ Meaningful Names: Use meaningful id and class names that describe the
content or purpose of the element.
●​ Accessibility:
○​ Alt Text: Always provide alt text for images to ensure that visually impaired
users understand the content.
○​ Labels: Use <label> for form inputs to improve accessibility for screen readers.
○​ Keyboard Navigation: Ensure that your website can be navigated using the
keyboard alone (use tabindex for custom navigation sequences).
●​ SEO (Search Engine Optimization):
○​ Meta Tags: Use appropriate meta tags like description, keywords, and
robots to influence how search engines perceive your site.
○​ Headings: Use heading tags (<h1> to <h6>) appropriately to structure your
content. This helps search engines understand the hierarchy of your content.
●​ Cross-Browser Compatibility: Test your website in different browsers (Chrome,
Firefox, Safari, Edge) to ensure it looks and works as expected in all of them.

12. Responsive Design

●​ Viewport Meta Tag: Use <meta name="viewport"


content="width=device-width, initial-scale=1.0"> in the <head> section
to ensure your website scales correctly on different devices.
●​ Media Queries: Use CSS media queries to apply different styles for different screen
sizes. This allows you to create a responsive design that works well on both mobile and
desktop devices.

13. Using CSS with HTML

●​ Inline CSS: Use the style attribute directly within an HTML tag to apply styles.
Example: <p style="color: red;">This is a red paragraph.</p>.
●​ Internal CSS: Use the <style> tag within the <head> section to apply CSS styles to
the entire document.
●​ External CSS: Link an external CSS file using the <link> tag in the <head> section.
Example: <link rel="stylesheet" href="styles.css">.
●​ CSS Selectors: Use CSS selectors to target HTML elements for styling. Common
selectors include:
○​ element: Targets all elements of a type. Example: p { color: blue; }
○​ .class: Targets all elements with a specific class. Example: .intro {
font-size: 20px; }
○​ #id: Targets the element with a specific id. Example: #header {
background-color: gray; }

14. Using JavaScript with HTML

●​ Inline JavaScript: You can add JavaScript directly within an HTML tag using the
onclick, onmouseover, and other event attributes.
●​ Internal JavaScript: Use the <script> tag within the <head> or <body> section to
add JavaScript code.
●​ External JavaScript: Link an external JavaScript file using the <script> tag with the
src attribute. Example: <script src="script.js"></script>.

15. HTML Validation

●​ Validation: Use online HTML validators to check your code for errors. Validation ensures
that your HTML is correctly structured and adheres to web standards.

16. Version Control

●​ Using Git: Learn the basics of version control with Git. It allows you to track changes to
your HTML files, collaborate with others, and revert to previous versions if necessary.
●​ GitHub: Consider using GitHub to store your HTML projects online. It’s a platform for
version control and collaboration.

HTML TAGS

Main Structural Tags

1.​ <!DOCTYPE html>

Description: The <!DOCTYPE html> declaration is used to tell the web browser what version
of HTML the document is written in. It is not an HTML tag itself but an instruction to the browser
to ensure it interprets the document correctly. For HTML5, the declaration is simply <!DOCTYPE
html>, which is case-insensitive and should appear at the very beginning of every HTML
document.
Example:​
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

2.​ <html>

Description: The <html> tag is the root element of an HTML document, which means that all
other elements must be nested within it. This tag represents the entire HTML document and is
used to wrap all the content on the page. It includes both the <head> and <body> elements, as
well as any other elements within the document.

Example:​
​
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

3.​ <head>

Description: The <head> element is a container for metadata (data about the data) and other
elements that help define the structure, appearance, and behavior of the web page but are not
displayed directly in the browser window. Elements like <title>, <meta>, <link>, <style>,
and <script> are usually included within the <head> tag.

Example:​
​
<head>
<title>Document Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>

4.​ <title>

Description: The <title> element is used to define the title of the web page, which is
displayed on the browser's title bar or tab. It helps users understand what the page is about and
is also used by search engines as a key part of SEO (Search Engine Optimization).

Example:​
​
<title>Document Title</title>

5.​ <body>

Description: The <body> tag contains all the visible content of an HTML document, such as
text, images, links, forms, and other elements. Everything that you want users to see on your
web page must be placed inside the <body> tag.

Example:​
​
<body>
<p>Hello, World!</p>
</body>

Text Content Tags

6.​ <h1> to <h6>

Description: These tags represent different levels of headings in an HTML document, with
<h1> being the most important (usually the main heading) and <h6> being the least important.
Headings help organize the content, making it easier to read and navigate, and also assist
search engines in understanding the structure of your page.

Example:​
​
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
7.​ <p>

Description: The <p> tag defines a paragraph of text. A paragraph is a block of content
separated from other content by a line break or space. It's the most common way to structure
text on a web page.

Example:​
<p>This is a paragraph of text.</p>

8.​ <br>

Description: The <br> tag inserts a line break in the text, causing the content that follows it to
appear on the next line. It is a self-closing tag, meaning it doesn’t need an end tag.

Example:​
Line one<br>Line two

9.​ <hr>

Description: The <hr> tag is used to insert a horizontal line, which can be used to visually
separate content sections. Like <br>, it is a self-closing tag.

Example:​
<hr>

10.​<blockquote>

Description: The <blockquote> tag is used to define a section that is quoted from another
source. The content inside this tag is usually indented by default to signify that it is a block of
quoted text.

Example:​
<blockquote>
This is a blockquote.
</blockquote>

11.​<q>
Used to give quotation marks.
12.​<pre>

Description: The <pre> tag defines preformatted text, which means the content inside it will be
displayed exactly as it is written, preserving spaces, tabs, and line breaks. This tag is often used
for displaying code.

Example:​
<pre>
Line one
Line two
</pre>

13.​<address>

Description: The <address> tag is used to define contact information for the author or owner
of a document or an article. It typically includes details like names, physical addresses, email
addresses, or URLs. Browsers usually display the text in this tag in italic, and it may be styled
differently in some cases.

Example:​
<address>
123 Main St.<br>
Anytown, USA
</address>

14.​<cite>

Description: The <cite> tag is used to reference the title of a work, such as a book, a website,
or a film. Browsers typically display the content of the <cite> tag in italics. This tag helps
identify that the text refers to a title or a citation.

Example:​
<p><cite>The Great Gatsby</cite> by F. Scott Fitzgerald</p>

15.​<code>

Description: The <code> tag is used to display a small piece of computer code or inline code
snippets. By default, the text inside the <code> tag is displayed in a monospaced font, making it
easier to distinguish from regular text.

Example:​
<p>To print "Hello, World!" in Python, use <code>print("Hello,
World!")</code>.</p>
16.​<em>

Description: The <em> tag is used to emphasize text, which is usually displayed in italics by
default. The <em> tag not only styles the text but also conveys semantic emphasis, which is
important for accessibility tools like screen readers.

Example:​
<p>This is <em>emphasized</em> text.</p>

17.​<strong>

Description: The <strong> tag is used to give strong emphasis to text, which is usually
displayed in bold by default. Like <em>, the <strong> tag also adds semantic meaning,
indicating that the text is of greater importance.

Example:​
<p>This is <strong>strongly emphasized</strong> text.</p>

18.​<small>

Description: The <small> tag is used to reduce the size of the text, often for disclaimers,
copyright notices, or fine print. This tag indicates that the text is of lesser importance or detail.

Example:​
<p>This is <small>small</small> text.</p>

19.​<sub>

Description: The <sub> tag is used to define subscript text, which is text that appears slightly
below the normal line of text. It is often used in chemical formulas or mathematical expressions.

Example:​
<p>H<sub>2</sub>O</p>

20.​<sup>

Description: The <sup> tag is used to define superscript text, which appears slightly above the
normal line of text. It is commonly used for footnotes, exponents, or mathematical expressions.

Example:​
<p>E = mc<sup>2</sup></p>
21.​<i>

Description: The <i> tag is used to italicize text. It is typically used to indicate a span of text
that is stylistically different from normal text, such as foreign words, technical terms, or thoughts.

Example:​
<p>This is <i>italic</i> text.</p>

22.​<b>

Description: The <b> tag is used to bold text. It is typically used to draw attention to certain
words or phrases, but it doesn't convey any extra importance or emphasis in a semantic way.

Example:​
<p>This is <b>bold</b> text.</p>

23.​<u>

Description: The <u> tag is used to underline text. It was historically used to indicate that text
was linked (similar to <a>), but now it is used primarily for underlining text for stylistic purposes.

Example:​
<p>This is <u>underlined</u> text.</p>

24.​<del>

Description: The <del> tag is used to mark text that has been deleted or no longer relevant.
Browsers usually display this text with a strikethrough.

Example:​
<p><del>This text is deleted.</del></p>

25.​<ins>

Description: The <ins> tag is used to mark text that has been inserted or added. Browsers
usually display this text with an underline.

Example:​
<p><ins>This text is inserted.</ins></p>

26.​<s>
The strikethrough element indicates something that is no longer accurate or relevant (but that
should not be deleted). Visually the content of an <s> element will usually be displayed with a
line through the center.
27.​<abbr>
If you use an abbreviation or an acronym, then the <abbr> element can be used. A title attribute
on the opening tag is used to specify the full term.

28.​<dfn>
The first time you explain some new terminology (perhaps an academic concept or some
jargon) in a document, it is known as the defining instance of it. The <dfn> element is used to
indicate the defining instance of a new term.
29.​<mark>

Description: The <mark> tag is used to highlight text. Browsers usually display this text with a
yellow background, making it stand out from the surrounding text.

Example:​
<p>This is <mark>highlighted</mark> text.</p>

Lists

26.​<ul>

Description: The <ul> tag defines an unordered list, which is a list of items with no particular
order. Each item in the list is represented by the <li> tag, and by default, the list items are
displayed with bullet points.

Example:​
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
27.​<ol>

Description: The <ol> tag defines an ordered list, which is a list of items that are presented in
a specific order. Each item in the list is represented by the <li> tag, and by default, the list
items are displayed with numbers.

Example:​
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

28.​<li>

Description: The <li> tag defines a list item in both ordered (<ol>) and unordered (<ul>)
lists. Each <li> tag represents a single item in the list.

Example:​
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

29.​<dl>

Description: The <dl> tag defines a description list, which is used to group terms and
descriptions. This tag is often used for glossaries, definitions, or other types of lists that require
a term-description structure.

Example:​
<dl>
<dt>HTML</dt>
<dd>A markup language for creating web pages.</dd>
</dl>

30.​<dt>

Description: The <dt> tag is used to define a term or name in a description list (<dl>). Each
term is followed by one or more <dd> elements that define the description or definition of the
term.
Example:​
<dl>
<dt>HTML</dt>
<dd>A markup language for creating web pages.</dd>
</dl>

31.​<dd>

Description: The <dd> tag is used to define the description or definition of a term in a
description list (<dl>). It typically follows a <dt> element.

Example:​
<dl>
<dt>HTML</dt>
<dd>A markup language for creating web pages.</dd>
</dl>

Links

32.​<a>

Description: The <a> tag is used to create hyperlinks, which allow users to navigate from one
page to another. The href attribute within the <a> tag defines the destination URL of the link.
The link can be absolute or relative. (target = “ _main” to open next tab)

Example:​
<a href="https://www.example.com">Visit Example.com</a>
Adding link to email:
<a href="mailto:[email protected]">Email Jon</a>

Opening link in the new window:


<a href="http://www.imdb.com" target="_blank">
Linking to specific part of same page:

Linking to specific part of different website:


<a href="http:/www.htmlandcssbookcom/#bottom">

Images and Multimedia

33.​<img>

Description: The <img> tag is used to embed images in an HTML page. The src attribute
specifies the path to the image file, while the alt attribute provides alternative text for the
image, which is important for accessibility.

Example:​
<img src="image.jpg" alt="Description of image">

src:
This tells the browser where it can find the image file. This will usually be a relative URL pointing
to an image on your own site.

alt:
This provides a text description of the image which describes the image if you cannot see it.
title:
You can also use the title attribute with the <img> element to provide additional information
about the image.

height:
Height in pixels.

width:
Width in pixels.

Examples:
○​ <img src="images/quokka.jpg" alt="A family of quokka" title="The quokka is an
Australian marsupial that is similar in size to the domestic cat." />
○​ <img src="images/quokka.jpg" alt="A family of quokka" width="600" height="450"
/>
34.​<figure>

Description: The <figure> tag is used to group content like images, illustrations, diagrams,
code snippets, etc., along with their captions. This tag provides semantic meaning to the
content, indicating that it is a self-contained unit.

Example:​
<figure>
<img src="image.jpg" alt="Description of image">
<figcaption>Caption for the image</figcaption>
</figure>

35.​<figcaption>

Description: The <figcaption> tag is used to add a caption to a <figure> element. The
caption provides additional information or context about the content within the <figure>.

Example:​
<figure>
<img src="image.jpg" alt="Description of image">
<figcaption>Caption for the image</figcaption>
</figure>

36.​<audio>

Description: The <audio> tag is used to embed sound content in an HTML document. The tag
supports multiple audio formats and includes attributes like controls for playback controls.
Example:​
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

37.​<video>

Description: The <video> tag is used to embed video content in an HTML document. It
supports multiple video formats and can include playback controls, dimensions, and other
attributes.

Example:​
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

38.​<source>

Description: The <source> tag is used to specify multiple media resources for <audio> and
<video> elements. This allows the browser to select the best format it can support.

Example:​
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

39.​<track>

Description: The <track> tag is used to add text tracks (such as subtitles or captions) to
<video> or <audio> elements. It enhances accessibility by providing additional content like
subtitles or descriptions.

Example:​
<video controls>
<source src="video.mp4" type="video/mp4">
<track kind="subtitles" src="subtitles.vtt" srclang="en"
label="English">
</video>
40.​<iframe>

Description: The <iframe> tag is used to embed another HTML page within the current page.
It can be used to embed content like Google Maps, videos, or other web pages.

Example:​
<iframe src="https://www.example.com" width="600"
height="400"></iframe>

Tables

41.​<table>

Description: The <table> tag is used to create a table in an HTML document. Tables are used
to organize and display data in rows and columns.

Example:​
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

42.​<caption>

Description: The <caption> tag is used to add a title or caption to a table. The caption is
usually displayed above the table, providing context or explanation for the table's contents.

Example:​
<table>
<caption>Table Title</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

43.​<th>

Description: The <th> tag is used to define a header cell in a table. Header cells are typically
bold and centered by default, and they indicate the type of data in the column or row.

Example:​
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

44.​<tr>

Description: The <tr> tag is used to define a row in a table. A <tr> element contains one or
more <th> or <td> elements, representing the cells in that row.

Example:​
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
45.​<td>

Description: The <td> tag is used to define a standard data cell in a table. Each <td> element
represents one cell within a row of the table.

Example:​
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

46.​<thead>
Description: To wrap table head.

47.​<tbody>
Description: To wrap table body.

48.​<colgroup>

Description: The <colgroup> tag is used to group together one or more <col> elements,
which define column properties for an HTML table. This allows for better control over the
appearance and behavior of table columns.

Example:​
<table>
<colgroup>
<col span="2" style="background-color:lightgray">
</colgroup>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

49.​<col>

Description: The <col> tag is used within a <colgroup> element to specify column
properties like width, background color, or other styling for a table. Each <col> element applies
to a specific column or group of columns.

Example:​
<table>
<colgroup>
<col span="2" style="background-color:lightgray">
</colgroup>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

Forms

48.​<form>

Description: The <form> tag is used to create an HTML form for user input. Forms are used to
collect user data and send it to a server for processing. The action attribute specifies the
server endpoint, and the method attribute defines how data should be sent (e.g., GET or POST).

Form elements:

A.​ Input: Input type can be text, password, radio etc

E.g: <input type = “text” placeholder = “Enter name”>

Example:​
<form action="/action.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>

49.​<label>

Description: The <label> tag is used to define labels for <input> elements. The for
attribute in the <label> tag should match the id of the corresponding <input> element,
ensuring that clicking the label focuses on the input field.

E.g: radio buttons. (

<label for= “101”>

<input type = “radio” value = “class XI” name = “class” id = “101”> class XI

</label>

<label for= “102”>

<input type = “radio” value = “class XII” name = “class” id = “102”> class XII

</label>

Example:​
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>

50.​<input>

Description: The <input> tag is used to create various types of input fields, including text
boxes, checkboxes, radio buttons, and submit buttons. The type attribute defines the kind of
input field (e.g., text, password, checkbox, radio, submit).

Example:​
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
51.​<textarea>

Description: The <textarea> tag is used to create a multiline text input field. Unlike the
<input> tag, which is typically used for single-line inputs, the <textarea> allows users to
enter larger amounts of text.

Example:​
<form>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
</form>

52.​<select>

Description: The <select> tag is used to create a dropdown list. The <option> elements
within the <select> define the available options. The user can select one (or multiple) options
from the dropdown.

Example:​
<form>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
</select>
</form>

53.​<option>

Description: The <option> tag is used to define options within a <select> dropdown list.
Each <option> tag represents a single option that users can select.

Example:​
<form>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
</select>
</form>

54.​<button>

Description: The <button> tag is used to create a clickable button. The type attribute
determines the button's behavior, such as submit, reset, or button (for custom behavior).

Example:​
<form>
<button type="submit">Submit</button>
</form>

55.​<fieldset>

Description: The <fieldset> tag is used to group related elements within a form, providing a
visual boundary around them. It is often used in combination with the <legend> tag to provide
a caption for the group.

Example:​
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</fieldset>
</form>

56.​<legend>

Description: The <legend> tag is used to provide a caption or title for a <fieldset> group. It
helps users understand the purpose of the grouped elements.

Example:​
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</fieldset>
</form>
57.​<datalist>

Description: The <datalist> tag is used to provide an autocomplete feature for an <input>
element. It defines a list of options that the user can select from when typing into the input field.

Example:​
<form>
<label for="browser">Choose your browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
</form>

58.​<progress>

Description: The <progress> tag is used to represent the progress of a task, such as a
download or a form submission. The value attribute represents the current progress, and the
max attribute defines the total value.

Example:​
<progress value="70" max="100"></progress>

59.​<meter>

Description: The <meter> tag is used to display a scalar measurement within a known range,
such as a gauge or thermometer. The value attribute represents the current measurement, and
the min and max attributes define the range.

Example:​
<meter value="2" min="0" max="10">2 out of 10</meter>

Scripting

60.​<script>

Description: The <script> tag is used to embed JavaScript code within an HTML document.
It can be placed in the head or body of the document, and it can also reference external
JavaScript files using the src attribute.
Example:​
<script src="script.js"></script>

61.​<noscript>

Description: The <noscript> tag is used to provide alternative content for users who have
disabled JavaScript in their browsers or whose browsers do not support JavaScript. This tag
ensures that the website remains functional even without JavaScript.

Example:​
<noscript>Your browser does not support JavaScript.</noscript>

Meta Information and Document Structure

62.​<meta>
○​ Description: The <meta> tag provides metadata about the HTML document,
such as the character set, author, description, and viewport settings. This
information is used by browsers, search engines, and other services.

Example:​
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

63.​<base>

Description: The <base> tag specifies the base URL for all relative URLs in an HTML
document. If a <base> tag is present, it must be within the <head> element and must precede
any other elements that contain URLs.

Example:​
<base href="https://www.example.com/">
<a href="page.html">Go to page</a>

64.​<link>

Description: The <link> tag is used to link external resources, such as stylesheets or icons,
to the HTML document. It is commonly used to load CSS files and is placed within the <head>
element.
Example:​
<link rel="stylesheet" href="styles.css">

65.​<style>

Description: The <style> tag is used to define internal CSS styles within an HTML document.
Styles within this tag apply to the entire document or specific elements, depending on the
selectors used.

Example:​
<style>
body {
background-color: lightblue;
}
</style>

66.​<head>

Description: The <head> tag is used to contain metadata and links to resources that are
relevant to the document but not part of its visible content. This includes the document's title,
meta tags, links to stylesheets, and scripts.

Example:​
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>

67.​<body>

Description: The <body> tag defines the main content of the HTML document, including text,
images, links, and other elements that are displayed to the user. Everything within the <body>
tag is visible to the user in the browser.

Example:​
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
68.​<title>

Description: The <title> tag defines the title of the HTML document, which is displayed in
the browser's title bar or tab. The title is also used by search engines to identify the page.

Example:​
<head>
<title>Page Title</title>
</head>

69.​<html>

Description: The <html> tag is the root element of an HTML document. All other HTML
elements must be descendants of this tag. The lang attribute can be used to specify the
language of the document.

Example:​
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

70.​<!DOCTYPE>

Description: The <!DOCTYPE> declaration is used to specify the document type and version of
HTML. In HTML5, the declaration is simple and does not reference a specific DTD (Document
Type Definition).

Example:​
<!DOCTYPE html>

Semantics
71.​<article>

Description: The <article> tag is used to represent a self-contained composition, such as a


blog post, news article, or forum post. It is a semantic element that indicates the content can
stand alone and be distributed independently.

Example:​
<article>
<h2>Article Title</h2>
<p>This is the content of the article.</p>
</article>

72.​<section>

Description: The <section> tag is used to define a section of a document, such as a chapter,
introduction, or grouping of content. Each <section> typically contains a heading (<h1>,
<h2>, etc.) to describe its content.

Example:​
<section>
<h1>Introduction</h1>
<p>This is the introduction section.</p>
</section>

73.​<nav>

Description: The <nav> tag is used to define a block of navigation links. This tag is intended
for major navigational sections, such as menus, table of contents, or other groups of links.

Example:​
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
74.​<aside>

Description: The <aside> tag is used to define content that is tangentially related to the main
content of the page, such as sidebars, pull quotes, or advertisements. It is often displayed as a
sidebar.

Example:​
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</aside>

75.​<header>

Description: The <header> tag is used to define the header section of a document or a
section within the document. It typically contains introductory content such as a logo, navigation,
or heading elements.

Example:​
<header>
<h1>Page Title</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

76.​<footer>

Description: The <footer> tag is used to define the footer section of a document or a section
within the document. It typically contains information such as the author, copyright, links to
related documents, or other relevant details.

Example:​
<footer>
<p>© 2024 Your Website. All rights reserved.</p>
</footer>

77.​<main>

Description: The <main> tag is used to define the main content of the document. This tag is
intended for the primary content that is unique to the page, excluding headers, footers, and
sidebars.

Example:​
<main>
<h1>Main Content</h1>
<p>This is the main content of the page.</p>
</main>

78.​<time>

Description: The <time> tag is used to represent a specific time, date, or both. It is a semantic
element that helps search engines and other tools understand time-related information.

Example:​
<p>Published on <time datetime="2024-08-10">August 10,
2024</time>.</p>

79.​<mark>

Description: The <mark> tag is used to highlight or mark text that is relevant or important. It is
commonly used for search results or to emphasize keywords within a document.

Example:​
<p>This is a <mark>highlighted</mark> word in a sentence.</p>

80.​<figure>

Description: The <figure> tag is used to encapsulate media content, such as images,
diagrams, or code snippets, along with a caption (<figcaption>). The content within a
<figure> is typically referenced within the main flow of the document but can stand alone.

Example:​
<figure>
<img src="image.jpg" alt="Description of image">
<figcaption>Caption for the image.</figcaption>
</figure>
81.​<figcaption>

Description: The <figcaption> tag is used to provide a caption or description for the content
within a <figure> element. It is typically placed as the first or last child of the <figure>.

Example:​
<figure>
<img src="image.jpg" alt="Description of image">
<figcaption>Caption for the image.</figcaption>
</figure>

Other

82.​<template>

Description: The <template> tag is used to define a block of content that can be reused or
cloned using JavaScript. Content within the <template> is not rendered until it is explicitly
instantiated.

Example:​
<template id="my-template">
<div class="alert">This is a reusable block of content.</div>
</template>

83.​<slot>

Description: The <slot> tag is used as a placeholder inside a web component for content that
can be passed in by the component's user. It allows for the creation of customizable
components with flexible content.

Example:​
<template id="my-component">
<div>
<slot name="header">Default Header</slot>
<p>Some content inside the component.</p>
</div>
</template>
84.​<canvas>

Description: The <canvas> tag is used to create a drawing area within an HTML document. It
provides an area where graphics can be drawn using JavaScript, making it ideal for creating
dynamic visual content like charts, games, or animations.

Example:​
<canvas id="myCanvas" width="200" height="100"></canvas>

85.​<svg>

Description: The <svg> tag is used to define vector-based graphics that can be scaled and
styled within an HTML document. SVG elements can include shapes, paths, text, and images,
and they are widely used for icons, diagrams, and complex graphics.

Example:​
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3"
fill="red" />
</svg>

86.​<math>

Description: The <math> tag is used to include mathematical notations and symbols in an
HTML document. It is part of the MathML (Mathematical Markup Language) and allows for the
precise representation of mathematical expressions.

Example:​
<math xmlns="http://www.w3.org/1998/Math/MathML">
<msup><mi>x</mi><mn>2</mn></msup>
</math>

87.​<iframe>

Description: The <iframe> tag is used to embed another HTML document within the current
document. It allows for the inclusion of content from another source, such as a video, map, or
webpage, within a frame on the page.

Example:​
<iframe src="https://www.example.com" width="600"
height="400"></iframe>
88.​<embed>

Description: The <embed> tag is used to embed external content, such as multimedia,
applications, or documents, into an HTML page. It is a versatile tag that can be used for
embedding videos, PDFs, Flash content, and more.

Example:​
<embed src="file.pdf" width="500" height="375" type="application/pdf">

89.​<object>

Description: The <object> tag is used to embed various types of content, such as images,
videos, applications, or interactive elements, into an HTML document. The <object> tag is
versatile and can be used for multimedia or as a fallback for unsupported content.

Example:​
<object data="movie.swf" type="application/x-shockwave-flash">
<embed src="movie.swf" type="application/x-shockwave-flash">
</object>

90.​<param>

Description: The <param> tag is used to define parameters for the <object> element. These
parameters can be used to control the behavior or appearance of the embedded content.

Example:​
<object data="movie.swf" type="application/x-shockwave-flash">
<param name="autoplay" value="true">
</object>

91.​<audio>

Description: The <audio> tag is used to embed audio content in an HTML document. It
provides native support for playing audio files directly within the browser and includes attributes
for controls, autoplay, and looping.

Example:​
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
92.​<video>

Description: The <video> tag is used to embed video content in an HTML document. It
provides native support for playing video files directly within the browser and includes attributes
for controls, autoplay, looping, and more.

Example:​
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

93.​<track>

Description: The <track> tag is used to specify text tracks for <video> and <audio>
elements. Text tracks can include subtitles, captions, or descriptions, and they enhance
accessibility and usability.

Example:​
<video controls>
<source src="movie.mp4" type="video/mp4">
<track kind="subtitles" src="subs_en.vtt" srclang="en"
label="English">
</video>

94.​<source>

Description: The <source> tag is used to specify multiple media resources for the <video>
or <audio> elements. By providing different formats or resolution, you can ensure compatibility
across different browsers and devices.

Example:​
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Other Important Information


●​ Use toggle word wrap (select line -> go to settings -> command palette -> toggle word
wrap) to break a line into parts to show on a single screen without scrolling.
●​ Right Click on a page and select inspect or view page source in order to view the html
code for that webpage.

Align
Tfoot
Div
span

You might also like