256 Kilobytes

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.

Presentational HTML

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 HTML

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.

Related Articles

Download more RAM. 🐏 ⨉ 0Posted by Louis J. V. Cicalese 1 year ago

Edit History

• [2019-03-06 18:03 PST] Louis J. V. Cicalese (1 year ago)
• [2019-03-06 18:03 PST] Louis J. V. Cicalese (1 year ago)
• [2019-03-06 18:03 PST] Louis J. V. Cicalese (1 year ago)
• [2019-03-06 18:03 PST] Louis J. V. Cicalese (1 year ago)
• [2019-03-06 18:03 PST] Louis J. V. Cicalese (1 year ago)
• [2019-03-06 18:03 PST] Louis J. V. Cicalese (1 year ago)
🕓 Posted at 06 March, 2019 18:03 PM PST

Profile Photo - Louis J. V. CicaleseLouis J. V. CicaleseAuthor

Post a New Comment

Do you like having a good time?

Register an Account

You can also login to an existing account or reset your password. All use of this site is subject to the terms of service and privacy policy.

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.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

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.

Register an Account