Web Technologies

HTML 5 – Some new tags

<article>
This new HTML5 tag defines space for an article. It’s way easier to use this element instead of <p> if you need a specific formatting for a long text.
<article>
    <h1>HTML5 tags</h1>
    <p>HTML5 tags and their uses</p>
</article>
<dialog>
It defines the dialog box in your website. However, Microsoft Edge and Internet Explorer do not support this tag
<dialog open id=”DialogExample”>
     <p>Here is some text for example.</p>
</dialog>
<source>
The <source> tag allows you to specify alternative video/audio/image files which the browser may choose from, based on its media type, codec support or media query
<audio controls>
     <source src=”melody.mp3” type=”audio/mpeg”>
     <source src=”melody.ogg” type=”audio/ogg”>
</audio>
<nav>
It describes a special space for navigation links on your website
<nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
</nav>
<svg>
Scaling a vector image preserves the quality of the shapes. HTML5 SVG tool is often used for defining graphics on the internet. There are different ways to draw boxes, circles, paths, texts and graphic images using SVG
<svg width=”100” height=”100”>
    <circle cx=”50” cy=”50” r=”40” stroke=”green” stroke-width=”4” fill=”yellow”/>
</svg>
<progress>
The <progress> tag represents the progress of a task
<progress value="30" max="100">
</progress>
<fieldset>
The <fieldset> tag is used to group related elements in a form.The <fieldset> tag draws a box around the related elements
<form>
 <fieldset>
  <legend>Personalia:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text">
 </fieldset>
</form>

Author


Avatar