Scribd
Upload
31 views

HTML Notes

Uploaded by

bhutadapihu750
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
31 views

HTML Notes

Uploaded by

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

History of HTML

HTML, or HyperText Markup Language, is the fundamental building block of the web. It's used to
structure content on the internet. Below is an overview of the history of HTML, tracing its
development from its inception to the present.

Early Development (1980s)


 1980 : Tim Berners-Lee, a contractor at CERN, proposed a system for scientists to share
documents over the emerging internet.
 1989 : Berners-Lee wrote the first proposal for the World Wide Web. The proposal included
ideas for HTML, which was influenced by SGML (Standard Generalized Markup Language), a
system for annotating text in a way that is syntactically distinguishable from the text itself.

HTML Through the 1990s


 1991 : Tim Berners-Lee published the first description of HTML in a document called "HTML
Tags," which included 18 elements forming the initial version of HTML.
 1993 : The release of Mosaic, the first graphical browser, popularized the Web and HTML.
 1995 : HTML 2.0 was published as IETF RFC 1866, marking the first HTML specification to be
formally standardized.
 1997 : HTML 3.2 was published by the W3C, bringing more features like tables and applets. It
was the first version developed by the W3C after taking over from the IETF.
 1997 : HTML 4.0 was released, introducing CSS support to separate presentation from
content and improve accessibility.
 1999 : HTML 4.01 was published as a minor update to HTML 4.0, which would be the last
HTML specification for many years as focus shifted to XHTML.

The XHTML Interlude and HTML5


 2000s : XHTML, an XML-based version of HTML, was developed. XHTML 1.0 (2000) and
XHTML 1.1 (2001) aimed to replace HTML with an XML-compliant syntax, but faced
compatibility issues with existing web browsers.
 2004 : Frustrated by the W3C's direction focusing on XHTML and not addressing practical
web development issues, a group of developers from Apple, Mozilla, and Opera formed the
Web Hypertext Application Technology Working Group (WHATWG).
 2008 : WHATWG began work on HTML5, aiming to address web application needs and
everyday usage scenarios neglected by XHTML.
 2014 : HTML5 was finalized and published, bringing native multimedia support, new
semantic elements (like <article>, <section>, <nav>, and <footer>), and new scripting APIs.

Modern HTML
 2016 and beyond : HTML5.1 and HTML5.2 have been released, introducing minor
improvements and clarifications. The development of HTML now follows a "living standard"
model by WHATWG, meaning it is continuously updated based on practical needs and
implemented features. W3C and WHATWG agreed in 2019 to pursue a joint effort to produce
a living HTML and DOM standard to avoid the bifurcation of the web standards.
HTML has grown from a simple document formatting language to a complex system capable
of supporting a wide range of web applications. Its evolution is closely tied to the growth of
the internet itself, reflecting new technological advancements and changing web usage
patterns.

HTML Introduction
HTML, which stands for HyperText Markup Language, is the standard markup language used to
create web pages. It forms the structural foundation of all websites and is crucial for creating and
visually structuring content on the internet. HTML documents are the building blocks of a website,
allowing developers to organize text, images, videos, forms, and other elements into a coherent
layout that users can interact with via a web browser.

Core Concepts of HTML


 Elements and Tags : HTML uses 'elements' to define parts of a page. Each element is
enclosed in 'tags', typically a start tag and an end tag. For example, <p> and </p> are the
start and end tags for a paragraph.
 Attributes : Tags can have attributes that provide additional information about elements.
Attributes come in name-value pairs like class="text-style".
 Structure : A typical HTML document has a structured format that includes a <!DOCTYPE
html> declaration, a <html> tag, a <head> section (for metadata and links to scripts and
stylesheets), and a <body> section (which contains the actual content of the page).
 Semantics : HTML5 introduced semantic elements that describe their meaning to both the
browser and the developer, improving accessibility and SEO. Examples include <article>,
<section>, <nav>, and <header>.

Example of a Simple HTML Document

<!DOCTYPE html>

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Welcome to My Website</h1>

<p>This is a paragraph of text in my first web page.</p>

</body>

</html>
Why Learn HTML?
1. Foundation of Web Development : HTML is the starting point for web development.
Understanding HTML is essential before moving on to more complex web technologies like
CSS (for styling) and JavaScript (for interactive elements).
2. Ease of Learning : HTML is considered one of the easiest languages to learn in the coding
community, making it a great starting point for those new to programming.
3. Universal Tool : The skills learned in HTML are applicable across all platforms that use web
technology, whether for creating websites, designing email templates, or developing web
applications.

By mastering HTML, developers can effectively communicate their ideas and content through the
vast network of the World Wide Web, laying the groundwork for more advanced technologies and
interactive experiences.

Primary Tags in HTML


In HTML, the structure of a web page is defined using various tags, each serving a specific purpose.
Here are some of the primary tags used in HTML, essential for constructing the basic framework and
elements of a web page :

Basic Structure Tags


 <!DOCTYPE html> : Declares the document type and version of HTML.
 <html> : The root element that contains all other HTML elements.
 <head> : Contains meta-information about the document, such as its title and links to
stylesheets and scripts.
 <title> : Specifies the title of the document, shown in the browser's title bar or tab.
 <body> : Contains all the contents of an HTML document, such as text, images, links, and
other data.

Text Formatting Tags


 <h1> to <h6> : Header tags used to define headings, from most important (<h1>) to least
important (<h6>).
 <p> : Defines a paragraph.
 <br> : Inserts a line break.
 <hr> : Creates a thematic break (horizontal line) in the document.
Link and Image Tags
 <a> : Defines a hyperlink, which is used to link from one page to another.
 <img> : Embeds an image into the document.

List Tags
 <ul> : Defines an unordered list.
 <ol> : Defines an ordered list.
 <li> : Defines a list item.

Table Tags
 <table> : Defines a table.
 <tr> : Defines a row in a table.
 <td> : Defines a cell in a table.
 <th> : Defines a header cell in a table.

Semantic HTML5 Tags


 <header> : Represents a container for introductory content or navigational links.
 <footer> : Represents a footer for a section of the document or the entire document.
 <section> : Defines a section in a document.
 <article> : Defines an independent, self-contained composition in a document.
 <nav> : Represents a section of a page that links to other pages or parts within the page.
 <aside> : Defines some content loosely related to the content around it.

Form Tags
 <form> : Creates an HTML form for user input.
 <input> : Defines an input field within a form.
 <textarea> : Defines a multi-line text input control.
 <button> : Defines a clickable button.

These tags, used together, help structure the content on web pages, making it understandable and
navigable for both users and search engines. Understanding how to use these tags effectively is the
foundation of learning to create web pages.

Meta Tags
Meta tags are snippets of text that describe a page's content; they don't appear on the page itself,
but only in the page's code. While they are invisible to visitors, they are critically important to search
engines and browsers. Meta tags can affect how documents are displayed, how they are handled by
browsers, and how they are indexed by search engines.

Common Types of Meta Tags


1. Meta Charset Tag
 Specifies the character encoding for the HTML document.
 Example :
<meta charset="UTF-8">

2. Meta Description Tag


 Provides a brief description of the page. This description is often used by search engines
on the search results page to display a preview of the content.
 Example :
<meta name="description" content="Learn more about the uses and benefits of HTML
meta tags in web development.">

3. Meta Keywords Tag


 This used to be a way to specify the keywords for which the page should rank. However,
it is no longer considered relevant for SEO by most major search engines because it was
frequently abused.
 Example :
<meta name="keywords" content="HTML, meta tags, web development">

4. Meta Viewport Tag


 Essential for controlling layout on mobile browsers. It ensures the page scales correctly
on different devices.
 Example :
<meta name="viewport" content="width=device-width, initial-scale=1.0">

5. Meta Robots Tag


 Directs search engine crawlers with instructions on how to index or not index a webpage,
and whether to follow links on the page.
 Example :
<meta name="robots" content="noindex, nofollow">
 Content Values :
 noindex : Tells search engines not to index the page.
 nofollow : Directs search engines not to follow any links on the page.
 index : Indicates that the page can be indexed.
 follow : Search engines can follow links on the page.

6. HTTP-Equiv Tags
 These tags can act like HTTP header responses sent from the server and can control
caching, set cookies, specify the content type, etc.
 Example for refreshing the page every 30 seconds :
<meta http-equiv="refresh" content="30">

Best Practices for Using Meta Tags


 Be Concise and Relevant : For meta descriptions, it's best to keep the text concise (about
150-160 characters) and relevant to the page content.
 Optimize for Mobile : Always include the viewport meta tag for mobile optimization to
ensure your site scales properly on all devices.
 Avoid Duplicate Content : Make sure your meta descriptions are unique for each page.
 Follow SEO Guidelines : Even though meta keywords are no longer useful for SEO, other
meta tags, like the description and robots tags, play significant roles in how search engines
index and display your content.

Properly used, meta tags play a crucial role in enhancing the visibility and functionality of web pages,
ensuring they work well across various environments and are accurately indexed by search engines.

Build Resume using Basic HTML Tags


Creating a simple resume using HTML is a great way to get started with web development. Below, I'll
guide you through creating a basic HTML resume step-by-step. This resume will include a header
with your name and contact information, sections for your objective, education, work experience,
and skills.

Step 1: Set Up the Basic HTML Structure


Here’s how you start with the basic HTML structure. Open your text editor and begin with the
following structure :

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My Resume</title>

</head>

<body>

<!—Resume content will go here-->

</body>

</html>

Step 2: Add Header Information


Insert your name and contact information in the <body> section. We’ll use a <header> tag for this.

<header>

<h1>Your Name</h1>

<p>Email : [email protected]</p>

<p>Phone: (123) 456-7890</p>

</header>

Step 3: Add an Objective Section


Right below the header, add an objective or a professional summary to outline your career goals.

<section>

<h2>Objective</h2>

<p>State your career objective or a brief professional summary here.</p>

</section>

Step 4: Education Details


Add another section for your education. List your degrees and the schools you attended.

<section>

<h2>Education</h2>

<ul>

<li>BSc in Computer Science - ABC University, 2022</li>

<li>High School Diploma - XYZ High School, 2018</li>

</ul>

</section>

Step 5: Work Experience


Detail your work experience, including job titles, company names, and dates of employment.

<section>

<h2>Work Experience</h2>

<ul>

<li> Software Developer at Company Name, 2022-Present </li>

<li> Intern at Another Company Name, 2021-2022</li>

</ul>

</section>

Step 6: Skills
Create a list of your professional skills that are relevant to the job you are applying for.

<section>

<h2>Skills</h2>

<ul>

<li> Proficient in HTML, CSS, JavaScript </li>

<li> Strong communication and problem-solving skills </li>

<li> Experience with React and Node.js </li>

</ul>

</section>

Final HTML Code


Combining all the sections, your complete HTML resume should look like this :

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My Resume</title>

</head>

<body>

<header>

<h1>Your Name</h1>

<p>Email : [email protected]</p>

<p>Phone: (123) 456-7890</p>

</header>

<section>

<h2>Objective</h2>

<p>State your career objective or a brief professional summary here.</p>

</section>

<section>
This simple HTML resume can be enhanced further with CSS for better styling and layout, making it
more visually appealing and professional.

New tags introduced in HTML5


HTML5 introduced a range of new tags aimed at enhancing the semantic meaning of the document
structure, improving the web's accessibility, and making it easier for search engines and other tools
to understand the content and structure of web pages. Here’s a list of some of the notable new tags
that were introduced in HTML5 :

Structural and Semantic Tags


 <article> : Defines independent, self-contained content which is intended to be
independently distributable or reusable (e.g., in syndication).
 <section> : Represents a generic document or application section and is used for grouping
together thematically related content.
 <nav> : Designates navigation links, helping users and search engines understand the
navigation structure of a website.
 <aside> : Indicates content that is tangentially related to the content around it, often used
for sidebars, call-out boxes, or embedded advertisements.
 <header> : Represents introductory content or a group of navigational links. A header can
contain multiple elements, and even sections or other structural elements.
 <footer> : Defines the footer for a document or section, containing information about its
containing element.
 <figure> and <figcaption> : The <figure> element is used to encapsulate media, typically with
an optional caption provided by <figcaption>.
 <summary> and <details> : <details> creates a disclosure widget from which the user can
retrieve additional information or controls on demand. <summary> provides a visible
heading for the <details> widget.

Form and Input Types


 <output>: Represents the result of a calculation or user action.
 <progress>: Displays an indicator showing the completion progress of a task, typically
displayed as a progress bar.
 <meter>: Represents a scalar measurement within a known range, such as a disk usage,
relevance of a query result, or the fraction of a voting population to have selected a
particular candidate.
 Various new input types : HTML5 introduces several new input types to the <input> tag to
handle different data types, including email, date, time, url, range, search, color, and more.

Media Tags
 <audio> and <video>: Simplify the process of embedding audio and video content on web
pages without the need for proprietary plugins like Flash. These tags support native controls
and can be manipulated via the HTML DOM API.
 <source>: Used within <video> and <audio> to specify multiple media resources, allowing
the browser to choose the format it supports.
 <track>: Used with <audio> and <video> elements to specify timed text tracks (like subtitles
and captions).

Others
 <canvas>: Allows dynamic rendering of bitmap graphics via scripting (e.g., JavaScript). This is
commonly used for graphical applications, games, and data visualization.

These tags make HTML5 a powerful tool for developing more intuitive, media-rich, and semantically
meaningful web pages. HTML5 has significantly improved the web's ability to handle multimedia and
graphical content natively, enhancing user experience and accessibility.

<ul> and <ol> Tags (And how are they used for
Nested List?)
In HTML, lists are a fundamental way to structure a series of related items. HTML provides three
types of lists: unordered lists (<ul>), ordered lists (<ol>), and description lists (<dl>). The <ul> and
<ol> tags are especially useful for creating hierarchical or nested lists, which are lists within lists.
Here's a breakdown of how these tags are used :

Unordered List (<ul>)


 Usage : An unordered list is used when the order of the items is not important.
 Presentation : Items in an unordered list are typically displayed with bullets.
 Syntax : The <ul> tag is used to define the list, and each item within the list is placed inside
an <li> (list item) tag.

Ordered List (<ol>)


 Usage : An ordered list is used when the order of the items is important.
 Presentation : Items in an ordered list are typically displayed with numbers or letters.
 Syntax : The <ol> tag defines the list, and <li> tags are used for each item.

Creating Nested Lists


Nested lists are useful for presenting information that is organized in levels of hierarchy or subpoints.
To create a nested list, you simply place a new <ul> or <ol> inside an <li> of an existing list. Here's
how you can create nested lists using both <ul> and <ol>:

<ol> <!-- Outer list, ordered -->

<li>Item 1</li>

<li>Item 2

<ul> <!-- Nested list, unordered -->

<li>Subitem 2a </li>

<li>Subitem 2b</li>

</ul>
</li>

<li>Item 3

<ol> <!-- Further nested list, ordered -->

<li>Subitem 3a </li>

<li>Subitem 3b</li>

</ol>

</li>

</ol>

In this example :

 The main list is an ordered list (<ol>), meaning each item is numbered.
 Within the second item of the main list, there is a nested unordered list (<ul>), which uses
bullets for its items.
 Inside the third item of the main list, there is another nested ordered list, continuing the
numeric sequence but starting fresh from one, as it pertains specifically to the context of
"Item 3".

Practical Usage
Nested lists are particularly useful in web content for:

 Creating outlines or structured plans where hierarchy is necessary.


 Displaying categories and subcategories, such as in web sitemaps or complex menus.
 Organizing content in a way that clearly shows the relationships between different levels of
information.

Understanding and using nested lists can significantly improve the structure and readability of your
web content, making it more accessible and user-friendly.

Table Tag
The <table> tag in HTML is used to create a table, which is a means of arranging data in rows and
columns, making it easier to read and understand. Tables are widely used on the web for displaying
tabular data like schedules, statistics, or financial information.

Structure of HTML Tables


HTML tables are made up of several elements that define its structure :

 <table>: The container element for the table.


 <tr>: Stands for "table row"; it is used to define a row of cells in the table.
 <td>: Stands for "table data"; it is used to define a cell in the table that contains data.
 <th>: Stands for "table header"; similar to <td>, but is used for the header cells in the table
that explain what data is contained in each column.
 <thead>: Defines a set of rows defining the head of the columns of the table.
 <tbody>: Wraps the main content rows of the table.
 <tfoot>: Defines a set of rows summarizing the columns of the table.

Attributes of Table Tags


HTML tables can include various attributes to control their appearance and behavior :

 border : Specifies the border thickness around the table and its cells.
 cellpadding : Controls the spacing between the cell walls and the cell content.
 cellspacing : Controls the spacing between individual cells.
 colspan : Used in <th> or <td> to indicate that a cell should span multiple columns.
 rowspan : Used in <th> or <td> to indicate that a cell should span multiple rows.

Example of an HTML Table


Here’s a simple example of how to create an HTML table :

<!DOCTYPE html>

<html lang="en”>

<head>

<meta charset="UTF-8">

<title>Sample Table</title>

</head>

<body>

<table border="1”> <!—A simple border for the table -->

<thead>

<tr>

<th>#</th>

<th>Name</th>

<th>Age</th>

<th>City</th>

</tr>

</thead>

<tbody>

<tr>
In this example :
 The <table> tag sets up the table with a border.
 The <thead> element contains a single row <tr> with header cells <th> that label each
column.
 The <tbody> element contains the main data of the table with three rows, each including a
number, a name, an age, and a city.
 The <tfoot> element is used for a footer row that spans all columns using colspan="4",
indicating some kind of summary or conclusion.

This basic table layout is useful for a wide range of applications on the web, from displaying data in a
clear, grid-like format to organizing content in a visually structured way.

Form Tag
The <form> tag in HTML is used to create an HTML form for user input. Forms are essential for
interactive web pages, allowing users to submit data to a web server for processing, which could be
for logging in, registration, searching, booking, and more.

Components of HTML Forms


HTML forms are comprised of one or more of the following elements :

 <form> : The container for all the form elements. It defines how to send the data and where
to send it.
 Input Elements : These can be <input>, <textarea>, <button>, <select>, and others, each
serving different purposes for different kinds of user input.
 Attributes :
 action : Specifies the URL where the form's data is sent when submitted.
 method : Defines the HTTP method used when submitting the form. Common methods
are GET (data appended to the URL) and POST (data sent in the body of the request).

Types of Input Elements


 <input>: The most versatile form element, with different types like text, password, submit,
radio, checkbox, date, etc.
 <textarea>: Allows for multi-line text input.
 <select>: Creates a drop-down list.
 <button>: Defines a clickable button.
 <label>: Provides a label for an input element, improving the accessibility of the forms.

Example of a Simple HTML Form


Here's a basic example of an HTML form that includes various input types :

<!DOCTYPE html>

<html lang="en”>

<head>

<meta charset="UTF-8">
</form>

</body>

</html>
In this form :

 The form data will be sent to "submit.php" using the POST method when submitted.
 Various <input> types are used: text, email, date, file, and buttons for submitting and
resetting the form.
 A <select> dropdown lets the user choose a department.
 Each input is paired with a <label> for better accessibility; the for attribute in the label is
associated with the id of the corresponding input element.

Use Case
Forms are used across the web for a variety of purposes:

 User Registration : Collecting information when users sign up for a service.


 Search Boxes : Allowing users to enter data to search for content.
 Feedback Forms : Enabling users to provide feedback or contact customer service.

HTML forms are fundamental to interactive and functional websites, enabling web developers to
gather and process data efficiently while providing users with a seamless interaction experience.

Types of Input Elements in Form with Attributes


In HTML, <input> elements within forms are incredibly versatile and can be configured for a variety
of data types using different type attributes. These input types cater to specific data entry needs,
improving the user experience by providing appropriate interfaces for data input. Here's a detailed
explanation of the main types of <input> elements and their key attributes:

1. Text
 Type : text
 Description : A single-line text field.
 Attributes :
 maxlength : Specifies the maximum number of characters allowed.
 placeholder : Provides a hint to the user about what to enter in the input.
 required : Indicates that the field must be filled out before submitting the form.

2. Email
 Type : email
 Description : A field for entering an email address. The browser can validate the entered
text to ensure it conforms to the standard email format.
 Attributes :
 multiple : Allows multiple email addresses to be entered.
3. Password
 Type : password
 Description : A text field that masks user input, suitable for passwords.
 Attributes :
 autocomplete : Can be set to "new-password" to hint to the browser to generate a
password.

4. Radio
 Type : radio
 Description : Allows the user to select one of a limited number of choices.
 Attributes :
 checked : Specifies whether a radio button is selected when the page loads.
 name : Radio buttons sharing the same name are considered as part of one group.

5. Checkbox
 Type : checkbox
 Description : Allows the user to select zero or more options from a set.
 Attributes :
 checked : Indicates whether the checkbox is checked by default.

6. File
 Type : file
 Description : Lets the user select one or more files from their device storage to be
uploaded to a server.
 Attributes :
 accept : Specifies a filter for what file types the user can pick from the file input
dialog.

7. Submit
 Type : submit
 Description : A button that submits the form.
 Attributes :
 value : Specifies the text on the submit button.

8. Reset
 Type : reset
 Description : A button that resets all form fields to their initial values.

9. Button
 Type : button
 Description : A clickable button that can be used with JavaScript to perform an action on
the client side.
 Attributes :
 onclick : Often used with JavaScript to specify what should happen when the button
is clicked.

10. Date, Time, and DateTime


 Types : date, time, datetime-local
 Description : Allows the user to select a date, time, or both, using a built-in date/time
picker.
 Attributes :
 min and max : Define the minimum and maximum dates/times that can be selected.

11. Number
 Type : number
 Description : Allows the user to enter a numeric value. Browsers will provide interfaces
to increase or decrease the number.
 Attributes :
 min and max : The minimum and maximum values allowed.
 step : The interval between valid numbers in the control.

12. Range
 Type : range
 Description : Lets the user specify a numeric value which must be no less than a given
value, and no more than another given value. Often rendered as a slider.
 Attributes :
 min, max, step : Controls the range of values by setting the minimum, maximum,
and step values.

13. Color
 Type : color
 Description : Provides a control for specifying a color. A color picker interface is typically
provided in the browser.
 Attributes : (Generally does not have special attributes beyond the standard ones
applicable to <input>.)

Each of these input types is designed to handle specific data formats, ensuring that the data entered
is appropriate and valid, thereby enhancing data integrity and the user experience on web forms.

HTML Formatting Tags


HTML formatting tags are used to format the appearance of text on a webpage. These tags can
control aspects such as font size, style, and emphasis. Although modern web development practices
encourage the use of CSS (Cascading Style Sheets) for formatting to keep content and design
separate, HTML still provides a range of tags that directly affect text format. Here are some of the
commonly used HTML formatting tags:

Basic Text Formatting Tags


 <b>: Renders text in bold without implying any added importance (stylistic bold).
 <strong>: Indicates that its contents have strong importance, seriousness, or urgency.
Browsers typically render the text in bold.
 <i>: Renders text in italics purely for stylistic purposes.
 <em>: Emphasizes text, which browsers typically render as italic. This tag implies a change in
meaning of the text.
 <u>: Underlines text. Use should be limited as underlining can also signify hyperlinks.
 <mark>: Highlights text. Often used to indicate a run of text marked or highlighted for
reference purposes, due to its relevance in another context.
 <small>: Renders text in a smaller font size, indicating that the text is less important.
 <del>: Represents text that has been deleted from a document. Browsers usually strike
through the text.
 <ins>: Represents text that has been inserted into a document. Browsers usually underline
this text.
 <sub>: Defines subscript text, which appears half a character below the baseline.
 <sup>: Defines superscript text, which appears half a character above the baseline.

Preformatted Text
 <pre>: Preserves both spaces and line breaks as written in the HTML source. This is useful for
displaying code or poetry where the formatting is significant.

Quotations
 <blockquote> : Used to indicate extended quotations. Usually, browsers indent text inside a
<blockquote>.
 <q> : For shorter quotes, browsers may render this with quotation marks.

Code
 <code>: Displays its contents styled in a way that indicates the text is a short fragment of
computer code.
 <samp>: Intended for output from a computer program. Typically displayed in a font that
distinguishes it from the surrounding text.
 <kbd>: Indicates text to be input by the user. Often displayed in a monospace font which
simulates the text as it would appear on a keyboard.

Deprecated Tags
 Some tags, like <font>, <strike>, and <center>, were commonly used in earlier versions of
HTML but are now deprecated in favor of CSS for styling. These tags are not recommended
for use in modern web development.

Example Using Formatting Tags


Here’s an example snippet using some of these formatting tags :

<!DOCTYPE html>

<html>

<head>

<title>Text Formatting Example</title>

</head>

<body>

<p><strong>Important: </strong> Make sure to save your work frequently .</p>

<p><em>Tip:</em>You can use <code>Ctrl+S</code>to save quickly.</p>

<p><u>Note: </u> This information is <del>no longer relevant</del><ins> updated</ins>.</p>

<p><small>This is a small text.</small></p>

<p>Chemical formula for water: H<sub>2</sub>O and energy formula E=mc<sup>2</sup>.</p>

</body>

</html>

This code snippet demonstrates the use of strong, emphasis, underlined, deleted, inserted, subscript,
and superscript tags to format text according to its semantic meaning, while also providing stylistic
adjustments. Remember, for extensive styling, it's better to use CSS.

Quotation and Citation Tags


HTML provides specific tags designed to semantically indicate quotations and citations. These tags
help define the meaning and source of a quote, enhancing the document's structure and readability,
especially for accessibility tools and search engines.

Quotation Tags
1. <blockquote>
 Usage : The <blockquote> tag is used for longer block quotations from another source. It
is typically used to represent content that is quoted from another source, encompassing
multiple sentences, a paragraph, or a series of paragraphs.
 Attributes :
 cite : Specifies a URL that points to the source of the quotation or more information
about the quote.
 Presentation : Web browsers usually indent text within a <blockquote> from both the
left and right margins.
 Example :
<blockquote cite="https://example.com">
<p>This is a long block quote example. It can span multiple sentences and is typically
used for more extended passages that are quoted verbatim from another source.</p>
</blockquote>
2. <q>
 Usage : The <q> tag is used for shorter inline quotations that sit within the surrounding
text. It is ideal for inserting brief quotes within a sentence or paragraph.
 Attributes :
 cite : Similarly to <blockquote>, it specifies the source URL of the quote.
 Presentation : Most browsers will automatically enclose the content of <q> in quotation
marks.
 Example :
<p>As Albert Einstein once said, <q cite="https://example.com">Imagination is more
important than knowledge.</q></p>

Citation Tag
1. <cite>
 Usage : The <cite> tag is used to reference a creative work. It can be used to cite a book,
a paper, a poem, a song, a film, or any other creative work.
 Presentation : Content within <cite> is typically rendered in italic to denote that it is a
title of a work.
 Example :
<p>One of the most influential books in science is <cite>On the Origin of Species</cite>
by Charles Darwin.</p>

Example Combining These Tags


Here’s how you might combine these tags in an HTML document to properly format and cite
quotations :

<!DOCTYPE html>

<html>

<head>

<title>HTML Quotation and Citation Example</title>

</head>

<body>

<h1>Quotation and Citation Tags in HTML</h1>

<p>As mentioned in <cite> The Art of Computer Programming </cite>by Donald Knuth :</p>

<blockquote cite="https://example.com/source” >

<p>“Beware of bugs in the above code; I have only proved it correct, not tried it.”</p>

</blockquote>
This example shows how to use <blockquote> for a longer quote, <cite> to reference the title of a
book, and <q> could be used similarly for shorter quotes within the narrative. These semantic tags
enhance the readability and accessibility of web content by clearly distinguishing quotations and
sources.

Tags used to design the Layout of the Webpage


In HTML, designing the layout of a web page involves using a combination of structural and semantic
tags that help define the organization and presentation of content. Modern HTML5 introduces
several tags specifically intended to enhance the semantic meaning and accessibility of web
structures, aiding in both layout design and search engine optimization.

Here's a breakdown of the key HTML tags used to design the layout of a web page :

1. <header>
 Usage : Used to define the introductory content or navigational links at the top of a web
page or section.
 Example :

<header>

<h1>Website Title</h1>

<nav>

<ul>

<li><a href="#home”>Home</a></li>

<li><a href="#about”>About</a></li>

<li><a href="#services”>Services</a></li>

</ul>

</nav>

</header>
2. <footer>
 Usage : Represents the footer of a page or section, typically containing copyright
information, contact details, or links to legal or privacy information.
 Example :

<footer>

<p>Copyright © 2023 Your Company Name</p>

</footer>

3. <nav>
 Usage : Designed for navigational links, this tag indicates that the enclosed links are part
of the main or subsidiary navigation of a site.
 Example :

<nav>

<ul>

<li><a href="#home”>Home</a></li>

<li><a href="#about”>About Us</a></li>

<li><a href="#services”>Contact Us</a></li>

</ul>

</nav>

4. <section>
 Usage: Defines a section in a document, such as chapters, headers, footers, or any other
sections of the document.
 Example :

<section>

<h2>About Us<h2>

<p>Information about the company.</p>

</section>
5. <article>
 Usage: Specifies independent, self-contained content that could be distributed
independently of the rest of the site, such as blog posts, news articles, etc.
 Example :

<article>

<h2>Blog Title<h2>

<p>Blog content goes here…</p>

</article>

6. <aside>
 Usage: Used for tangentially related content that serves as a sidebar to the main
content.
 Example :

<aside>

<h3>Related Posts<h3>

<ul>

<li><a href="#”>Post One</a></li>

<li><a href="#”>Post Two</a></li>

</ul>

</aside>

7. <main>
 Usage: Specifies the main content of the document, which is unique to the document
and excludes content repeated across documents such as sidebars, navigation links, and
footers.
 Example :

<main>

<article>

<h1>Article Title<h1>

<p>Article content…</p>

</article>

</main>
8. <div>
 Usage: A generic container for flow content, which does not inherently represent
anything. It can be useful for styling purposes or as a container for dynamic scripting.
 Example :

<div id="container >

<section>

<h2>Section Title<h1>

<p>Some text here…</p>

</section>

</div>

These tags, when used in conjunction with CSS, enable developers to create structured, accessible,
and visually appealing web pages. The semantic nature of these tags also helps with SEO and ensures
better accessibility standards.

Creating a Resume using Table Tag


Creating a resume using HTML tables is a straightforward way to organize your professional details
into a clean layout. Below, I'll guide you through crafting a simple resume using HTML's <table> tag,
which will include sections for personal information, an objective, education, work experience, and
skills.

Step 1: Basic HTML Setup


First, start with the basic HTML document structure. Open your text editor and type the following :

<!DOCTYPE html>

<html lang="en”>

<head>

<meta charset="UTF-8">

<title>My Resume</title>

<style>

table {

width: 100%;

border-collapse: collapse;
Step 2: Add Personal Information
Within the <table> tag, create a row for personal information :

<tr>

<th colspan="2”>Personal Information</th>

</tr>

<tr>

<td>Name</td>

<td>John Doe</td>

</tr>

<tr>

<td>Email</td>
Step 3: Add an Objective
Next, include a section for your career objective :

<tr>

<th colspan="2”>Objective</th>

</tr>

<tr>

<td colspan="2”>To pursue a challenging career in a competitive environment where I can


use my skills effectively and efficiently.</td>

</tr>

Step 4: Education Details


Now, add details about your education :

<tr>

<th colspan="2”>Education</th>

</tr>

<tr>

<td>2018-2022</td>

<td> Bachelor of Science in Computer Science<br>University of Example</td>

</tr>
Step 5: Work Experience
Include your work experience :

<tr>

<th colspan="2”>Work Experience</th>

</tr>

<tr>

<td>2022-Present</td>

<td>Software Developer at Tech Solutions Inc.</td>

</tr>

<tr>

<td>2021-2022</td>

<td> Intern at Innovative Web Solutions</td>

</tr>

Step 6: Skills
Finally, list some relevant professional skills :

<tr>

<th colspan="2”>Skills</th>

</tr>

<tr>

<td colspan="2”> HTML, CSS, JavaScript, Python, Java.</td>

</tr>
Full HTML Code with the Resume Table
Combining all the parts, the complete HTML for the resume will look like this:

<!DOCTYPE html>

<html lang="en”>

<head>

<meta charset="UTF-8">

<title>My Resume</title>

<style>

table {
<tr>

<td>Email</td>

<td>[email protected]</td>

</tr>

<tr>

<td>Phone</td>

<td>(123) 456-7890</td>

</tr>
<td>2021-2022</td>

<td> Intern at Innovative Web Solutions</td>

</tr>

<tr>

<th colspan="2”>Skills</th>

</tr>

<tr>

<td colspan="2”> HTML, CSS, JavaScript, Python, Java.</td>

</tr>
</table>

Image Tag (<img>)


The HTML <img> tag is used to embed images into web pages. It's a self-closing tag, meaning it
doesn't require an end tag, and it is one of the most commonly used tags in HTML for adding visual
content to websites. Here’s a detailed breakdown of the <img> tag and its attributes:

Basic Syntax
<img src="url" alt="description">

Key Attributes
1. src (source)
 Description : Specifies the URL (web address) of the image.
 Example : src="image.jpg"

This attribute is mandatory, as it tells the browser where to find the image that needs to be
displayed.

2. alt (alternative text)


 Description : Provides alternative information for an image if a user for some reason
cannot view it (because of slow connection, an error in the src attribute, or if the user
uses a screen reader).
 Example : alt="A description of the image"

This attribute is also used for accessibility, making images accessible to visually impaired users
and it is highly recommended to always include an alt attribute.

3. width and height


 Description : Specify the width and height of the image in pixels.
 Example : width="500" height="600"
If not specified, the image will be displayed using its actual size. It's often a good practice to set
these attributes to improve page loading times and layout stability as the page loads.

4. title
 Description : Provides additional information about the image. The information is usually
displayed as a tooltip when the mouse moves over the image.
 Example : title="Title of the Image"

5. loading
 Description : This attribute allows a browser to defer loading the image until it reaches a
calculated distance from the viewport.
 Values :
 auto : Default, loads the image when it gets to the point in the page where it needs
to be loaded.
 lazy : Delays loading of the image until it reaches a certain distance from the
viewport.
 eager : Loads the image immediately, regardless of where it appears on the page.
 Example : loading="lazy"

Examples
Basic Image Embed
<img src="logo.png" alt="Company Logo">

This is a simple use of the <img> tag to display an image called logo.png.

Image with Specified Dimensions and Tooltip


<img src="photo.jpg" alt="Sunset View" width="800" height="600" title="Beautiful sunset">

This example shows an image with specified dimensions and a tooltip, providing a better control over
how the image should fit into the layout.

Lazy Loading an Image


<img src="large-photo.jpg" alt="Panoramic Mountain View" loading="lazy">

This uses the loading="lazy" attribute to defer loading of a large image until it is about to scroll into
view, which can help with performance on pages with many large images.

Considerations for Using the <img> Tag


 Accessibility : Always use the alt attribute to describe the image. This is crucial for screen
readers and improves your site's SEO.
 Performance : Use the loading="lazy" attribute for images below the fold to improve page
load times.
 Responsive Images : While not an attribute of <img> itself, the <picture> element or srcset
and sizes attributes of <img> can be used to specify different images for different screen sizes
and resolutions, enhancing responsiveness and performance.

Using the <img> tag effectively allows web developers to incorporate visual elements into web
pages, enhancing user engagement and providing key information in a visual format.

Anchor Tag with Attributes


The HTML <a> tag, also known as the anchor tag, is fundamental for creating hyperlinks on the web.
These hyperlinks allow users to jump from one page or location to another, facilitating navigation
within the same document, to different pages on the same website, or to completely different
websites. Here’s an in-depth look at the <a> tag and its various attributes:

Basic Syntax
<a href="url">Link Text</a>

Key Attributes
1. href (Hypertext Reference)
 Description : Specifies the URL of the page the link goes to. This can be an absolute URL
(full web address) or a relative URL (location relative to the current page).
 Example : href=https://www.example.com

2. target
 Description : Defines where to open the linked document.
 Values :
 _blank: Opens the linked document in a new window or tab.
 _self: Opens the link in the same frame as it was clicked (this is the default).
 _parent: Opens the link in the parent frame.
 _top: Opens the link in the full body of the window.
 Example : target="_blank" (commonly used for opening a link in a new tab).

3. title
 Description : Provides additional information about the link. This is often shown as a
tooltip when the user hovers over the link.
 Example : title="Go to Example"
4. rel (Relationship)
 Description : Specifies the relationship between the current document and the linked
document.
 Values :
 nofollow: Tells search engines not to follow this hyperlink.
 noopener: Prevents the new page from being able to access the window object of
the page that opened it.
 noreferrer: Prevents the Referer header from being sent to the new page.
 Example : rel="noopener noreferrer"

5. download
 Description : Specifies that the target will be downloaded when a user clicks on the
hyperlink. This attribute only works for same-origin URLs or when a CORS setting is
configured to allow it.
 Example : download="filename.ext" or just download to use the original filename.

Examples of Using the <a> Tag


1. Basic Hyperlink
<a href="https://www.example.com">Visit Example.com</a>

This is a straightforward link to another website.

2. Opening a Link in a New Tab


<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit
Example.com in a new tab</a>

This opens a link in a new tab and uses rel="noopener noreferrer" for security reasons,
particularly to prevent the new page from accessing the JavaScript window object of the
opening page.

3. Linking to a Downloadable File


<a href="/path/to/file.pdf" download="NewFileName.pdf">Download File</a>

This link forces a file download named "NewFileName.pdf" when clicked.

4. Email Link
<a href="mailto:[email protected]">Send Email</a>
This creates a hyperlink that opens the user’s default mail program with the "To" field pre-
filled with the specified email address.

5. Telephone Link
<a href="tel:+1234567890">Call Us</a>
This creates a hyperlink that, when clicked on a device capable of making calls, will
attempt to dial the number.

Accessibility Considerations
When using the <a> tag, it's important to ensure the link text is descriptive enough to be
understood out of context, as screen readers might read links as a list. Avoid vague
descriptions like "click here" and aim for more descriptive links, e.g., "Read more about
HTML tags".
The <a> tag is essential for web navigation, providing a way to interconnect content across
the vast landscape of the internet and making the web a navigable and user-friendly
environment.

Tags for Audio and Video


In HTML5, the <audio> and <video> tags are used to embed sound and video files into web pages,
respectively. These tags make it easier to distribute and control multimedia content without the need
for external plugins or players, which were commonly required in earlier versions of HTML.

The <audio> Tag

The <audio> tag is used to embed audio content in a document, such as music or other sound clips.
Here is how you can use this tag:

Basic Syntax
<audio controls>

<source src="audiofile.mp3" type="audio/mpeg">

Your browser does not support the audio element.


Key</audio>
Attributes

1. src : Specifies the URL of the audio file.


2. controls : When present, it displays play, pause, and volume controls.
3. autoplay : Specifies that the audio will start playing as soon as it is ready.
4. loop : Specifies that the audio will start over again, every time it is finished.
5. muted : Specifies that the audio output should be muted.
6. preload : Specifies if and how the author thinks the audio should be loaded when the page
loads. Values are "none", "metadata", or "auto".

The <video> Tag

The <video> tag is used to embed video content in a document. It supports a variety of video
formats, though the exact support can vary widely between web browsers.

Basic Syntax

<video controls width="250" >

<source src="videofile.mp4" type="video/mp4">

<source src="videofile.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

Key Attributes

1. src : Specifies the URL of the video file.


2. controls : When present, it displays controls for playing, pausing, and adjusting volume.
3. width and height : Specify the width and height of the video player.
4. autoplay : Specifies that the video will start playing as soon as it is ready.
5. loop : Specifies that the video will start over again, every time it is finished.
6. muted : Specifies that the audio output of the video should be muted.
7. preload : Defines if and how the author thinks the video should be loaded when the page
loads. Values are "none", "metadata", or "auto".
8. poster : Specifies an image to be shown while the video is downloading, or until the user hits
the play button.

Example of Embedding Audio and Video

Here’s a simple example that shows how to embed both audio and video files into an HTML
document :

<!DOCTYPE html>

<html lang="en”>

<head>

<meta charset="UTF-8">

<title>Media Example</title>

</head>

<body>

<h1>Audio Example</h1>
<audio controls>

In this example :

The <audio> and <video> tags are used with the controls attribute to allow user interaction.
The <source> tags are used to specify multiple sources for the same video or audio to ensure
maximum compatibility across different browsers.

These tags are essential for making multimedia a seamless part of modern web applications,
providing users with rich audio and video experiences directly in their browsers without additional
software.

The <iframe> Tag


The HTML <iframe> tag is used to embed another HTML document within a current HTML document.
It acts like a window to another webpage, allowing you to display that page as part of your own
webpage content. The <iframe> is incredibly versatile and is used for various purposes, including
embedding videos, maps, and web pages.

Basic Syntax
<iframe src="url" width="width" height="height"></iframe>
Key Attributes
1. src (source)
 Description : Specifies the URL of the page that the <iframe> will display.
 Example : src=https://www.example.com

2. width and height


 Description : Define the size of the <iframe> in terms of width and height. These can be
specified in pixels or as a percentage to adapt to the container size.
 Example : width="300" height="200"

3. frameborder
 Description : Specifies whether or not to display a border around the <iframe>. While it's
still supported by most browsers, it's considered obsolete in HTML5. CSS should be used
instead for styling.
 Example : frameborder="0" (to have no border)

4. name
 Description : Assigns a name to the <iframe>, which can be targeted by links and forms.
 Example : name="frame1"

5. sandbox
 Description : Enables an extra set of restrictions for the content in the <iframe>. This
attribute is important for enhancing security by controlling what the embedded
document can do.
 Values :
 Without value: Applies all restrictions.
 allow-forms: Allows the form submission.
 allow-scripts: Allows script execution.
 allow-same-origin: Allows the iframe content to be treated as being from the same
origin.
 allow-popups: Allows popups.
 Example : sandbox="allow-scripts"

6. allow
 Description : Specifies a feature policy for the <iframe>. It can be used to control which
features and APIs can be used in the embedded document.
 Example : allow="geolocation; microphone"

7. srcdoc
 Description : Specifies the HTML content of the page to show in the iframe. This
attribute allows embedding content directly without an external page.
 Example : srcdoc="<p>Hello, world!</p>"

Example of Using an <iframe> tag

<!DOCTYPE html>

<html lang="en”>

<head>

<meta charset="UTF-8">

<title>iframe Example</title>

</head>

<body>

<h1>Embedded Content</h1>

<iframe src="https://www.example.com" width="800" height="600” frameborder="0”


allow="accelerometer, camera”>

</iframe>

</body>

</html>

In this example, an external website is embedded within an <iframe>, with specified dimensions and
permissions. The frameborder="0" is used to ensure that no border is visible around the iframe,
making it seamlessly integrate into the layout of the hosting page.

Security and Usage Considerations


 Security Risks : <iframe> can pose security risks, especially if embedding content from
unknown or untrusted sources. It's important to use the sandbox attribute to restrict actions
that can be performed by the embedded content.
 Performance Impact : Using <iframe> can also affect the performance of your website, as
each iframe essentially loads another web page entirely.
 Accessibility : Iframes may cause challenges for screen readers unless properly designed
with titles and meaningful documentation explaining the embedded content.

<iframe> remains a powerful HTML element for embedding third-party content directly into web
pages, but it requires careful management to ensure security and maintain website performance.
Inline Element and Block level Element
In HTML, elements are broadly categorized into two types based on how they are displayed by
default in the browser: inline elements and block-level elements. Understanding the distinction
between these two types is crucial for effectively managing the layout and formatting of a webpage.

Block-Level Elements
Block-level elements are those that start on a new line and occupy the full width available, stretching
out to the left and right as far as possible. Essentially, these elements look like "blocks" of content on
a webpage.

Characteristics of Block-Level Elements :


 They always start on a new line.
 They take up the full width available (i.e., they stretch out to the left and right edges of their
container).
 Height, width, margin, and padding can be controlled via CSS.
 They can contain other block-level elements and inline elements.

Common Block-Level Elements :


 <div> - The generic container for flow content that by itself does not represent anything.
 <p> - Represents a paragraph.
 <h1> to <h6> - Represent different levels of section headings.
 <ol>, <ul> - Represent ordered and unordered lists, respectively.
 <li> - Represents an item in a list.
 <table> - Represents tabular data.
 <header>, <footer>, <section>, <article>, <aside> - HTML5 semantic elements that define
parts of a web page or application.

Example :
<div>

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

<p>This is a paragraph of text that explains something.</p>

</div>

Inline Elements
Inline elements do not start on a new line and only occupy as much width as necessary. This makes
them ideal for use within other elements without breaking the flow of content, such as within a
paragraph or a heading.

Characteristics of Inline Elements :


 They do not start on a new line.
 They only take up as much width as their content needs.
 Setting width and height properties typically has no effect.
 Vertical margin and padding can sometimes display unexpected behavior, but horizontal
margin and padding are respected.
 They cannot contain block-level elements.

Common Inline Elements :


 <span> - The generic inline container for phrasing content, which does not inherently
represent anything.
 <a> - Represents a hyperlink.
 <strong>, <em> - Represent text with strong importance and emphasis, respectively.
 <img> - Represents an image.
 <input>, <label> - Form elements that are typically displayed inline.
 <br> - Represents a line break.

Example :
<p>This is a paragraph with some <strong>bold text</strong> and a <a href="#">link</a>.</p>

Mixing Block and Inline Elements


While block-level elements can contain inline elements, the reverse is not typically true (with
exceptions depending on HTML5 structuring elements and CSS display properties). This hierarchy
allows web developers to structure their pages effectively, using block-level elements to create the
layout and inline elements to format the text within those blocks.

Understanding and using these types of elements correctly is fundamental to web design, affecting
everything from document structure to style application.

You might also like