What is HTML?
1. HTML stands for Hyper Text Markup Language
2. HTML is the standard markup language for creating
Web pages
3. HTML describes the structure of a Web page
4. HTML consists of a series of elements
5. HTML elements tell the browser how to display the
content
6. HTML elements label pieces of content such as "this
is a heading", "this is a paragraph", "this is a link", etc.
A Simple HTML Document
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Documents
All HTML documents must start with a document type
declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends
with </html>.
The visible part of the HTML document is between
<body> and </body>.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document
type, and helps browsers to display web pages correctly.
It must only appear once, at the top of the page (before
any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
Nested HTML Elements
HTML elements can be nested (this means that
elements can contain other elements).
All HTML documents consist of nested HTML elements.
The following example contains four HTML elements
(<html>, <body>, <h1> and <p>):
Example:-
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
What Is an HTML Tag?
HTML tags are the keywords on a web page that define
how your web browser must format and display your
web page.
Almost all tags contain two parts, an opening, and a
closing tag. For example, <html> is the opening tag and
</html> is the closing tag. Note that the closing tag has
the same text as the opening tag, but has an additional
forward-slash ( / ) character.
There are a total of 100 HTML tags. We will divide them
into categories and discuss the important ones in this
article.
Basic HTML Tags
Head Tag
The head tag <head> contains all the elements
describing the document.
Title Tag
The title tag <title> specifies the HTML page title, which
is shown in the browser’s title bar.
Body Tag
The body tag <body> is where you insert your web
page’s content.
Paragraph Tag
A paragraph tag <p> is used to define a paragraph on a
web page.
Heading Tag
The HTML heading tag is used to define the heading of
the HTML document. The <h1> tag defines the most
important tag, and <h6> defines the least.
Formatting Tags
Emphasis tag
The HTML <em> tag is used to emphasize the particular
text in a paragraph.
Bold Tag
The <b> tag is used to make the text bold.
Italic Tag
The <i> tag is used to make the text italic.
Underline Tag
The <u> tag is used to set the text underline.
Link Tag
The <a> tag links one page to another page. The href
attribute is used to define
List Tag
The <li> tag is used if you want to enter the contents in
the listed order. There are two types of lists.
Ordered list <ol>
Unordered list <ul>
Image Tag
The <img> tag is used to embed an image in an HTML
document. You need to specify the source of the image
inside the tag.
Center Tag
The <center> tag will center your content.
Empty HTML Elements
HTML elements with no content are called empty
elements.
The <br> tag defines a line break, and is an empty
element without a closing tag:
Example
<p>This is a <br> paragraph with a line break.</p>
HTML is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same
as <p>.
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like:
name="value"
The href Attribute
The <a> tag defines a hyperlink. The href attribute
specifies the URL of the page the link goes to:
Example
<a href="[Link]
W3Schools</a>
The src Attribute
The <img> tag is used to embed an image in an HTML
page. The src attribute specifies the path to the image to
be displayed:
Example
<img src="img_girl.jpg">
There are 2 ways to define url:-
● Absolute URL:-
src="[Link]
● Relative URL:- src="img_girl.jpg".
The width and height Attributes
The <img> tag should also contain the width and height
attributes, which specify the width and height of the
image (in pixels):
Example
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute
The required alt attribute for the <img> tag specifies an
alternate text for an image, if the image for some reason
cannot be displayed. This can be due to a slow
connection, or an error in the src attribute, or if the user
uses a screen reader.
Example
<img src="img_girl.jpg" alt="Girl with a jacket">
The style Attribute
The style attribute is used to add styles to an element,
such as color, font, size, and more.
Example
<p style="color:red;">This is a red paragraph.</p>
The lang Attribute
You should always include the lang attribute inside the
<html> tag, to declare the language of the Web page.
This is meant to assist search engines and browsers.
Example
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
The title Attribute
The title attribute defines some extra information about
an element.
The value of the title attribute will be displayed as a
tooltip when you mouse over the element:
Example
<p title="I'm a tooltip">This is a paragraph.</p>
Heading
Bigger Headings
Each HTML heading has a default size. However, you
can specify the size for any heading with the style
attribute, using the CSS font-size property:
Example
<h1 style="font-size:60px;">Heading 1</h1>
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML
page, and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define
a change) in an HTML page:
Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
The HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a
fixed-width font (usually Courier), and it preserves both
spaces and line breaks:
Example
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
Background Color
The CSS background-color property defines the
background color for an HTML element.
Example
Set the background color for a page to powderblue:
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Example
Set background color for two different elements:
<body>
<h1 style="background-color:powderblue;">This is a
heading</h1>
<p style="background-color:tomato;">This is a
paragraph.</p>
</body>
Fonts
The CSS font-family property defines the font to be used
for an HTML element:
Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Text Size
The CSS font-size property defines the text size for an
HTML element:
Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Text Alignment
The CSS text-align property defines the horizontal text
alignment for an HTML element:
Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
HTML Formatting Elements
Formatting elements were designed to display special
types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
HTML Comment Tag
You can add comments to your HTML source by using
the following
syntax:
<!-- Write your comments here -->
How To Add a Favicon in HTML
You can use any image you like as your favicon. You
can also create your own favicon on sites like
[Link]
Tip: A favicon is a small image, so it should be a simple
image with high contrast.
A favicon image is displayed to the left of the page title
in the browser tab, like this:
Example of favicon
To add a favicon to your website, either save your
favicon image to the root directory of your webserver, or
create a folder in the root directory called images, and
save your favicon image in this folder. A common name
for a favicon image is "[Link]".
Next, add a <link> element to your "[Link]" file, after
the <title> element, like this:
Example
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon"
href="/images/[Link]">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Now, save the "[Link]" file and reload it in your
browser. Your browser tab should now display your
favicon image to the left of the page title.
HTML List
HTML lists allow web developers to group a set of
related items in lists.
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item
starts with the <li> tag.
The list items will be marked with bullets (small black
circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item
starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of
each term.
The <dl> tag defines the description list, the <dt> tag
defines the term (name), and the <dd> tag describes
each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Define an HTML Table
A table in HTML consists of table cells inside rows and
columns.
Example
A simple HTML table:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of
the table cell.
Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP
HOW TO [Link] C C++ C# BOOTSTRAP REACT
MYSQL JQUERY EXCEL XML DJANGO NODEJS R
TYPESCRIPT ANGULAR GIT POSTGRESQL
MONGODB ASP AWS AI GO KOTLIN SASS VUE GEN
AI CYBERSECURITY DATA SCIENCE
HTML Tables
HTML tables allow web developers to arrange data into
rows and columns.
Example
Company Contact Country
Alfreds Futterkiste Maria AndersGermany
Centro comercial Moctezuma Francisco Chang
Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri
Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
Define an HTML Table
A table in HTML consists of table cells inside rows and
columns.
Example
A simple HTML table:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of
the table cell.
Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Note: A table cell can contain all sorts of HTML
elements: text, images, lists, links, other tables, etc.
ADVERTISEMENT
Table Rows
Each table row starts with a <tr> and ends with a </tr>
tag.
tr stands for table row.
Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
You can have as many rows as you like in a table; just
make sure that the number of cells are the same in each
row.
Note: There are times when a row can have less or
more cells than another. You will learn about that in a
later chapter.
Table Headers
Sometimes you want your cells to be table header cells.
In those cases use the <th> tag instead of the <td> tag:
th stands for table header.
Example
Let the first row be table header cells:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
By default, the text in <th> elements are bold and
centered, but you can change that with CSS.
How To Add a Border
To add a border, use the CSS border property on table,
th, and td elements:
Example
table, th, td {
border: 1px solid black;
}
Collapsed Table Borders
To avoid having double borders like in the example
above, set the CSS border-collapse property to collapse.
This will make the borders collapse into a single border:
Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Style Table Borders
If you set a background color of each cell, and give the
border a white color (the same as the document
background), you get the impression of an invisible
border:
Example
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Round Table Borders
With the border-radius property, the borders get rounded
corners:
Example
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
Skip the border around the table by leaving out table
from the css selector:
Example
th, td {
border: 1px solid black;
border-radius: 10px;
}
Dotted Table Borders
With the border-style property, you can set the
appearance of the border.
The following values are allowed:
dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden
Example
th, td {
border-style: dotted;
}
Border Color
With the border-color property, you can set the color of
the border.
Example
th, td {
border-color: #96D4D4;
}