p
or div
elements for everything, more often than not there is a more appropriate and semantic element to be used. For example, while it may just be easier to use the paragraph tags for all blocks of text, li
, h1
through h6
or any other elements may be a more suitable choice for the text at hand. This post will take a look at why semantic code matters, and some of the elements you may commonly utilize in writing HTML.
Semantic Code HTML
Semantic HTML refers to an HTML code that utilizes HTML tags. It is an effective way to describe the objective of different page elements. A semantic HTML code conveys each element’s meaning to humans and as well as computers. As a result, it makes search engines, human developers, web browsers, and assistive technologies understand different aspects of a web page much better.
What is a Semantic Code?
In the programming landscape, semantics communicates and contextualizes the meaning of a code. It is the main reason semantic code continues to be in the spotlight and has become highly relevant for frontend developers.
What is a Semantic Tag in HTML?
In layman’s terms, developers use semantic HTML tags with relevant meaning to create specific pages. These pages communicate information better than tags that revolve around <div>. It is crucial to understand that developers use semantic tags in HTML to communicate a specific meaning rather than showcase visual presentation.
Common semantic HTML tags include:
Tag | Form |
<acronym> | Acronym |
<abbr> | Abbreviation |
<dfn> | Definition |
<blockquote> | Quotation |
<cite> | Citation |
<address> | Author’s address in a document |
<em> | Emphasis |
<ins> | Inserted text |
<span> | Inline style container |
<tt> | Teletype text |
<div> | Logical division |
<code> | Code reference |
<strong> | Bold emphasis |
<del> | Deletion of text |
<h6> | Sixth level headline |
<h5> | Fifth level headline |
<h4> | Fourth level headline |
<h3> | Third level headline |
<h2> | Second level headline |
<h1> | First level headline |
<sub> | Sample output |
<pre> | Pre-formatted text |
<var> | User defined variable text |
<sup> | superscript |
<kbd> | User input text |
Which HTML Tags Are Semantic?
HTML5 tags and most HTML4 tags contain semantic meaning. The objective of using HTML tags is to convey the intended meaning without errors. When it comes to HTML tags, there is no need for concern about “how” a webpage looks. Instead, the focus is on the standards you plan to follow to use each tag.
In HTML5, there is redefined the semantic meaning of the <i> and <b>. Although it boils down to the nature of the content, you should select suitable elements that complement the text’s meaning. The most common HTML semantic tags include:
<a> – represents a hyperlink
<button> – denotes a button element
<h1>,<h2>,<h3>,<h4> <h5>,<h6> – Page headings in a descending order
<emphasis> and <strong> – highlights the importance of text inside the code
<header> and <footer> – represents categorization of a web page
<ul> and <ol> – indicates structured and non-structured lists
How Do You Write Semantics in HTML?
The secret to write perfect semantics in HTML is to use semantic tags. Semantic HTML tags contain names that pinpoint the machine or human about the purpose of the code. For example, the paragraph(<p> ) tag is a typical HTML semantic tag. It means the entire content from the start of the <p> and end </p> tag represents the text of the paragraph block. It allows any device or person to read this tag and understand its objective.
Document Structure or Page Layout
For the sake of high-level page or document structuring, use the proper tags of nav, section, article, main, header, footer, and aside.
Inline Text Semantics
When it comes to content, use structured headers and <p> tags to ensure the right data structuring. You can also use<dl>,<ol>, and <ul> for the lists. If the screen reader breaks down the paragraph then you can skip multiple sections.
But there is more than one consideration when you write semantic HTML. For instance, don’t use tables for complex layouts and don’t skip alt and title attributes. Simultaneously, make sure you validate your HTML semantics accurately and describe the intended meaning of semantic elements you want to use.
You should also focus on accurate h1, h2, h3, and so forth headings to create the most logical outline. You should also use semantic id values and class names. Also, practice tabular data with different features.
Is Semantic HTML Better?
Writing semantic HTML comes with many benefits. It’s a strategic approach for each web page and allows you to consider the placement of different elements. In the end, writing semantic HTML is worth the effort and time.
Semantic HTML can influence the web page’s SEO and help search engines prioritize at a higher scale. In addition, semantic HTML makes it easier for impaired individuals to navigate a web page. It also informs developers about the kind of data that will increase over time. Through semantic HTML, looking for meaningful code blocks is easy and simple than endlessly searching through<div>.
Semantic HTML SEO
With semantic HTML, search engines can index and prioritize the “right” content. For instance, you can use display <li> elements for Google snippet lists. For the past few years, semantic HTML continues to evolve and complements standard SEO practices that align with Google’s rules.
On top of SEO, proper tags make it easier to maintain content in a clear hierarchical structure. After all, search engines analyze the web content in order to index it. The good news is that the rise of HTML5 has paved the way for several new semantic elements. And a semantic HTML code plays an integral role in boosting the ranking of a site on a search engine like Google.
What are the new HTML5 Semantic Elements?
There is a variety of elements that developers use for basic purposes such as lists and paragraphs. Developers also use elements like <output>and <progress> for specific content tasks.
Although HTML5 may be relatively new, using non-semantic HTML5 elements has become quite common on sites now. Some of the common HTML5 semantic elements include <article>, <detials>, <figure>, <header>, <footer>, <nav>, <section>, <aside>, <summary>, <figcaption>, <main>, <time>, <main>
Remember that elements like <nav>,<article>,<section>, <header>, <footer>, and <aside> function as <div> elements. These elements tie together other elements onto the page sections. Also, a typical <div> tag can contain any information. Ultimately, it becomes easier for developers to spot and navigate categorical information in a semantic <header> area.
Why care about semantic code
There is some debate as to whether or not semantically-correct HTML improves SEO, but one significant gain is ensuring that your content is as accessible as possible to everyone, regardless of device or user’s disabilities. Semantic code will be better processed by screen readers and other tools that create an equal opportunity for accessibility. Writing semantic code may take longer and require more consideration, but it pays off in terms of contributing to web accessibility.
Common examples of semantic code
Abbreviations
The abbreviation element should be used whenever an abbreviation or acronym is utilized on the page. The title
attribute is for the full value of the abbreviation. Hovering over the abbr
element will reveal the full value:
<abbr title="JavaScript">JS</abbr> <abbr title="World Wide Web">WWW</abbr>
Subscripts & Superscripts
Subscripts and superscripts are commonly used for scientic notation, typographical conventions and other uses. Some typical examples:
<!-- Below is a subscript --> H<sub>2</sub>0 <!-- Below is a superscript --> 2<sup>nd</sup> Place
Code Snippets
It’s often useful to be able to represent code excerpts on an HTML page — we regularly do this in our tutorials here on this blog. The code
and pre
elements can both be used for code snippets. code
is better for single values or words that should be taken as part of code (similar to how the span
element works). Used in conjunction with pre
, code
will then show whole blocks of code, with the relevant formatting of whitespace and line breaks:
<!-- An inline code example --> You should always use the <code>img</code> tag for image elements. <!-- An example of a code block --> <pre><code> p { font-family: Helvetica; font-size: 16px; color: blue; }</code></pre>
Linebreaks and Wordbreaks
br
element for linebreaks, and the wbr
element for wordbreaks.. Common examples include mailing addresses, as well as a URL you may want to break down into its constituent words, in case the word needs to wrap onto two lines:
<!-- Here is a line break --> 811 W. 7th St.<br> Los Angeles, CA<br> USA <!-- Here is a word break --> https://sunlight<wbr>media.org
This blog post has just scratched the surface, but there are many more HTML elements specifically for writing semantic code. We will survey more advanced examples of semantic code in a future post.
Author Bio
Angelo Frisina is a highly experienced author and digital marketing expert with over two decades of experience in the field. He specializes in web design, app development, SEO, and blockchain technologies.
Angelo’s extensive knowledge of these areas has led to the creation of several numerous award winning websites and mobile applications, as well as the implementation of effective digital marketing strategies for a wide range of clients.
Angelo is also a respected consultant, sharing his insights and expertise through various podcasts and online digital marketing resources.
With a passion for staying up-to-date with the latest trends and developments in the digital world, Angelo is a valuable asset to any organization looking to stay ahead in the digital landscape.
One Comment
Thanks for sharing the knowledge and keep up the good work.