Understanding Semantic Code

Understanding the proper use of semantic code in your HTML will go a long way to make sure all of your content is presented exactly as it was intended. While it is often tempting to simply use 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

Since crawlers have to differentiate between data, semantic HTML tags make it easier to spot the nature of information on a web page and its attached relevance for explicit use. But when you plot a semantic HTML, the key is to ensure the information is human and computer readable.

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

While the viewport of your browser will typically create wordbreaks and linebreaks on its own, in some instances it is best to denote exactly where you would like these, using the 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.