I was rejected from my first interview for a front-end position due to a lack of technical knowledge. This became an excuse for me to review the technical terms related to HTML and CSS from the beginning:
🔴 HTML
✅ Why do we use <!DOCTYPE html>?
To tell the browser that our page is written with HTML5/CSS, so it can correctly render features like flexbox and grid for us.
✅ What is a Root Element?
It refers to the element/tag, which must have the language or lang attribute.
Why must it have the language attribute? For two reasons: 1. Better SEO (screen readers) and 2. For translation services.
Of course, we can later add this attribute (lang) to any element (tag) we have.
✅ What is Semantic HTML?
It refers to elements (tags) that can define themselves and play a specific, meaningful role on the page. For example, instead of a
<article>, <section>, <header>, <footer>, <main>, <nav>, and similar tags, each with their own specific place and rules.For example:
The and tags should be the first children of .
✅ What are DOM and AOM?
By parsing the semantic tags, the browser can give us two software interfaces (APIs):
- The first is the Document Object Model, which has a tree structure and is used to control the elements on the page.
- The second is the Accessibility Object Model, which is parallel to the DOM but is provided to us in a non-visual way. This interface is what screen readers interact with, and this is where the benefit of using semantic tags becomes tangible. AOM provides us with a landmark for each tag, which SEO and screen readers use. For example, the tag gives us a landmark called "banner," but a tag like has no landmark!
🟥 The concept of semantic HTML or structured tags is one of the most important concepts in web development, and it's essential to know "where," "how," and "why" we place each tag.
Top comments (0)