div tag:
=====
HTML & HTML5 supports div [Link] is a pair tag which mean an opening and
closing [Link] main objective of div tag is create a section or block on web page.
Ex1:
==
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML & HTML5</title>
</head>
<body>
<div>Header Component</div>
<hr>
<div>Left_Side Component</div>
<hr>
<div>Right_Side Component</div>
<hr>
<div>Footer Component</div>
</body>
</html>
HTML5 semantic tags:
==============
HTML5 supports Following sematic tags which are as follows
-><header></header>
-><footer></footer>
-><section></section>
-><nav></nav>
-><figure></figure>
-><figcaption></figcaption>
-><audio></audio>
-><video></video>
-><svg></svg>
Ex1:
===
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML & HTML5</title>
</head>
<body>
<hr>
<header>Header Component</header>
<hr>
<br>
<hr>
<section>Left_Side Component</section>
<hr>
<br>
<hr>
<section>Right_Side Component</section>
<hr>
<br>
<hr>
<footer>Footer Component</footer>
<hr>
</body>
</html>
Ex2:
===
<header>
<h1><tt>Header Component</tt></h1>
</header>
<br>
<section>
<h1><tt>Left_Side Component</tt></h1>
</section>
<br>
<section>
<h1><tt>Right_Side Component</tt></h1>
</section>
<br>
<footer>
<h1><tt>Footer Component</tt></h1>
</footer>
Ex3:
===
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5</title>
</head>
<body>
<fieldset>
<legend>HTML5</legend>
<hr>
<nav>
<ul>
<li><a href="[Link]
<li><a href="[Link]
<li><a href="[Link]
<li><a href="[Link]
</ul>
</nav>
<hr>
</fieldset>
</body>
</html>
Ex4:
===
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5</title>
</head>
<body>
<fieldset>
<legend>HTML5</legend>
<hr>
<figure>
<img src="C:\Users\Admin\Desktop\UI_34_35_36\[Link]" alt="In_valid_path"
height="200" width="200">
<figcaption>HTML5_Image_1</figcaption>
<img src="C:\Users\Admin\Desktop\UI_34_35_36\[Link]" alt="In_valid_path"
height="200" width="200">
<figcaption>HTML5_Image_2</figcaption>
<img src="C:\Users\Admin\Desktop\UI_34_35_36\[Link]" alt="In_valid_path"
height="200" width="200">
<figcaption>HTML5_Image_3</figcaption>
</figure>
<hr>
</fieldset>
</body>
</html>
Ex5:
===
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5</title>
</head>
<body>
<fieldset>
<legend>HTML5</legend>
<hr>
<audio controls>
<source src="" type="audio/video" height="300" width="300">
</audio>
<hr>
</fieldset>
</body>
</html>
Ex6:
===
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5</title>
</head>
<body>
<fieldset>
<legend>HTML5</legend>
<hr>
<video controls>
<source src="" type="mp4/video" height="200" width="200">
</video>
<hr>
</fieldset>
</body>
</html>
svg tag:
=====
HTML & HTML5 supports svg [Link] stands scable vector [Link] main
objective of svg tag is put graphics on the web page.
Ex1:
==
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5</title>
</head>
<body>
<fieldset>
<legend>HTML5</legend>
<hr>
<svg height="400" width="400">
<circle cx="80" cy="80" r="50" stroke="red" stroke-width="5" fill="black">
</svg>
<hr>
</fieldset>
</body>
</html>
Ex2:
===
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5</title>
</head>
<body>
<fieldset>
<legend>HTML5</legend>
<hr>
<svg height="400" width="400">
<rect height="200" width="200" stroke="black" stroke-width="5" fill="red">
</svg>
<hr>
</fieldset>
</body>
</html>
