Learn the HTML address element: marking contact information for a page or an article's author, what it is not for (postal addresses in general), mailto and tel links, line breaks, resetting italic styling, privacy and spam concerns, international phone and address formats, and common mistakes, with live examples.
Learn the HTML article element: marking self-contained content such as blog posts, news stories, comments, and product cards, the stand-alone test for choosing article over section, nesting comments, header and footer inside an article, the time element, clickable cards, user-generated content safety, and common mistakes, with live examples.
Learn the HTML aside element: marking content that is related to the main content but separate from it, such as sidebars, related links, pull quotes, author bios, and advertisements, the remove-it test, the complementary landmark, naming asides, responsive sidebar layouts, safe ads and third-party widgets, and common mistakes, with live examples.
Learn the HTML details element: building expandable and collapsible content with no JavaScript, the open attribute, exclusive accordions with the name attribute, the toggle event, FAQ patterns, styling the marker, accessibility and keyboard behaviour, printing and find-in-page notes, what not to hide, and common mistakes, with live examples.
Learn the HTML dialog element: modal and non-modal dialogs, showModal() and close(), forms with method dialog, the returnValue, the backdrop, focus handling, closing with Escape or a click outside, alert dialogs, accessibility, security, and common mistakes, with live examples.
Learn the HTML footer element: closing information for a page, article, or section, how a page-level footer becomes a contentinfo landmark, what belongs in a footer (copyright, legal links, contact, sitemap, social links), the small element, sticky footer layouts, accessibility, privacy and consent links, global legal notes, and common mistakes, with live examples.
Learn the HTML header element: introductory content for a page, article, or section, how it becomes a banner landmark only at page level, the difference between header, head, and headings, skip links, sticky headers and keyboard focus, accessible logos, language switchers, and common mistakes, with live examples.
Learn the HTML main element: marking the dominant content of a page, why a page should have only one visible main, what belongs inside and outside it, skip link targets with tabindex, single-page app focus handling, reader modes, layout CSS, and common mistakes, with live examples.
Learn the HTML nav element: marking major navigation blocks as landmarks, building menus with lists, naming several navs with aria-label, showing the current page with aria-current, breadcrumbs and pagination, accessible mobile menu buttons with aria-expanded, which link groups should not use nav, and common mistakes, with live examples.
Learn the HTML section element: grouping content by theme with a heading, when to use section instead of div, article, or main, naming a section as a region landmark with aria-labelledby, heading levels and why the document outline algorithm does not work, landing page patterns, and common mistakes, with live examples.
Learn how HTML semantic text elements such as mark, time, small, del, ins, s, dfn, bdi, bdo, data, and ruby add meaning to your content. Improve accessibility, SEO, and global readability with CodeHarborHub.
Learn the HTML summary element: the visible label and toggle control of a details widget, writing clear summary text, what content is allowed inside it, styling or replacing the marker, keyboard and screen reader behaviour, why headings and links inside a summary cause trouble, stable labels, and common mistakes, with live examples.
Learn semantic HTML: choosing elements for their meaning, not their looks. Understand header, nav, main, section, article, aside, footer, address, details, summary, and dialog, why semantic markup helps accessibility, search engines, and maintenance, and how to build a clear page layout, with live examples on CodeHarborHub.
Learn how semantic HTML makes pages accessible: heading outlines, landmarks, lists, buttons versus links, skip links, reading order, and visually hidden text. Includes a live structure navigator that shows what a screen reader user can jump between, and a real skip-link focus test.
Learn how semantic HTML helps search engines and other tools understand a page: main content versus boilerplate, landmarks, articles, sections, figures, dates, lists, tables, and breadcrumbs. Be honest about what semantics do and do not do for ranking. Includes a live semantic page analyzer, an element picker quiz, and a breadcrumb builder with matching structured data.
Put it all together: build a complete, accessible HTML page layout with header, nav, main, article, section, aside, and footer, add a skip link, style it with CSS grid, keep the reading order sensible, and check it with a practical checklist, with live examples.
Learn why semantic HTML matters: how browsers turn markup into an accessibility tree, why a real button beats a clickable div, how semantic elements help screen readers, keyboard users, search engines, and teammates, common myths, and a step-by-step refactor from div soup to meaningful markup, with live examples.