Video Transcript:

HTML5 brought a lot of new semantic tags, which gave more meaning and clarity to HTML tags. It was welcoming news for web designers, who no longer had to manipulate <div> tags to create their website layout structure.

While most designers are used to basic HTML semantic like <header>, <footer> and <nav> tags, there is an overload of newer HTML tags that web designers need to be using as well. Some of which we will be exploring in a bit.

My name is Noah Olatoye and welcome to 5MDC, where every week, we release design and coding tips that will sharpen your skills regardless of your discipline. In this week, we will be looking at 5 HTML tags you should use often.

<picture>

The <picture> tag gives web developers more flexibility in specifying image resources. The <picture> tag is similar to <img> the image tag.

The most common use of the <picture> element will be for image direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.

The <picture> element contains two tags: one or more <source> tags and one <img> tag. When you declare this element type, it is the work user-agent (which is the browser) to look for the first element where the media query matches the viewport. Which at the end will display the proper image.

The reason we still have the <img> tag is to serve as the fallback in the event the user agent couldn't find the source tag that matches.

In other words, the <picture> works similarly to <video> and <audio>. You set up different sources, and the first source that fits the preferences is the one being used.

<datalist>

The <datalist> tag provides an autocomplete interface for <input> elements. Users will see a drop-down list of pre-defined options as they input data. The <datalist> element's id attribute must be equal to the <input> element's list attribute (this binds them together).

<dl>

Another tag is the <dl> tag which means definition list. The tag is used to group defined terms, each definition list item contains two entries; a term and a description. You can imagine it as a title and description bind together.

<time>

The <time> tag defines a specific time. The tag helps search engines and other automated tools to translate the time into a machine-readable format which the browser can then properly format and search engines can produce smarter search results.

<code>

The code tag is used to separate written sentences from blocks of computer code. The content inside is displayed in the browser's default monospace font. It is a way of helping the user-agent and screen reader to treat that portion as a computer-readable code.

Okay, everyone!

While it is ideal we tailor our content for clear visibility from the view's perspectives, always think about accessibility, most especial for those who rely on screen readers. We must let the browser know our intention as a developer or designer. Using these tag will give your website a higher search rank and better presentation.

Thank you all for watching, if you like this video, give it a thumbs up and do follow us on our social media handles, by doing so, you will be notified every time we release a new tip.

Until next time, see you in the next one.