2.2 Semantic Structure
We use HTML5 semantic elements consistently to provide clear document structure. Headers, navigation, main content areas, and footers should be marked up with appropriate semantic elements rather than generic divs. This approach benefits both accessibility tools and search engines while making our code more readable.
In WordPress themes, we leverage the platform’s built-in functions to generate semantic markup while maintaining consistency with WordPress conventions. The platform provides excellent tools for generating proper post markup, navigation menus, and comment structures that we should utilize rather than reinventing.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- WordPress post structure -->
<article class="post" id="post-<?php the_ID(); ?>">
<header class="post-header">
<h1 class="post-title"><?php the_title(); ?></h1>
<div class="post-meta">
<time class="post-date" datetime="<?php echo get_the_date('c'); ?>">
<?php the_date(); ?>
</time>
<span class="post-author">
by <?php the_author(); ?>
</span>
</div>
</header>
<div class="post-content">
<?php the_content(); ?>
</div>
<footer class="post-footer">
<?php the_tags('<div class="post-tags">', ' ', '</div>'); ?>
</footer>
</article>
For Laravel applications, we maintain the same semantic principles while leveraging the templating features in the chosen front-end framework (such as Livewire, Blade, or Vue) to create reusable, maintainable markup structures.