[HTML5] Presentational vs Semantic Elements
Published | Last Update
933 views, 0 RAMs, and 0 comments
Presentational vs Semantic Elements
Most HTML tags can be shuffled broadly into two categories: presentational elements and semantic elements. Presentational tags are used to determine the appearance of elements on a webpage, while semantic tags are used to communicate information about the page’s content and structure. In some cases, tags can be both presentational and semantic, while some tags are neither.
Examples of presentational elements include <b> and <i>, as these alter the appearance of the content within the tag on the webpage (by making the words bold or italicized, respectively) without conveying any information to the browser. A couple of other examples of presentational tags are <sub> (subscript) and <sup> (superscript).
Semantic elements are essentially <div> tags, except they provide additional semantic information to the browser (and to developers). These were added in HTML5 and include tags such as <article>, <aside>, <header>, <footer>, and several others. Like <div> tags, these do not alter the appearance of the web page in any way.
Semantic Elements as a Universal Standard
Essentially, semantic elements are good for creating clean and universal code. This is good for both developers and on-page SEO.
Before HTML5, there was no global standard for naming layout elements, and developers just created their own names for headings, footers, navigation, and sections. While this allowed them a great deal of freedom, it also meant that these names could be difficult for other developers to interpret a document and outright impossible for browsers to identify the web page content.
The exact names of these semantic tags are apparently based off of a 2005 study by Google, which analyzed about 1 billion documents to see what the most common naming conventions already in use were, though there has been some criticism of this study and how the tags are defined in general.
Semantic Elements are Good for Developers
As a developer, you may want to return to an HTML document that you made months or years before. If you used nonstandard names rather then HTML semantic elements, it will likely take longer to re-familiarize yourself with them and make the changes you need. The same goes for if a second developer is working off of your HTML. Semantic elements provide a global standard for naming layout elements that make HTML documents easier to read.
Semantic elements at work:
Semantic elements are also good for internationalization, as many developers do not speak English as their first language and may be more likely to use obscure names of their own choosing. Standardizing naming conventions solves this issue.
Some Tags are Presentational and Semantic
Some elements, such as heading tags and paragraph tags, are both presentational and semantic. They are presentational because they are subject to the browser’s default style rules for the element (though these can, of course, be manipulated with CSS), which convey meaning to the person viewing the site. And they are semantic because the browser discerns meaning from different tags and attributes varying amounts of importance to them. For example, both the browser and the person reading an article can immediately tell that a <h1> tag is more important than a <h2> tag.
The <em> tag is also both presentational and semantic. Presentation-wise, it behaves very much like the <i> tag, making text appear italicized. Semantically, it also denotes increased importance to the web browser, and to screen readers. The same is true of the <strong> tag, which conveys semantic information, while <b> does not.
What about tags that don’t fit in either category?
A <div> tag is notably neither presentational nor semantic. It is non-presentational because it does not affect the appearance of its contents, and it is non-semantic because it doesn’t tell the browser any information about what kind of content it is. The styling of a <div> tag is dependent on the stylesheet, rather than any visual traits characteristic of <div> tags.
Other tags that are don't belong in either category include <span>, <script>, and <object>.
TFW you will never belong
Know Your Tags
When using tags, it is essential to know if the element you choose is providing information to the reader of the webpage, other developers, or the browser itself. In general, you want your site to be as communicative as possible and the right combination of presentational and semantic elements are necessary to achieve this.
- [HTML5] How These Off-Brand Divs Help With SEO
- Whatever Happened to Microsoft Silverlight? | Press F to Pay Respects
- What is the Wayback Machine? | How the Internet Archive uses Web Crawlers to Preserve Internet History
- Search No Further... 7+ Search Engines That Are Worth Checking Out
- What is DuckDuckGo and What Advantages Does it Have Over Other Search Engines?
- [Solved] CKEditor Autosave Draft Functionality - 1.4KB, No Plugin
- How to Make a Website: A Simple Guide for Complete Beginners
- 5 Tasks You Didn't Know Could be Done from the Developer Console
- The Ultimate WordPress Performance Resource
- How much is my website worth?
- GeneratePress: Total overview of what it can offer and why it's the only theme I use.
- DreamHost: Review, FAQ, and Affiliate Program
- Get These Dependencies Off My Lawn: 5 Tasks You Didn't Know Could be Done with Pure HTML and CSS
- How to Parse a User Agent in PHP with Minimal Effort
- Best PHP Frameworks
Post a New Comment
Do you like having a good time?
Register an Account
Read Quality Articles
Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.
Argue with People on the Internet
Use your account to explain why people are wrong on the Internet forum.
Vandalize the Wiki
Or don't. I'm not your dad.
Ask and/or Answer Questions
If someone asks a terrible question, post a LMGTFY link.
Make Some Money
Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.