Card-based layouts dominate fashionable internet design, from weblog archives and staff directories to product catalogs and portfolio grids. Search engines like google and yahoo and assistive applied sciences interpret those layouts via HTML construction, now not visible look. A grid of weblog submit playing cards that appears arranged to sighted customers would possibly seem as disconnected fragments to display readers if the underlying markup lacks semantic which means.

Divi 5’s Loop Builder generates dynamic card layouts from WordPress content material and allows you to practice semantic markup via Divi 5’s Custom Attributes device and Component Sort controls, growing available, Search engine marketing-friendly card grids. Right kind semantic construction can give a boost to display reader navigation, make content material relationships clearer to search engines like google and yahoo, and make your markup more straightforward to deal with.

The methodology applies the <ul> and <li> trend to dynamic content material whilst layering further semantic components, reminiscent of <article>, <header>, and <determine>, inside each and every card. For the reason that Loop Builder duplicates your configured column for each and every merchandise within the question, you most effective want to arrange the HTML construction as soon as. The loop handles the remainder, producing constant checklist markup irrespective of what number of posts exist.

When To Use Looped Semantic Lists

Looped semantic lists are supreme every time you show a repeating number of equivalent content material generated dynamically from a question. For WordPress web pages, this usually contains weblog posts, merchandise, portfolio pieces, staff contributors, testimonials, occasions, or carrier listings. As a result of each and every merchandise within the loop represents the similar form of content material, structuring the output as a semantic checklist is helping browsers, search engines like google and yahoo, and assistive applied sciences perceive the connection between the ones pieces.

The use of a <ul> with repeated <li> components communicates that the pieces belong to a unmarried grouped assortment. This improves navigation for display reader customers, who can temporarily transfer via checklist pieces or pay attention what number of pieces exist within the assortment. It additionally provides search engines like google and yahoo clearer alerts about how comparable items of content material are arranged inside a web page.

Looped semantic lists paintings particularly neatly for card-based layouts generated by way of Divi’s Loop Builder. Every card turns into a listing merchandise, and the loop mechanically repeats that construction for each and every consequence within the question. As soon as the semantic construction is outlined for the primary merchandise, Divi replicates it persistently throughout all pieces, making sure each and every generated card follows the similar available markup trend.

Development The Semantic Listing Construction

This implementation makes use of a Phase containing a Row configured because the checklist container. The Row holds a looped Column that turns into each and every checklist merchandise. Inside of each and every Column, a Module Team wraps the cardboard content material as an editorial. The featured picture, name, metadata, and a Button Module for the learn extra hyperlink all take a seat throughout the article.

Get started by way of including a brand new Phase on your web page within the Visual Builder. Click on the Phase to open its settings. Navigate to Complex > HTML and open the Component Sort dropdown. Choose segment. This guarantees the Phase renders as a semantic <segment> part quite than a generic <div>.

Throughout the Phase, upload a single-column flex row. Inside of this row, position a Heading Module with textual content that describes the loop pieces beneath it. When the use of a <segment> part, together with a visual heading is in most cases the most productive means, because it supplies the segment with an available identify. An aria-label is healthier used as a fallback when a visual heading isn’t possible for the design.

Configure The Loop Row Format And Semantics

Upload every other Row the use of the Flex 3 Equivalent Columns predefined construction. This Row will function each the format container and the semantic checklist wrapper.

Transfer to Design > Format to regulate the remainder flex homes. Allow Wrap so pieces float to new traces once they exceed the container width. Flexbox, mixed with predefined column widths, creates a responsive format that adapts naturally to other display sizes and numbers of kid components.

Nonetheless within the Row settings, navigate to Complex > HTML. From the Component Sort dropdown, make a choice <ul> to create an unordered checklist.

If you need an extra fallback for assistive era, you’ll upload a customized characteristic of position=”checklist” within the Attributes choice workforce. In usual HTML, a local <ul> already exposes checklist semantics, so this position is in most cases non-compulsory. Some groups nonetheless make a choice so as to add it as a defensive accessibility measure, particularly when closely customizing checklist presentation.

Subsequent, navigate to Complex > CSS, then upload nolist to the CSS Magnificence box.

Then, upload the next CSS on your website online, both within the Divi Theme Choices CSS house or page-level CSS. You’ll additionally create a CSS Possibility Preset if you happen to plan to make use of it frequently.

.nolist {
 list-style: none;
 padding: 0 !necessary;
 margin: 0 !necessary;
}

This CSS eliminates bullet markers and the default spacing browsers practice to a <ul>, bringing the format again in step with the visible design.

Set The First Column As A Loop Merchandise

Delete all columns on this row excluding one.

Click on the lone Column for your Row, then navigate to Content material > Loop and permit the loop. Set the content material supply to Posts and configure any filtering parameters you wish to have, reminiscent of class restrictions or submit rely limits. The Column now serves because the template that the Loop Builder duplicates for each and every submit matching your question. Any settings you practice right here, together with HTML attributes, propagate to each and every generated example.

Navigate to the Column’s Complex > HTML choice workforce. Open the Component Sort dropdown and make a choice li. This adjustments the Column’s rendered part from a <div> to a <li>, making each and every looped card a correct checklist merchandise inside the dad or mum <ul>.

You’ll additionally upload position=”listitem” as a customized characteristic in case your staff prefers the similar defensive means used at the dad or mum Row, however local <li> semantics already quilt this in usual HTML.

Now, make all of the card clickable. To try this, navigate to Content material > Hyperlink and use the dynamic content material icon to assign the Loop Hyperlink. Every card could have its personal hyperlink in line with the Loop settings.

Including this to the Hyperlink choice workforce makes the cardboard itself clickable, increasing the interactive house past the connected components you upload inside of it.

Upload The Article Module Team

Every checklist merchandise wishes an <article> wrapper if the cardboard represents self-contained, standalone content material. Every looped merchandise shall be each a listing merchandise and comprise an <article>. Module Groups supply a handy container for grouping all of a card’s modules right into a unmarried semantic part.

Throughout the Column, upload a Module Team. All different modules for this card — the picture, heading, metadata, and button — will move inside of this workforce. Click on the Module Team to get entry to its settings, then navigate to Complex > HTML. Open the Component Sort dropdown and make a choice article.

Upload The Featured Symbol

Throughout the Module Team, upload an Symbol Module. This module pulls the submit’s featured picture dynamically via Divi’s dynamic content material device. Click on the dynamic content material icon within the Symbol box and make a choice Featured Symbol. The featured picture frequently purposes as a determine inside the article, so navigate to the Symbol Module’s Complex > HTML choice workforce and make a choice determine from the Component Sort dropdown.

The <determine> part identifies self-contained content material, in most cases visible in nature, that pertains to the encompassing article. Featured pictures frequently match that position neatly.

It is a freebie and unrelated to semantics: in image-based loops, atmosphere a constant ingredient ratio makes each and every card really feel extra uniform. To try this, upload a customized characteristic reminiscent of magnificence=”looped-image-aspect” to the picture after which upload some customized CSS.

.looped-image-aspect .et_pb_image_wrap {
 width: 100%;
 aspect-ratio: 16 / 11;
 overflow: hidden;
}

.looped-image-aspect img {
 width: 100%;
 top: 100%;
 object-fit: quilt;
 object-position: middle backside;
}

Configure The Put up Name

Underneath the Symbol Module, nonetheless throughout the Module Team, upload a Heading Module. Click on the dynamic content material icon and assign it to the Put up Name. Then navigate to Complex > HTML and open the Component Sort dropdown. Choose header. This wraps the heading in a semantic <header> part, indicating the item’s introductory content material.

Within the Content material > Heading choice workforce, set the heading point to H3 or H4. The H2 point is reserved for primary web page sections, and each and every card name purposes as a subsection heading inside the checklist. Because the instance above makes use of an H2 heading for the segment, H3 works neatly for the cardboard titles.

You’ll realize I’m the use of types from my design device and gained’t be masking them on this article. We now have already printed an in depth submit about making a design device with Design Variables and nested or stacked presets, which you’ll reference for styling.

Configure The Put up Meta

Underneath the Heading Module, nonetheless throughout the Module Team, upload Textual content Modules for each and every piece of metadata you need to show. Not unusual choices come with class, date, and writer. For each and every Textual content Module, click on the dynamic content material icon and assign the fitting box. For the class, make a choice the approach to hyperlink to class archive pages.

The class renders as its personal <a> tag pointing to the class archive, retaining it unbiased from the opposite hyperlinks within the card.

At this level, set some Flex settings at the Team to position the 2 Textual content Modules facet by way of facet when there may be enough space. To try this, set the Flex Course to Row, Justify Content material to Area Between, and permit Wrapping.

Upload The Learn Extra Button

Underneath the Heading Module and Textual content Modules, upload a Button Module. Set the button textual content to Learn Extra or your most popular name to motion. Navigate to Content material > Hyperlink and use the dynamic content material icon to assign the Loop Hyperlink. Every looped card will now have a button linking to its corresponding submit.

The Button Module outputs an actual <a> part within the markup. Whilst the entire card is clickable throughout the Column’s Hyperlink atmosphere, the Button supplies a transparent, semantic hyperlink goal that assistive applied sciences and search engines like google and yahoo can interpret at once.

Whole HTML Construction Reference

Semantically, we’re completed. The general rendered HTML in your semantic checklist follows this hierarchy, with a couple of further wrapper components relying to your Divi configuration

 <segment>
<ul magnificence="nolist">
<li>
<article>
<determine>
<img src="featured-image.jpg" alt="">
</determine>
<header>
<h3>Put up Name</h3>
</header>
<footer>
<a href="/class/slug/">Class</a>
<time datetime="2026-02-01">February 1, 2026</time>
</footer>
<a href="/post-permalink/">Learn Extra</a>
</article>
</li>
<!-- Further li pieces generated by way of the loop -->
</ul>
</segment> 

Every part serves a particular semantic goal. That is a large number of paintings, particularly the primary time, however it’s price it for loops. While you get the construction proper, Divi repeats it for each and every merchandise within the question, so you’re successfully designing more than one semantically proper playing cards without delay.

I’ll finish with many of the completing design touches, regardless that now not they all, as a result of this submit is concentrated at the semantics of this card construction.

The place And When To Use Semantic Lists

The <ul> and <li> trend applies every time you show a number of equivalent pieces with out inherent ordering. Weblog submit archives, staff member directories, product catalogs, portfolio galleries, testimonial collections, navigation menus, and repair listings all qualify as unordered lists. If the series issues, reminiscent of step by step directions or ranked effects, use <ol> as an alternative.

When To Use Different Semantic HTML Components

We’ve lined a number of semantic HTML components above, so here’s a fast reference for each and every one:

The <article> part belongs inside of checklist pieces when each and every merchandise represents standalone content material. Weblog posts, merchandise, staff bios, and case research can all be thought to be articles, particularly if they’ve their very own standalone URLs. Navigation hyperlinks, social icons, and easy labels aren’t articles. Reserve article markup for content material that might meaningfully exist unbiased of its surrounding context.

The <header> part introduces content material inside a piece or article. It most often contains headings, however may additionally come with navigation, trademarks, or introductory textual content. Every <article> may have its personal <header>, distinct from the page-level header. In card layouts, wrapping the name in a <header> alerts that it introduces the item content material that follows.

The <footer> part closes a piece or article with supplementary knowledge. Creator attribution, e-newsletter dates, comparable hyperlinks, and copyright notices can move right here. Like <header>, each and every <article> can comprise its personal <footer>, however it does now not at all times want one. For weblog playing cards, metadata like date and class may well be positioned in a <footer> if you happen to desire that grouping over leaving them as standalone components.

The <determine> and <figcaption> components pair in combination for self-contained visible media with non-compulsory captions. The <determine> wraps pictures, diagrams, tables, icons, or movies that fortify the encompassing content material. The <figcaption> supplies a caption or description and looks as both the primary or closing kid of <determine>. For staff member playing cards, a <figcaption> containing the individual’s identify and name underneath their photograph can create cleaner semantics than separate textual content components.

Get started Development In Divi 5 As of late!

Semantic HTML transforms visible card layouts into machine-readable content material constructions. When used correctly, display readers can higher interpret checklist pieces and article barriers, and search engines like google and yahoo can higher perceive content material relationships.

Divi 5‘s Loop Builder, Customized Attributes, and Component Sort controls give you the equipment had to layer semantic components onto dynamic layouts. The Loop Builder multiplies your configuration throughout dynamic content material, producing constant checklist markup for any selection of pieces.

The submit How To Create Looping Semantic Lists In Divi 5 seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more