Scribd
Upload
64 views8 pages

Basic HTML5 Document: Page Title This Is Hiren Mer.

The document provides information about various HTML5 tags like header, footer, figure, audio, video, dialog and their usage. It also explains tags like nav, time, details etc and their attributes.

Uploaded by

manan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
64 views8 pages

Basic HTML5 Document: Page Title This Is Hiren Mer.

The document provides information about various HTML5 tags like header, footer, figure, audio, video, dialog and their usage. It also explains tags like nav, time, details etc and their attributes.

Uploaded by

manan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Basic HTML5 Document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>This is Hiren Mer.</p>
</body>
</html>

HTML Tags
<html> <head> <body>

<title> <script> <p>

<div> <hr> heading<h1>…<h6>

<a href> <img> <frame>

<table> <tr> <td>

<th> <caption> <label>

<li> <ol> <dl>

<dt> <dd> <area>

<button> <iframe> <Strong>

<marquee> <input> <option>

<pre> <select> <style>

<textarea> <th> <Fieldset>

Prepared by: Prof.Hiren Mer


Reference: http://technicalyogi.com/tutorials/html5_tutorials
Header Tag
 There are several sections of web pages having a distinct function. From the beginning,
only the topmost part is used as the header which defines what the page contains. In
HTML5 they provided the separate <header> tag for that. The header tag can contain
multiple heading tags, logos etc.
 It cannot be placed below the <footer> tag, <address> or other <header> tag.

<!DOCTYPE>
<html>
<body>
<header>
<h1>Hiren Mer</h1>
<p> no. 1 tutorial website</p>
</header>
</body>
</html>

Footer Tag
 There are several sections of the web page having a distinct function. The button most is
used as the footer. In HTML5 a separate <footer> tag provides that is used to replace the
<div> tags that are were used for same.
 It cannot be placed in the <header> of the document.

<!DOCTYPE>
<html>
<body>
<footer>
<p>Posted by: Hiren Mer</p>
<p>
WEB DESIGN
</p>
</footer>
</body>
</html>

Figure Tag
 <figure> tag is used to markup an image in the Html document. The content is related to
main flow, but its position is not related to main flow or its independent. As it
independent so its removal does not affect the main flow.
 <figure> tag represents self-contained contents like photos, code, diagrams.

Prepared by: Prof.Hiren Mer


Reference: http://technicalyogi.com/tutorials/html5_tutorials
<!DOCTYPE>
<html>
<body>
<p>"Thoughts are things", We believe what you think
makes you what you are. And our thought is clear to
share knowledge with all you guys as much as possible.
This site is for all people who want to learn. We are
also lifelong learners. Learning never ends!</p>
<figure>
<img src="preview.jpeg" alt=""/>
</figure>
</body>
</html>

Figcaption Tag
 This tag is used in conjunction with <figure> tag. It provides a caption to the particular
element.

<figure>
<img src="preview.jpeg" />
<figcaption>Fig.1 - my tutorials logo</figcaption>
</figure>

Aside Tag
 The aside tag provided the information about content that are tangentially related to
content <aside> element.

<p>I live in Varanasi</p>


<aside>
<h3>VVNAGAR</h3>
<p>VVNAGAR is a EDUCATION HUB.</p>
</aside>

Article Tag
 The article tag is used when we want to markup a content that makes sense on its own i.e.
independent from other contents on the site.
 We cannot use article tag in every paragraph. We can use in contact us, about us, web
blogs.

<article>
<h2>HIREN MER</h2>

Prepared by: Prof.Hiren Mer


Reference: http://technicalyogi.com/tutorials/html5_tutorials
<p>"Thoughts are things", We believe what you think
makes you what you are. And our thought is clear to
share knowledge with all you guys as much as possible.
This site is for all people who want to learn. We are
also lifelong learners. Learning never ends! </p>
</article>

Audio Tag
 In the previous version of HTML, you can play audio in the browser by using plug-in
only. But HTML5 <audio> tag provides this freedom to embed audio in a web page and
no plug-in required.
 It supports following file format –
1.mp3 2. Ogg 3. Wav

<audio src="D:\mysong.mp3" type="audio/mp3" controls


autoplay loop>
</audio>

OR

<audio controls width="300px" height="200px" autoplay>


<source src="Jag Ghoomeya.ogg" type="audio/ogg">
<source src="Jag Ghoomeya.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

Attributes of Audio Tag -

control:-This attribute provides the control to users like playback, volume, and resume/pause.it
accepts Boolean value.
autoplay:-It is used to play audio automatically when the web page gets loaded.it accepts the
Boolean value.
loop:-It takes the Boolean value and play the audio again when it reaches the end.

src:-this is used to embed URL of the audio file.

Video Tag
 In html5 we can add videos using a single element and we don’t have to bother about the
plug-ins, as in previous of HTML we have to do so.

Prepared by: Prof.Hiren Mer


Reference: http://technicalyogi.com/tutorials/html5_tutorials
 It supports following file formats –

1. MP4 video/mp4
2. WebM video/webm
3. Ogg

<video controls>
<source src="myvideo.mp4" type="video/mp4">
Your browser does not support the html video tag.
</video>

Attributes of Video Tag -

 control:-This attribute provides the control to users like playback, volume, and resume/pause.it
accepts Boolean value.

 autoplay:-It is used to play the video automatically when the web page gets loaded.it accepts the
Boolean value.

 loop:-It Takes the Boolean value and play the video again when it reaches the end.

 Height/width:-This attribute is used to specify height and width of the video player on the web page.

 src:-This is used to embed URL of the video file.

Dialog Tag
 The dialog element is used to create a popup dialog or interactive component on the
webpage. There is a Boolean attribute open which facilitates the user to interact with it.

<div>
<dialog id="Dialog" style="width:50%;background-
color:#F4FFEG;border:1px dotted black;">
<p>OHH!</p>
<button id="hide">Close</button>
</dialog>
<button id="show">View Dialog</button>
</div>
<script type="text/JavaScript">
(function() {
var dialog = document.getElementById('Dialog');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('hide').onclick = function() {
dialog.close();
};
})();
</script>

Prepared by: Prof.Hiren Mer


Reference: http://technicalyogi.com/tutorials/html5_tutorials
Datalist Tag
 It's the new tag introduced in HTML5, by using which we can create the simple auto-
complete feature on web page/application. Basically, the datalist tag is used to create the
list of data.
Enter your favorite Subject: press any character<br>
<input type="text" id="favSubject" list="Subjects">
<datalist id="Subjects">
<option value="Java">
<option value="Android">
<option value="Network">
<option value="Asp .net">
<option value="HTML">
</datalist>

Navigation Tag
 The nav tag is used for primary navigation. All the links related to primary navigation can
be placed inside the nav tag but not all. these can be multiple <nav> tag in the web page
as depending on their navigation. The navigation can be within page or outside.

<nav>
<a href="index.html">HTML</a> |
<a href="java.html">JAVA</a> |
<a href="youtube.html">Youtube</a> |
</nav>

Time Tag
 By using time tag we can encode the time and/ or date in the machine-rea dable language.
Which makes it easy make a schedule or helps search engine to make a more specific
search.

<p>I wake up at<time>06:00</time> in the


morning.</p>
<p>Our office is open on
<time datetime="2017-10-23">next Monday</time>.</p>
<p>the dipawali is coming on
<time datetime="2017-10-19">Thursday</time>.</p>

Details Tag
 It’s a new tag in HTML that provides the flexibility that user can hide or display the
additional details as per required. The <details> tag contained, contents will not be visible
unless its attribute open is set.

Prepared by: Prof.Hiren Mer


Reference: http://technicalyogi.com/tutorials/html5_tutorials
<details>
<summary>Our website detail </summary>
<p> We created this You can also share your own
knowledge and content with us.</p>
</details>

Summary Tag
 The <summary> tag is used to specify the heading that will be visible in the <details>
tag. It's the new tag in HTML5 and it should be only be used inside the <details> tag.

Progress Tag
 The progress tag is used to display the progress of the task. i.e., how much task is
completed? The progress tag contains two attributes which specify the how much work
the task requires in total and other specify how much task completed.

Attributes of Progress Tag -

 Max:-It describes how much work the task requires in total. Its value should be greater than
zero(0) and by default value is 1.
 Value:-It describes how much task has been completed. Its value should be in between 0 and max
value.

<progress value="70" max="100"></progress>

Meter Tag
 This tag is used to represent the scalar value within fractional value/know the value. It
can't be used to show progress as there is a separate tag <progress> for that.

Attributes of Meter Tag

 High:- It defines the high value of the range.


 Low:- It defines the low value of the range.
 Max:-It shows the maximum value.
 Min:- It shows the minimum value.
 Optimum:- It's an optional Attribute which specifies the optimum value for the meter.
 Value:-It defines the measured value

<meter value="60" min="1" max="100"></meter>

Prepared by: Prof.Hiren Mer


Reference: http://technicalyogi.com/tutorials/html5_tutorials
Section Tag
 The <section > tag provides the section on the web page such as header, footer, cheater or
any other section.

<section>
<h1>HIREN</h1>
<p>We created this educational site in 2017 and our motive is
to provide you tutorials, blogs, gadgets info etc.We also
provide youtube videos on various technical aspects. So please
go and subscribe my channel for latest updates. You can also
share your own knowledge and content with us..</p>
</section>

Mark Tag
 The <mark> tag introduced in HTML5. This tag is used to the marked and highlight the
text. If you want to highlight the particular text or particular line in the web page so we
enclose it in between the <mark> tag.

<p>My website name is <mark>Web Designing</mark> .</p>

Wbr Tag
 The <wbr> tag is used to provide a line break in a long word. The WBR stands for Word
Break opportunity. Its mainly used with long words, when we are afraid that browser will
break the line at a wrong point.

<p>nirbhaykumarsinghyogeshpandeyabhishekshuklaanups
uniltiwarinirbhaysinghkumaryogehjkghkjgjkgksunil
tiwari</p>
<p>It will look like this after using wbr
tag.<br><i><wbr>nirbhaykumarsinghyogeshpandeyabhish
ekshuklaanupsuniltiwarinirbhaysinghkumaryogeh<wbr>j
kghkjgjkgk<wbr>sunil tiwari</i></p>

Prepared by: Prof.Hiren Mer


Reference: http://technicalyogi.com/tutorials/html5_tutorials

You might also like