Scribd
Upload
14 views

HTML 6

Uploaded by

M
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views

HTML 6

Uploaded by

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

div tag:

=====
HTML & HTML5 supports div tag.It is a pair tag which mean an opening and
closing tag.The 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="http://www.indeed.com">INDEED</a></li>
<li><a href="http://www.monster.com">MONSTER</a></li>
<li><a href="http://www.linkedin.com">LINKED_IN</a></li>
<li><a href="http://www.naukri.com">NAUKRI</a></li>
</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\u1.png" alt="In_valid_path"
height="200" width="200">
<figcaption>HTML5_Image_1</figcaption>
<img src="C:\Users\Admin\Desktop\UI_34_35_36\u1.png" alt="In_valid_path"
height="200" width="200">
<figcaption>HTML5_Image_2</figcaption>
<img src="C:\Users\Admin\Desktop\UI_34_35_36\u1.png" 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 tag.svg stands scable vector graphics.The 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>

You might also like