• HTML stands for Hyper Text Markup Language.
  • HTML describes the structure of Web pages using markup
  • To be a Web Developer HTML learning is a must
  • HTML elements are represented by tags
  • Browsers do not display the HTML tags, but use them to render the content of the page

HTML Elements, Tags & Attribute

<!DOCTYPE html>
<!--- JS/CSS file will be added here -->
<title>Page Title</title>
<h1>This is a Heading.</h1>
<p>This is a Paragraph.</p>
<p style="color:red;">Paragraph with Style Attribute</p>

This is a Heading.

This is a Paragraph.

Paragraph with Style Attribute

  • <!DOCTYPE html> declaration defines this document to be HTML5
  • <html> element is the root element of an HTML page
  • <head> element contains meta information about the document
  • Comments are not displayed in the browser
  • <title> element specifies a title for the document
  • <body> element contains the visible page content
  • <h1> element defines a large heading
  • <p> element defines a paragraph
  • An HTML element usually consists of a start tag and end tag.
  • All HTML elements can have attributes.
  • Attributes provide additional information about an element.
  • Attributes are always specified in the start tag.
  • Attributes usually come in name/value pairs like: name=”value”.
  • Style is an attribute and color is the property and red is its value.

Links & Images

<a href="#">Link</a>
<a href="#" rel="nofollow">Nofollow Link</a>
<a href="#" hreflang="en">Language</a>
<a href="#" type="text/html">Type</a>
<a href="mailto:webmaster@example.com">Email Link</a>.
<a href="#" target="_blank">New Window Link</a>
<!-- target="_blank|_self|_parent|_top|framename" -->
<a href="#" download="filename">Download</a>
<link rel="stylesheet" type="text/css" href="theme.css">
<img src="image.jpg" alt="" height="" width=""/>
  <a href="#">HTML</a> |
  <a href="#">CSS</a> |
  <a href="#/">JavaScript</a> |
  <a href="#">jQuery</a>


<audio controls autoplay>
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
<audio controls loop>
<audio controls muted>
<audio controls preload="none">
<audio src="song.ogg" controls>


<video controls width="" height="" poster="poster.jpg">
<source src="Movie.webm"/>
<source src="Movie.mp4"/>
<track src="" kind="subtitles" srclang="en" label="English" default>
<track src="" kind="subtitles" srclang="no" label="Norwegian">


<iframe src="/portfolio" width="515" height="400">
<p>Your browser does not support iframes.</p>


<!-- Abbreviation --> 
<abbr title="World Health Organization">WHO</abbr>
<!-- Address --> 
Abdullah Al Mamun<br> 
Mirpur 6, Dhaka, Bangladesh<br> 
<a href="mailto:info@workratio.com">Email Me</a><br> 
Abdullah Al Mamun
Mirpur 6, Dhaka, Bangladesh
Email Me
<p><b>Blod Text</b></p><br>
<p><i>Italic Text</i></p><br>
<p><code>Code Text</code></p><br>
<em>Emphasized text</em><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<p>This is a <mark>Mark</mark></p><br>
<p>Why Need <q>HTML</q>?</p><br>
<p><s>My car is blue.</s></p><br>
<strong>Strong text</strong><br>
<p>This is a <u>parragraph</u>.</p>

Blod Text

Italic Text

Code Text

Emphasized text
Sample output from a computer program
Keyboard input

This is a Mark

Why Need HTML?

My car is blue.

Strong text


This is a parragraph.

Abdulah Al Mamun
  Mirpur 6, Dhaka, BD
Abdulah Al Mamun
  Mirpur 6, Dhaka, BD
<!-- bdi -->
  <li>User <bdi>hrefs</bdi>: 60 points</li>
  <li>User <bdi>jdoe</bdi>: 80 points</li>
  <li>User <bdi>إيان</bdi>: 90 points</li>
<!-- bdo -->
<bdo dir="rtl">
This text will go right-to-left.
  • User hrefs: 60 points
  • User jdoe: 80 points
  • User إيان: 90 points

This text will go right-to-left.
<blockquote cite="#">
Work Ratio is my self skill management website.
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<p><dfn>HTML</dfn> is the standard markup language</p>
Work Ratio is my self skill management website.
<p>Design score:
<meter min="0" low="40" high="90" max="100" value="95"></meter>
<p>Development score: 
<meter min="0" low="40" high="90" max="100" value="65"></meter>
<p>Marketing score: 
<meter min="0" low="40" high="90" max="100" value="35"></meter>

Design score:

Development score:

Marketing score:

<progress value="22" max="100"></progress>
<p>2<sup>3</sup> = 8</p>
<p>H<sub>2</sub>0 - Water</p>
<p>This text is <del>scratched</del> out!</p>
<p contenteditable="true">contenteditable</p>
<p><del datetime="">This text has been deleted</del></p>
<details close>
<summary>Copyright 1999-2014.</summary>
<p> - Abdullah Al Mamun</p>

23 = 8

H20 - Water

This text is scratched out!


This text has been deleted

Copyright 1999-2014.

- Abdullah Al Mamun


<dialog open>This is an open dialog window</dialog>
This is an open dialog window


<p>Unordered List</p>
<p>Ordered List</p>
<p>Ordered List with a number</p>
<ol start="10">
<p>Ordered List with exact number</p>
<li value="5">BUET</li>
<li value="10">KUET</li>
<li value="15">RUET</li>
<li value="20">CUET</li>
<p>Description list</p>
  <dd>Black hot drink</dd>
  <dd>White cold drink</dd>

Unordered List

  • BUET
  • KUET
  • RUET
  • CUET

Ordered List

  1. BUET
  2. KUET
  3. RUET
  4. CUET

Ordered List with a number

  1. BUET
  2. KUET
  3. RUET
  4. CUET

Ordered List with exact number

  1. BUET
  2. KUET
  3. RUET
  4. CUET

Description list

Black hot drink
White cold drink


<table class="expand" width="100%">
<caption>Domain Registration</caption>
<th>Basic Reseller</th>
<th>Pro Reseller</th>
<td colspan="4">
If you want to know the other extension pricing please visit
<a href="#">GoDaddy Buy rates</a>
Domain Registration
TLD Basic Reseller Pro Reseller
.com $9.59 $8.29
.net $10.99 $9.99
.org $10.99 $9.99
.ca $9.79 $8.49
.us $7.99 $7.29
.uk $7.99 $7.49
If you want to know the other extension pricing please visit GoDaddy Buy rates


<form action="/page.php" method="POST">
<label>Your name:</label><br>
<input type="text" value="Type" size="30" maxlength="10" />
<label>Your email:</label><br />
<input type="text" name="email" placeholder="Type" size="30" />
<label>Your message:</label>
<textarea name="message" rows="7" cols="30"></textarea>
<input type="file" name="pic" accept="image/*" multiple>
<input type="submit" value="Send email" />

<input type="checkbox" name="service" value="">Domain<br>
<input type="checkbox" name="service" value="" checked>Hosting<br>
<input type="radio" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" name="gender" value="female">
<label for="female">Female</label><br>

<form action="/page.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
<input type="submit">


&reg; &trade; &dollar; &lt; &gt;
© ® ™ $ < >