In its most basic definition, the word semantics is the study of meanings. In the field of linguistics, it is the study of language development by classifying and examining changes in meaning and form. In web design, semantics are the way in which you convey your content. It refers to the idea that all HTML markup should convey the underlying meaning of the content you are writing – not its appearance.
The concept of the semantic network model was formed in the early 1960s as a form to represent semantically structured knowledge. A semantic element describes its meaning and purpose to both the browser and the developer. It provides machine-readable metadata about pages and how they are related to each other. Pages are structured by multiple containers that hold content. These containers are a general guide that allow the code to be uniform for everyone on every site. This makes the coding process easier by not only providing rules and restrictions but also telling the code which part of the site you are talking about.
There are approximately 110 tags in HTML5. Six standard tags most commonly used are:
<header> : Introduction of the section, article, or entire web page that most often includes a company logo or branding (not to be confused with – headers)
<nav> : contains the site’s navigation links. This tag allows you to markup various navigation sections and related pages i.e., sidebars and table of contents.
An example of the header and navigation semantics tags in use in a project I’m working on.
<section> : Groups and defines a section of the webpage, usually containing an introduction or main part of the content.
<article> : Defines an independent, self-contained article within the webpage.
<aside> : Sets content aside from the main content of the webpage (i.e., ads, sidebars, and call outs).
<footer> : Signifies the footer, or information found at the bottom of a webpage. A footer usually contains information on how to contact a company, the author of a webpage, or copyright information.
A basic example of the layout of these tags.
A standard element in HTML has content enclosed within opening and closing tags, but some are empty (void). Such elements are mostly used to add or embed content into documents.
An example of a void tag, used to insert an image.
In addition to creating a cohesive site structure, semantic tags benefit developers in other ways. They help assistive technologies read and interpret your webpage while also helping computers make sense of your content. Since only 13% of the world are native English speakers, HTML tags create a language that can be easily understood around the world.
Semantics are the backbone of HTML code, their overall objective being to communicate simply and efficiently. They are a key component of web design that create a more orderly, uniform code.
Photo by Miguel Á. Padriñán
Comentários