I don’t see why you have a <p> within a <li> anyway. You could do away with the paragraph altogether, use <ol> as others have suggested (using an ordered list rather than an unordered list isn’t going to change anything except it is more semantic).
That was not the intention, it is a question of semantics.
Because you are numbering the list, it could be described as an ordered list (ol).
Because the items have a phrase, followed by an explanation of what that means, it could be a definition list (dl), with the content marked up with dt and dd tags.
You could try floating the pseudo elements left to bring things in line.
Is there any tool that can keep me guiding if I am writing semantic code or not?
Honestly, I completely do not understand what is semantic code(I only have the partial understanding)
I have never put block level <p> tags inside a list item. Does that pass validation?
If the intent is to number paragraphs then I don’t think you should be using a list at all, but the “step-counter” directly on the paragraphs instead.
The tags you use to mark up the content should reflect the meaning of the content, or describe its purpose. <ul> is an unordered list, so a list where the items relate to each other, but do not have any particular order to them, it would not matter if you shuffled the order. <ol> is an ordered list, where the items are in a particular sequence, these are generally numbered. <dl> is a definition list, think of a dictionary or glossary, each item has two parts, the term <dt> and a description <dd>.
It’s a case of knowing what the tags mean, then using them appropriately. I don’t know of a tool for it, machines are not good at recognising the meaning of content, humans are. In fact that is one reason for semantic mark-up, to help machines (such as screen readers and search bots) understand the meaning and context of your content.
Structured data has nothing to do with this, you are not using structured data in your pages, so are wasting your time testing for something that is not there. The reason you have no errors there is because there is nothing to test, that’s why it shows blank.
Error: No p element in scope but a p end tag seen.
<li>
<span class="bold">Up todate products</span>
Our themes and plugins are ever evolving and thus you will find many updates in a theme life cycle.
</p>
</li>
Unless you have removed the opening p tags and forgot to remove the corresponding closing tags, it looks like the mark-up is getting “fixed” in unexpected ways.
From what I see from the live link it looks like @codeispoetry is wanting the ability to style the list marker differently from what a default <ol> list-marker can offer. But once again I may not be up to date on any new features that might have made this easier.
However, working with an <ol> along with counter-increment: and li::before you can certainly style the decimal marker easily.
Using a <p> tag within the <li> can allow you to vertically align the content to the list marker marker. With css off this would revert back to a normal OL.
I have no idea what the desired result is but I’m guessing something like this…
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Page</title>
<style>
.numberlist {
margin: 0;
padding: 0;
list-style: none;
}
.numberlist li {
counter-increment: step-counter;
margin-bottom: 1em;
padding: 0 .3em 0 3em;
background: #eee;
font-size: 1em;
line-height: 1.3;
}
.numberlist li p {
display: inline-block;
vertical-align: top;
margin: .8em 0 0;
}
.numberlist li span {
font-weight:bold;
}
.numberlist li::before {
content: counter(step-counter);
margin: 0 .2em 0 -1.84em;
background: #69C36E;
color: white;
font-weight: bold;
font-size: 1.6em;
padding: .3em .5em;
line-height: 1.2;
display:inline-block;
}
</style>
</head>
<body>
<ol class="numberlist">
<li><p><span>Up todate products:</span> Our themes and plugins are ever evolving and thus you will find many updates in a theme life cycle.</p></li>
<li><p><span>Fixing security vulnerabilities:</span> First and foremost, updates keep you safe from known security holes. This is especially important when there is a new release available for software you use, because most change logs and update notes reveal previously-known exploits that have already been patched. Public knowledge of these exploits leaves your application easy prey for malicious users who are out to exploit these now known issues. Of note are website Content Management Systems (CMSs) such as WordPress, Joomla and Drupal simply because of their common use. Not securing these by updating leaves your system open to compromise making your software vulnerable.</p></li>
<li><p><span>Better functionality</span></p></li>
<li><p><span>Squashing bugs</span></p></li>
<li><p><span>Salutation</span></p></li>
</ol>
</body>
</html>
If that is how the code is, then it looks like what the validator is doing is instead of flagging an incorrectly used p tag it is removing it but not removing the /p tag.
If the code is confusing the validator you can be almost certain it will also confuse at least some user agents as well.
If the paragraphs are indeed list items I think you should remove the p tags and style them to suit.
If instead they are paragraphs and not a true list then I think you should not put them in lists. But you could number them without putting them in lists.