Semantic HTML
What do we mean by semantic?
Semantic HTML is about using HTML elements in a way that describes the content of the page. Beyond the legibility advantages, semantic HTML also helps search engines understand the content of the page and improves accessibility.
Each HTML element has built-in styling and behaviour. For example,
the
<h1>
element is used to create a heading, and therefore has a larger font
size, whereas the
<a>
element is used to create a link, and is therefor highlighted by an
underline as well as having a different colour.
Those default styles (defined by the user agent stylesheet) vary
from browser to browser. The most notable example being interactive
elements such as
<button>
and
<input>.
<button>Button</button>
<input type="range" value="50" min="0" max="100" />
<input type="color" value="#ff0000" />Advanced: reset styles
To unify the default styles across browsers, you can use a styling reset file. Many of such can be found online, each with their own pros and cons. We've linked on the External resources page.