Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
Text Semantics: Headings, Paragraphs, Lists, Links, Buttons and Inline Elements
Something that takes the user to another address is an a, something that performs an action on the page is a button; href="#" and a clickable div work only partly or not at all with a keyboard. In this post we look at strong/em versus b/i, book details with dl, time, abbr, code/kbd/samp, blockquote/q/cite and figure in Chromium's accessibility tree, measure link versus button with a real keyboard test, and check the implicit noopener behaviour of target="_blank" in two engines.
Semantic HTML and Landmarks: header, nav, main, article, section, aside, footer and search
Semantic elements turn into landmarks in the accessibility tree; but an unnamed section does not become a region, a header inside an article does not become a banner, and an h1 inside a section is still level one. In this post we move Bookstore's book detail page from div soup to a semantic structure, read every step from Chromium's accessibility tree, and settle the section/article/div decision, the search element, the single main rule and heading hierarchy without an outline algorithm.