Today’s websites may bear visual similarities to those of the past, but their inner workings have undergone infinite transformations. Driven by the need to connect with users in a more meaningful fashion, search engines, SEO marketers and content providers have all changed the ways they employ code to deliver information. 2015 was especially notable for its widespread adoption of HTML5 and Semantic HTML techniques.
What Is Semantic HTML?
Hypertext Markup Language, or HTML, uses coding conventions known as tags to describe the parts of different web pages. These tags include familiar elements such as <div> and <span>, which denote individual sections of the web page so that an Internet browser knows how to display its contents. Semantic HTML takes the idea further by favoring tags that also describe said content, such as <img> tags for images, <nav> tags for navigation controls and <summary> tags for article recap sections.
Semantic HTML and non-semantic HTML commonly overlap. For instance, <form> tags have long been part of the language standard. HTML5, however, introduced a number of new elements dedicated solely to conveying meaning. These included tags like <article>, <nav>, <aside>, <section>, <header>, <footer>, <time> and more.
Who Are Semantics For?
HTML isn’t generally thought of as being targeted at the end user; although it plays a role in how they view sites, it’s more of a background player. As a result, earlier versions lacked basic descriptive elements, and coders have long been forced to extend the language by employing tag attributes that give their HTML more understandable meaning.
Web designers commonly insert class and id attributes into their <div> tags to describe important sections for later reference and Document Object Model, or DOM, manipulation. The World Wide Web Consortium, or W3C, decided to standardize some of the most commonly used techniques in HTML5 to build a more uniform Web ecosystem.
The Future of Semantic Markup
As browsers inevitably come to comply with semantic HTML tags, the Internet becomes more searchable, and the results delivered by Web technologies grow increasingly organic. One of the W3C’s major goals in adopting these changes was to make it easier for search engine algorithms, browsers, crawlers and other non-human web denizens to distinguish between different kinds of data. In essence, your inclusion of a <figure> tag with an accompanying <figcaption> for the caption may make it easier for a user’s smart phone or search engine to return a relevant image along with some appropriately descriptive information. By organizing your content based on its meaning, you make your site seem like a more knowledgeable resource.
Semantic HTML will also deliver improved utility to content providers. Of course, classes and ids will still remain critical to creating organized sites that function well with Javascript, CSS and web frameworks, such as JQuery, Bootstrap and AngularJS. The ability to use common tags that function with a range of browsers, however, could make it far easier to build sites that serve rich content.
