Semantic HTML

In short: Semantic HTML means choosing elements by their meaning, for example <nav> for navigation and <button> for buttons, instead of building everything from <div>.

In more detail: Browsers, search engines and screen readers read the meaning of tags. A <button> is automatically keyboard-operable and announced as a button. A <div onclick> cannot do any of that by itself.

In Depth

• Page structure: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>.
• Headings: <h1> to <h6> in logical order, without skipping levels.
• Lists and tables: <ul>, <ol>, <table> with <th> for header cells.
• Forms: Every input gets a <label>.
• Gain: Accessibility, better SEO, less code, easier maintenance.

See also: Web components