When people tell me they are interested in web development and ask me where to begin. My response has always been to start with “HTML” it’s easy. Reflecting back on earlier introduction to web development it was really easy especially with html4 and probably hands down the easiest programming language.
HTML is an incredible and powerful markup language that can be used to give web application structure while also providing powerful accessibility benefits.
Today we will focus on 10 HTML element tags that should in your tool bag and ideally, it will aid you and ensure that your site is a more accessible and structurally sound web presence.
- Audio
- Blockquote
- Output
- Picture
- Progress
- Meter
- Template
- Time
- Video
- Word Break OP
Audio
<audio> <source src="bulbasaur.mp3" type="audio/mpeg" /> <source src="bulbasaur.ogg" type="audio/ogg" /> <source src="bulbasaur.wav" type="audio/wav" /> </audio>
Blockquote
this tag specifies a section that is considered a quote from some other source.
<blockquote> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </blockquote>
Output
This tag is a little fancier because it represents the results of a calculation. You can use the plus sign and equal symbol to indicate that the first and second input values should be “outputted” to the output tag; you can denote this with a for attribute containing the ids of the two elements to combine.
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> <input type="range" id="a" value="50"> +<input type="number" id="b" value="25"> =<output name="x" for="a b"></output> </form>
Picture
This tag allows the user to specify the image sources. Instead of having an image that you scale up and down depending upon the viewport width, multiple images can be designed to fill the browser viewport. the tag is partnered with additional tags <source> and <img> tags. the following attributes are to keep in mind when using the <picture> tag.
- media: accepts any valid media query that you might define within CSS
- type: defines the MIME-type
- sizes: defines a single width value
- srcset: this is a required attribute. defines the URL of the image to display
<picture> <source media="(min-width:650px)" srcset="charmander.jpg"> <source media="(min-width:465px)" srcset="evee.jpg"> <img src="squirtle .jpg" alt="pokemon" style="width:auto;"> </picture>
The <img> tag is used to provide backward compatibility if a browser doesn’t support the <picture> tag or if none of the <source> tags to match.
Progress
This tag represents the progress of a task. the tag is not a replacement for the <meter> tag, thus components indicating disk space usage or query result relevance should use the <meter> tag.
<progress id="file" value="32" max="100"> 32% </progress>
Meter
this tag defines a scalar measurement within a defined range or a fractional value. Many also refer to this tag as a “gauge”. the tag can be used to display disk usage statistics or to indicate the relevance of search results.
<label for="disk_c">Disk usage C:</label> <meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br> <label for="disk_d">Disk usage D:</label> <meter id="disk_d" value="0.6">60%</meter>
Template
This tag contains content that is hidden from the user but will be used to instantiate the HTML code. Using javascript you can render this content with the cloneNode() method.
<template> <h2>Pokemon</h2> <img src="charmander.jpg" width="214" height="204"> </template>
Time
This tag defines a human-readable date or time. This can be used to encode dates and times in a machine-readable manner so that user agents can add reminders or scheduled events to the user’s calendar. This is also helpful for search engines to produce smarter search results.
<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p> <p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>
Video
This tag specifies a video stream or movie clip. Similar to the audio tag it has formats that are supported: MP4, WebM, and Ogg
<video width="320" height="240" controls> <source src="mewtwo.mp4" type="video/mp4"> <source src="mewtwo.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
Word Break Opportunity
If you have a long block of text or a long word you can use this tag to specify where in a body to text it would be ideal to break on.
<p>To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.</p>
