One of the things that new developers and even new designers struggle with is recognizing what elements to use and which ones they should avoid. I have been teaching web design courses for over a decade and the constant problem is students using deprecated elements. Every semester I have to tell some of my students to remove or replace these elements.
I created a short script for my students to put at the bottom of the page so they get alerted in the console on the deprecated elements that they need to pay attention to if added to the page. For example, tags like center, big, marquee, rb, and others should be avoided. The following script can be used at the bottom to find deprecated elements with a link to a description.
/* Finds deprecated tags (HTML elements) and print them on the console.
This helps students to make sure that they don't insert or paste a
deprecated element to their pages. This script is not a replacement
for HTML validators but a little helper that avoids issues while
coding without having to constantly validating their pages.
*/
;(() =>{
let elements = document.querySelectorAll('*');
const deprecatedList = "acronym big center content dir font frame frameset image marquee menuitem nobr noembed noframes param plaintext rb rtc strike tt xmp".split(" ");
let found = [];
elements.forEach((elem) => {
const tag = elem.tagName.toLowerCase();
if(deprecatedList.includes(tag)) {
found.push(`<${tag}>, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/${tag}`);
}
});
console.log(`${found.length} deprecated element${found.length !== 0 ? '' : 's'} found.`);
if(found.length) {
console.log(found);
}
})();I hope this is useful for you to learn more about HTML. Happy coding!