HTML is not only for developers or designers. It is also part of social media, if you don't know how then i will tell you how.

In On-Page SEO you need to include meta tags which is HTML and while creating email templates you need beautiful designs which is also created in HTML. So, you need HTML for social media.

This whole course is not only for social media marketing but also for young developers and designers. I will try to cover everything in this course and i hope you will like it.

Let's start and one more thing it will be long because i will cover every topic, so you can bookmark this for further reading.

What we learn in HTML?

Introduction HTML

Attributes HTML

Heading HTML

Paragraph HTML

Line Break HTML

Pre Formatting HTML

Styles HTML

Formatting HTML

Links HTML

Images HTML

Tables HTML

List HTML

Introduction HTML

HTML stands for hypertext markup language which describes the structure of a web page. HTML consists of various elements which helps to display content on browser.

HTML elements are represented in tags. Tags are in pairs open tag (<tag>) and close tag (</tag>).

Example HTML

<!DOCTYPE html>

<head>
<title> Title </title>
</head>
<body>
<h1> This is Heading</h1>
<p> This is Paragraph </p>
</body>
</html>

Explain Example

<! DOCTYPE html> : Defines the type of document in html

<html> : This is the root element of HTML

<head> : This contains title, meta information in it.

<title> : Defines title of the page

<body> : Contains visible content

<h1> : Defines larger heading

<p> : Defines paragraph

Attributes HTML

Attributes provide additional information about elements in HTML. Attributes are specified in opening tag with name and value pair ( name="value" ).

Example 1 Attributes:

Explain Example 1:

Here, <a> is element, href is name and https://bdgizmos.blogspot.com/2020/02/the-ultimate-course-on-html-bd-gizmos.html value.

Example 2 Attributes:

Explain Example 2:

Here, <img> is element, src is name and img.jpg value.

Heading HTML

Heading are defined from <h1> to <h6> tag.

Headings are important to show structure of document because search engines use headings to index the structure your web page.

Example Heading

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

Run Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph HTML

Paragraph are defined from <p> tag.

Example 1 Paragraph

<p>This is Paragraph.</p>

Run Example 1

This is Paragraph.

In Paragraph, you cannot change output by adding extra space or extra line.

Example 2 Paragraph

<p>This is Paragraph is

contains extra line and

extra space.</p>

<p>This is Paragraph is

contains extra line and

extra space.</p>

Run Example 2

This is Paragraph is contains extra line and extra space.

If you want to add extra line then you need to use line break tag (<br/>).

Line Break Tag (<br/>)

Line Break tag define extra line in paragraph.

Example Line Break

<p>This is Paragraph is

contains extra line and

extra space.</p>

<p>This is Paragraph is

contains extra line and

extra space.</p>

Run Example

This is Paragraph is

contains extra line and

extra space.

This is Paragraph is

contains extra line and

extra space.

Pre Formatting Tag (<pre>)

Pre Formatting tag are define from <pre/>. It display text as it is in the tags with width of space and extra line.

Example Pre Formatting

<pre>This is Paragraph is

contains extra line and

extra space.</pre>

<pre>This is Paragraph is

contains extra line and

extra space.</pre>

Run Example

This is Paragraph is

contains extra line and

extra space.

This is Paragraph is

contains extra line and

extra space.

Styles HTML

In HTML, style is an attribute. So syntax is:

<tag style="property:value;">

Style is used with the help of CSS to design web page.

Style is implemented in 3 ways:

Inline : Used as attribute in HTML element.

Internal : Using <style> element in <head> section.

External : Using external CSS file.

Inline Style

Used to apply unique style to single HTML element.

Example Inline Style

<h1 style="color:green;">This is heading.</h1>

Run Inline Style

This is heading.

Internal Style

Used to define style for single HTML page.

Example Internal Style

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

h1 {color:green;}

p {color: blue;}

</style>

</head>

<body>

<h1>This is heading.</h1>

<p>This is paragraph.</p>

</body>

</html>

Run Internal Style

This is heading.

This is paragraph.

External Style

Used to define style for many pages in HTML.

Example External Style

<!DOCTYPE html>

<head>

<title>Title</title>

<link rel="stylesheet" href="style.css"/>

</head>

<body>

<h1>This is heading.</h1>

<p>This is paragraph.</p>

</body>

</html>

CSS style.css

h1 {color:green;}

p {color: blue;}

Run External Style

This is heading.

This is paragraph.

Formatting HTML

We have learned heading, paragraph, preformatting, line break, styles, now we will learn about formatting tags.

There are lot of elements in HTML, let talk about formatting elements.

<b> : Bold text

<i> : Italic text

<u> : Underline text

<strong> : Strong text

<em> : Emphasized text

<mark> : Mark text

<small> : Small text

<del> : Deleted text

<ins> : Inserted text

<sub> : Subscript text

<sup> : Superscript text

Example Formatting

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

This is </b>bold.</b>

This is </i>italic.</i>

This is <u>underline.</u>

This is <strong>strong.</strong>

This is <em>emphasized.</em>

This is <mark>mark.</mark>

This is <small>small.</small>

This is <del>deleted.</del>

This is <ins>inserted.</ins>

This is <sup>supscript</sup> text.

This is <sub>subscript</sub> text.

</body>

</html>

Run Formatting

This is bold.

This is italic.
This is underline.
This is strong.
This is emphasized.
This is mark.
This is small.
This is ~~deleted.~~

This is inserted.

This is ^supscript text.
This is _subscript text.

Links HTML

HTML links are basically used to go from one page to another document. When you move mouse over link, mouse arrow will turn into a little hand.

Syntax for Link

<a href="url/link">Link Text</a>

href attribute defines the destination of link. Link text is visible text. Clicking on text will send to the specified address.

Example Link

<a href="https://bdgizmos.blogspot.com/2019/06/on-page-seo-ultimate-guide-bd-gizmos.html">On-Page SEO (The Ultimate Guide)</a>

Run Link

On-Page SEO (The Ultimate Guide)

Local Links

In this you don't need to use whole link, links are specified with file name only.

Example Local Link

<a href="on-page-seo-ultimate-guide-bd-gizmos.html">On-Page SEO (The Ultimate Guide)</a>

Run Local Link

On-Page SEO (The Ultimate Guide)

I hope you got idea how local links work.

Target Attribute in Links

It specifies where to open the link.

_blank - Open linked file in new window.

_self - Open linked file in same window and it is default.

_parent - Open linked file in parent frame.

_top - Open linked file in full window.

Example Target Attribute in Link

<a href="https://bdgizmos.blogspot.com/2019/06/on-page-seo-ultimate-guide-bd-gizmos.html" target="_blank">On-Page SEO (The Ultimate Guide)</a>

Run Target Attribute in Link

On-Page SEO (The Ultimate Guide)

Link Title

Title attribute defines extra information about link. It can be seen you hover mouse over the text.

Example Link Title

<a href="https://bdgizmos.blogspot.com/2019/06/on-page-seo-ultimate-guide-bd-gizmos.html" target="_blank">On-Page SEO (The Ultimate Guide)</a>

Run Link Title

On-Page SEO (The Ultimate Guide)

Images HTML

Images are used to improve website design and appearance. Like in my blog i have been using images.

Syntax Image

<img src="url" />

image is defined with <img>. src is the attribute to specify url and img is self closing tag. So, it does not need any closing tag.

Example Image

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgldOhxtmaLyFtwSCWByMm4MZB8Fp6lz0roisW0D8KeE7AMBB_lzQRNvveHlB_RddBSSfVQ24uNk4_3k9qkl7LtdMnk24JRCRqERneaNzmJ7tOkbe-xmmChn5LEi44Qn3O_ZV9hCG7hHOfP/s640/outside-1-effective-work-groups-1.jpg">

Run Image

Link for image is (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgldOhxtmaLyFtwSCWByMm4MZB8Fp6lz0roisW0D8KeE7AMBB_lzQRNvveHlB_RddBSSfVQ24uNk4_3k9qkl7LtdMnk24JRCRqERneaNzmJ7tOkbe-xmmChn5LEi44Qn3O_ZV9hCG7hHOfP/s640/outside-1-effective-work-groups-1.jpg)

Image Alt Attribute

Alt attribute means alternative text. I user is not able to get image loaded or image link is not available or slow internet connection, then he/she will be available to see alt text.

Example Image Alt

<img src="outside-1-effective-work-groups-1.jpg" alt="On Page SEO">

Always use alt text because search engines search your images based on alt text.

Image Width and Height

Width and height are the attributes used to define images size.

Example Image width and height 1

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgldOhxtmaLyFtwSCWByMm4MZB8Fp6lz0roisW0D8KeE7AMBB_lzQRNvveHlB_RddBSSfVQ24uNk4_3k9qkl7LtdMnk24JRCRqERneaNzmJ7tOkbe-xmmChn5LEi44Qn3O_ZV9hCG7hHOfP/s640/outside-1-effective-work-groups-1.jpg" width="600" height="400">

Run Image width and height 1

Example Image width and height 2

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgldOhxtmaLyFtwSCWByMm4MZB8Fp6lz0roisW0D8KeE7AMBB_lzQRNvveHlB_RddBSSfVQ24uNk4_3k9qkl7LtdMnk24JRCRqERneaNzmJ7tOkbe-xmmChn5LEi44Qn3O_ZV9hCG7hHOfP/s640/outside-1-effective-work-groups-1.jpg" style="width:600;height:400">

Run Image width and height 2

Tables HTML

As by name you understood tables. Tables are used in displaying record, reports, etc on the web.

Table is defined by <table> tag. Rows in table with <tr> tag, heading of table with <th> tag and columns/ cell/ data in table with <td>.

Example Table

<table border="1">
<tr>
<th>Roll Number</th>
<th>Name</th>
<th>Class</th>
</tr>
<tr>
<td>1</td>
<td>Rahul</td>
<td>12th</td>
</tr>
<tr>
<td>2</td>
<td>Karan</td>
<td>11th</td>
</tr>
<tr>
<td>3</td>
<td>Rocky</td>
<td>12th</td>
</tr>
</table>

Run Example table:

Roll Number	Name	Class
1	Rahul	12th
2	Karan	11th
3	Rocky	12th

As you can see it will display like this. but i have used border attribute which gives border to table and i used value "1", you can increase and see the effect.

Table colspan

It makes cell span more than one column then use colspan.

Example Table colspan

<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Address</th>
</tr>
<tr>
<td>Rahul</td>

<td>Pathankot</td>

<td>Punjab</td>

</tr>
<tr>
<td>Karan</td>

<td>Chandigarh</td>

<td>Punjab</td>

</tr>
<tr>
<td>Rocky</td>

<td>Panchkula</td>

<td>Haryana</td>

</tr>
</table>

Run Table Colspan

Name	Address
Rahul	Pathankot	Punjab
Karan	Chandigarh	Punjab
Rocky	Panchkula	Haryana

Table Rowspan

To make cell more than one row for that we use rowspan.

Example Table rowspan

<table border="1">
<tr>
<th>Name</th>
<td>Rahul</td>
</tr>
<tr>
<th rowspan="2">Mobile</th>

<td>99999999</td>

</tr>
<tr>

<td>888888888</td>

</tr>

</table>

Run Table Rowspan:

Name	Rahul
Mobile	99999999
Mobile	888888888

List HTML

There are 3 Types of Lists :

Unordered List

Ordered List

Description List

Unordered List

An unordered list starts with <ul> tag and each list item starts with <li> tag.

Example Unordered List

<ul>

<li>Apple</li>

<li>Grapes</li>

<li>Pineapple</li>

</ul>

Run Unordered List

Apple

Grapes

Pineapple

Types Of List Marker

The CSS list-style-type is used to define style of list marker. There are 4 types of list markers :

disc : It makes list marker as bullet and it by default.

circle : It makes list marker as circle.

square : It makes list marker as square.

none : It makes list with no marker.

Example disc Unordered List

<ul style="list-style-type:disc;">

<li>Apple</li>

<li>Grapes</li>

<li>Pineapple</li>

</ul>

Run disc Unordered List

Apple

Grapes

Pineapple

Example circle Unordered List

<ul style="list-style-type:circle;">

<li>Apple</li>

<li>Grapes</li>

<li>Pineapple</li>

</ul>

Run circle Unordered List

Apple

Grapes

Pineapple

Example square Unordered List

<ul style="list-style-type:square;">

<li>Apple</li>

<li>Grapes</li>

<li>Pineapple</li>

</ul>

Run square Unordered List

Apple

Grapes

Pineapple

Example none Unordered List

<ul style="list-style-type:none;">

<li>Apple</li>

<li>Grapes</li>

<li>Pineapple</li>

</ul>

Run none Unordered List

Apple

Grapes

Pineapple

Ordered List

An ordered list starts with <ol> tag and each list item starts with <li> tag.

Example Ordered List

<ol>

<li>Apple</li>

<li>Grapes</li>

<li>Pineapple</li>

</ol>

Run Ordered List

Apple
Grapes
Pineapple

Type Attribute in Ordered List

type="1" : List item will be number and it is default

type="A" : List item will be uppercase letter.

type="a" : List item will be lower case letter.

type="I" : List item will be uppercase Roman number.

type="i" : List item will be lowercase Roman number.

Example type="1" Ordered List

<ol type="1">

<li>Apple</li>

<li>Grapes</li>

<li>Pineapple</li>

</ol>

Run type="1" Ordered List

Apple
Grapes
Pineapple

Example type="A" Ordered List

<ol type="A">

<li>Apple</li>

<li>Grapes</li>

<li>Pineapple</li>

</ol>

Run type="A" Ordered List

Apple
Grapes
Pineapple

Example type="a" Ordered List

<ol type="a">

<li>Apple</li>

<li>Grapes</li>

<li>Pineapple</li>

</ol>

Run type="a" Ordered List

Apple
Grapes
Pineapple

Example type="I" Ordered List

<ol type="I">

<li>Apple</li>

<li>Grapes</li>

<li>Pineapple</li>

</ol>

Run type="I" Ordered List

Apple
Grapes
Pineapple

Example type="i" Ordered List

<ol type="i">

<li>Apple</li>

<li>Grapes</li>

<li>Pineapple</li>

</ol>

Run type="i" Ordered List

Apple
Grapes
Pineapple

Description List

This is list contains description of each term. The <dl> tag is for description list, <dt> tag defines the term and <dd> tag is describes each term.

Example Description List

<dl>

<dt>Fruit Juice</dt>

<dd>- Contains Mixture of juice</dd>

<dt>Oreo Shake</dt>

<dd>- Contains mixture of milk and oreo.</dd>

</dl>

Run Description List

Fruit Juice: - Contains Mixture of juice
Oreo Shake: - Contains mixture of milk and oreo.

I hope you understood each and every point. If you have any question comment below and i will answer to all your question.

The Coding Dev

The Ultimate Course On HTML | BD Gizmos

What we learn in HTML?

Introduction HTML Attributes HTML Heading HTML Paragraph HTML Line Break HTML Pre Formatting HTML Styles HTML Formatting HTML Links HTML Images HTML Tables HTML List HTML

Introduction HTML

Example HTML

Explain Example

Attributes HTML

Example 1 Attributes:

Explain Example 1:

Example 2 Attributes:

Explain Example 2:

Heading HTML

Example Heading

Run Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph HTML

Example 1 Paragraph

<p>This is Paragraph.</p>

<p>This is Paragraph.</p>

Run Example 1

This is Paragraph.

This is Paragraph.

Example 2 Paragraph

<p>This is Paragraph is

contains extra line and

extra space.</p>

<p>This is Paragraph is

contains extra line and

extra space.</p>

Run Example 2

This is Paragraph is contains extra line and extra space.

This is Paragraph is contains extra line and extra space.

If you want to add extra line then you need to use line break tag (<br/>).

Line Break Tag (<br/>)

Line Break tag define extra line in paragraph.

Example Line Break

<p>This is Paragraph is

contains extra line and

extra space.</p>

<p>This is Paragraph is

contains extra line and

extra space.</p>

Run Example

This is Paragraph is

contains extra line and

extra space.

This is Paragraph is

contains extra line and

extra space.

Pre Formatting Tag (<pre>)

Pre Formatting tag are define from <pre/>. It display text as it is in the tags with width of space and extra line.

Example Pre Formatting

<pre>This is Paragraph is

contains extra line and

extra space.</pre>

<pre>This is Paragraph is

contains extra line and

extra space.</pre>

Run Example

This is Paragraph is

contains extra line and

extra space.

This is Paragraph is

contains extra line and

extra space.

Styles HTML

In HTML, style is an attribute. So syntax is:

<tag style="property:value;">

Style is used with the help of CSS to design web page.

Style is implemented in 3 ways:

Inline : Used as attribute in HTML element. Internal : Using <style> element in <head> section. External : Using external CSS file.

Inline Style

Used to apply unique style to single HTML element.

Example Inline Style

Introduction HTML

Attributes HTML

Heading HTML

Paragraph HTML

Line Break HTML

Pre Formatting HTML

Styles HTML

Formatting HTML

Links HTML

Images HTML

Tables HTML

List HTML

Inline : Used as attribute in HTML element.

Internal : Using <style> element in <head> section.

External : Using external CSS file.

<b> : Bold text

<i> : Italic text

<u> : Underline text

<strong> : Strong text

<em> : Emphasized text

<mark> : Mark text

<small> : Small text

<del> : Deleted text

<ins> : Inserted text

<sub> : Subscript text

<sup> : Superscript text