Read on Twitter
The basic semantic HTML tags such as <header>, <footer> and <nav> are almost self explanatory.
But, there are a host of newer HTML tags that you need to be using as well.
Eight HTML tags that you should be using.
But, there are a host of newer HTML tags that you need to be using as well.
Eight HTML tags that you should be using.
1. <picture>
This tag is similar to <img>, the <picture> element provides flexibility by allowing multiple <source> elements for the same resource, which can adapt based on a media query or image type support.
This tag is similar to <img>, the <picture> element provides flexibility by allowing multiple <source> elements for the same resource, which can adapt based on a media query or image type support.
2. <datalist>
It provides an autocomplete interface for <input> elements. Each list contains a set of <option> elements that have an associated value. When linked to an <input> using the “list” attribute, it can provide a drop-down list.
It provides an autocomplete interface for <input> elements. Each list contains a set of <option> elements that have an associated value. When linked to an <input> using the “list” attribute, it can provide a drop-down list.
3. <dl>
This tag, element serves as a container for groups of defined terms.
Inside, each term (<dt>) and definition (<dd>) are grouped together to form a glossary-like structure. While it applies basic formatting by default, semantic HTML benefits screen readers.
This tag, element serves as a container for groups of defined terms.
Inside, each term (<dt>) and definition (<dd>) are grouped together to form a glossary-like structure. While it applies basic formatting by default, semantic HTML benefits screen readers.
4. <details>
Accordions are a common design pattern when lots of data need to be shown at once, such as question page. By using the <details> element alongside <summary>, we can achieve the same effect without JavaScript. Clicking the summary will toggle the rest of the content.
Accordions are a common design pattern when lots of data need to be shown at once, such as question page. By using the <details> element alongside <summary>, we can achieve the same effect without JavaScript. Clicking the summary will toggle the rest of the content.
5. <dfn>
Complex terms or abbreviations often need defining for those that are not familiar.
A term wrapped in a <dfn> tag will be defined by the text that surrounds it. This is an inline element and is designed to be used to highlight definitions in human language.
Complex terms or abbreviations often need defining for those that are not familiar.
A term wrapped in a <dfn> tag will be defined by the text that surrounds it. This is an inline element and is designed to be used to highlight definitions in human language.
6. <figure>
A figure is defined as a unit of content that often appears in the main flow of a document but can be also interpreted separately.
The <figure> element wraps an image or other reference content and can also include a description of its contents with <figcaption>.
A figure is defined as a unit of content that often appears in the main flow of a document but can be also interpreted separately.
The <figure> element wraps an image or other reference content and can also include a description of its contents with <figcaption>.
7. <code>
it can be useful to visually separate computer code from the rest of the sentence.
By wrapping each occurrence in a <code> tag, the browser can apply some default formatting to display it more appropriately.
Combine with <pre> for larger code blocks.
it can be useful to visually separate computer code from the rest of the sentence.
By wrapping each occurrence in a <code> tag, the browser can apply some default formatting to display it more appropriately.
Combine with <pre> for larger code blocks.
8. <time>
We can write time values differently depending on the context or the language.
By marking these values with the <time> tag, search engines and other automated tooling can quickly extract this information.
We can write time values differently depending on the context or the language.
By marking these values with the <time> tag, search engines and other automated tooling can quickly extract this information.
Now 5 HTML tags to avoid:
1. <font>
2. <menuitem>
3. <big>
4. <center>
5. <marquee>
1. <font>
2. <menuitem>
3. <big>
4. <center>
5. <marquee>
