INTRODUCTION TO SEMANTICS HTML ELEMENTS
One may be asking about the meaning of "HTML semantics." Well, with my little research, I got to know that "HTML semantics" refers to the elements that provide meaning to an HTML page rather than just a presentation. It makes HTML more comprehensible by better defining the different sections and layouts of web pages.
Now, looking at the core characteristic of a semantic element, we see that it communicates its meaning to both the developer and the browser. These elements clearly define its content. They clearly describe their meaning in a human- and machine-readable way.
Elements such as <header>, <footer>, and <article> are all considered semantics because they accurately describe the element's purpose and the type of content inside them.
What are Semantic elements?
HTML was created as a markup language to describe documents on the early internet, but as the internet grew and was adopted by more people, its needs changed.
Where the internet was initially intended for sharing scientific documents, people wanted to share other things as well. Quickly, they started wanting to make the web look nicer.
Because the web was not initially built to be designed, programmers used different hacks to get things laid out in different ways. Rather than using the <table></table> to describe information, they would use it to position other elements on the page. As the use of visually designed layouts progressed, programmers started to use generic “non-semantic” tags like <span> and <div>, which served only as content holders but gave no indication as to what role that content plays on the page. They often gave these elements a class or id attribute to describe their purpose. So instead of the <header> tag, the div tag was frequently written as <div class="header">.
Note that this use of non-semantic elements is still very common on websites today, as HTML5 is still relatively new.
Why use semantic elements?
Here are two pieces of HTML code. The first block of code uses non-semantic elements:
Whilst the second block of code uses semantic elements:
Here, you will see the div tags were replaced with 4 new tags: header, section, article, and footer. These tags are semantic because they are used to represent different sections on an HTML page. They are more descriptive than div tags which makes partitioning web pages into tangible sections difficult.
REASONS/ BENEFITS: Semantics are much easier to read. This is probably the first thing you will notice when looking at the first block of code using semantic elements. This is a small example, but as a programmer, you can be reading through hundreds or thousands of lines of code. The easier it is to read and understand that code, the easier it makes your job.
It has greater accessibility. You are not the only one that finds semantic elements easier to understand. Search engines and assistive technologies (like screen readers for users with a sight impairment) are also able to better understand the context and content of your website, meaning a better experience for your users.
Semantic HTML tags are important for SEO (search engine optimization) because they indicate the role of the content within the tags. This information gives search engine crawlers, like Googlebot, a better understanding of your content. It increases the chances that your content will be selected as a candidate for ranking on the search engine results page (SERP) for relevant keywords. To put it simply, pages with correctly implemented semantic HTML have an advantage in SEO over those that don’t.
Overall, semantic elements also lead to more consistent code. In summary, finding blocks of meaningful code is significantly easier than searching through endless divs with or without semantic or namespaced classes. Elements such as <header>, <nav>, <section>, <footer>, etc., act more or less like <div> elements. They group other elements into page sections. However, where a <div> tag could contain any type of information, it is easy to identify what sort of information would go in a semantic <header> region.
Types of HTML Semantic Tags
Semantic tags can define different parts of a webpage. Let’s take a look at the most common semantic HTML elements, divided into two categories based on their usage:
· HTML semantics tags for structure
· HTML semantics tags for text
Get GOE’s stories in your inbox
Join Medium for free to get updates from this writer.
Structural semantics tags: They communicate the layout of a page.
· <header>: The header tag defines content that should be considered the introductory information of a page or section. It typically contains a set of navigational links, one or more heading elements (<h1> — <h6>), a logo or icon, and authorship information.
· <main>: This specifies the main page content and should be unique. To add some content to the main section, we can use new HTML5 tags, such as articles and section. These tags simplify the structure of the main.
· <article>: This element contains the main part, containing information about the web page. It defines content that could stand independently of the page or site it’s on. It does not necessarily mean a “blog post.” Think of it more as “an article of clothing” — a self-contained item that can be used in various contexts.
· <section>: This defines a web page section. According to W3C’s HTML documentation: A section is a thematic grouping of content, typically with a heading. A web page could normally be split into sections for introduction, content, and contact information. A section tag differs from an article tag. It isn’t necessarily self-contained, but it forms part of something else.
· <nav>: The navigation tag is used for navigation links. It can be nested within the <header> tag, but secondary navigation <nav> tags are also commonly used elsewhere on the page.
· <aside>: This is often placed as a sidebar in a document- areas that add complementary but nonessential information. It is indirectly related to the surrounding content.
· <figure>: This is for wrapping your image content around it while <figcaption> is an element used to caption your image. It defines a caption for a <figure> element. The <figcaption> element can be placed as the first or last child of a <figure> element.
· <small>: It often appears within a <footer> or <aside> element which would usually contain copyright information or legal disclaimers, and other such fine print. However, this is not intended to make the text smaller. It is just describing its content, not prescribing presentation.
· <footer>: It defines a footer for a document or a section. It contains authorship information, copyright information, contact information, a sitemap, and back-to-top links. One can have several <footer> elements in one document.
Text semantics Tags: The semantic HTML tags for text are HTML tags that — besides the formatting — also convey the semantic function of the text they contain.
- <h1> (heading): The h1 tag marks the top-level heading. There’s usually only one H1 heading per page.
- <h2> to <h6> (subheadings): The subheadings of various levels of importance. There can be multiple headings of the same level on a single page.
- <p> (paragraph): A standalone paragraph of text.
- <a> (anchor): Used to mark up a hyperlink from one page to another.
- <ol> (ordered list): A list of items that are displayed in a particular order, starting with bullet points.
- <ul> (unordered list): A list of items that do not need to be displayed in a particular order, starting with ordinal numbers.
NOTE: <li> (list item) tag contains a single item in the lists (ordered and unordered).
- <em> (emphasis): Used for a text that should be emphasized.
- <strong> (strong emphasis): Used for a text that should be strongly emphasized.
Note: We’ve only listed some of the most common semantic HTML tags. You can use many others — like <summary>, <time>, <q>, <video>, <code>, etc. — to make the content of your website easier to understand. To discover more HTML semantic elements, you can check them out on Google.
