Today we are going to discuss 5 useful html5 features in Part 3. The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript. I found this very interesting once I saw this.
<time>
The <time> HTML element represents a specific period in time .It is used to display time values in a 24-hour clock or a precise date in a Gregorian calendar in HTML.
<!DOCTYPE html>
<html>
<body>
<h1>The time tag element</h1>
<p>We are open from <time>9:00</time> to <time>21:00</time> every day.</p>
<p>I have a date on <time datetime="2022-02-14 20:00">Valentines day</time> with my Valentine.</p>
</body>
</html>
<datalist>
The HTML <datalist> tag is used to provide an auto-complete feature on the form element. It provides a list of predefined options for the users to select data.
<!DOCTYPE>
<html>
<body>
<label>
Enter your favorite Football player: Press any character<br />
<input type="text" id="favFtblPlayer" list="FtblPlayers">
<datalist id="FtblPlayers">
<option value="Lionel Messi">
<option value="Christiano Ronaldo">
<option value="David Beckham">
<option value="Zinedine Zidane">
<option value="Erling Haaland">
<option value="Kylian Mbappé">
<option value="Neymar Jr">
<option value="Zlatan Ibrahimovic">
<option value="Samuel Eto ">
<option value="Sadio Mane">
<option value="Mohamed Salah">
<option value="Riyad Mahrez">
</datalist>
</label>
</body>
</html>
<mark>
HTML mark tag is used to highlight something
<!DOCTYPE html>
<html>
<body>
<h1>The mark element</h1>
<p>The best cricketer in Indian history is <mark>Sachin Tendulkar</mark>.</p>
</body>
</html>
<output>
HTML <output> tag is used to represent the result of a calculations performed by the client-side scripting languages such as JavaScript.
<!DOCTYPE html>
<html>
<body>
<h1>The output element</h1>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="75">
+<input type="number" id="b" value="25">
=<output name="x" for="a b"></output>
</form>
</body>
</html>
<figure>
The HTML <figure> tag is used to specifies self-contained content, like diagrams, illustrations, code listings, photos, etc.
<!DOCTYPE html>
<html>
<body>
<figure>
<img src="pic_hari_test.jpg" alt="Hari" style="width:100%">
<figcaption>Fig.1 - My pic.</figcaption>
</figure>
</body>
</html>
Hence I am concluding part 3 and hope it helps you
Comments
Post a Comment