Tiny SEO-friendly Tabbed Content Plugin - jQuery Semantic Tabs

Tabs can be a very effective interface design technique. If used correctly, tabs can help your users find the information they are looking for immediately.

Today, many sites use semantic HTML tags like unordered lists and heading elements to provide better information to search engine crawlers, while still making the site easy to navigate for their users.

This is a semantic tabs jQuery plugin that can convert any set of semantic HTML tags into beautiful, tab-based, navigational elements. It creates tabs through the use of <h3>, <ul>, and <p> tags to help search engines better categorize your content.

How to use it:

1. Create tab navigation using the <h3> tag and insert your tabbed content into <p> tag as follows:

<div id="semantic-tabs">

  <h3>Tab 1</h3>
  <p>This is the content of Tab 1.</p>
  ... more tab 1 content

  <h3>Tab 1</h3>
  <p>This is the content of Tab 2.</p>
  ... more tab 2 content

  <h3>Tab 3</h3>
  <p>This is the content of Tab 3.</p>
  ... more tab 3 content

</div>

2. Load jQuery library and the Semantic Tabs plugin at the end of the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.semantic-tabs.min.js"></script>

3. Call the function semanticTabs on the top container.

$('#semantic-tabs').semanticTabs({
  // options here
});

4. Apply your own CSS styles to the tabs component.

#semantic-tabs {
  border: 1px solid #555;
}

#semantic-tabs-heads {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

#semantic-tabs-heads {
  background: #555;
}

#semantic-tabs-heads li {
  color: #fff;
  cursor: pointer;
  padding: 10px 15px;
}

#semantic-tabs-heads li.active {
  color: #000;
  background: #fff;
}

5. Override the default selectors.

$('#semantic-tabs').semanticTabs({
  componentClass: 'semantic-tabs-component',
  head: 'h3',
  headsID: 'semantic-tabs-heads'
});

---

This awesome jQuery plugin is developed by aristorinjuang. For more Advanced Usages, please check the demo page or visit the official website.