Is this semantically Ok to use a instead of ul and li combination


#1

<div class="newscarosal">
                <a href="" class="item">
                    <span class="number">1</span>
                    <span class="news_txt">Supreme Count Wonn’t Revive Camaign Probe Of Wisconsin Governor Walker</span>
                </a>
                <a href="" class="item">
                    <span class="number">2</span>
                    <span class="news_txt">Supreme Count Wonn’t Revive Camaign Probe Of Wisconsin Governor Walker</span>
                </a>
                <a href="" class="item">
                    <span class="number">3</span>
                    <span class="news_txt">Supreme Count Wonn’t Revive Camaign Probe Of Wisconsin Governor Walker</span>
                </a>
            </div>

I am willing to generate a news item sliding in header through a carousel, but instead of using ul or li I am simply using anchor text. Is this semantically correct or this is a juvenile coding school practice?


#2

Too difficult to give you the answer you are looking for.

I'd say if both work the same, the best code is the one that uses the fewest characters.

All the text in the a href come up as links, right?


#3

Yes!


#4

There is an accessibility concern with having a list of links not in a list.

https://www.w3.org/WAI/tutorials/menus/structure/#menu-representation

Convey the menu structure, typically by using a list. Such structural information allows assistive technologies to announce the number of items in the menu and provide corresponding navigation functionality.


#5

See also the information on "Groups of Links" at the bottom of this page:
https://webaim.org/techniques/hypertext/hypertext_links


#6

The two elements (<a> and <li>) are not the same, they are structurally, semantically and functionally different.

Since the articles are numbered this looks more like it should be an <ol> which could do away with a lot of redundant code.

<ol class="newscarosal">
                <li>
                    <a href="">Supreme Count Wonn’t Revive Camaign Probe Of Wisconsin Governor Walker</a>
                </li>
                <li>
                    <a href="">Supreme Count Wonn’t Revive Camaign Probe Of Wisconsin Governor Walker</a>
                </li>
                <li>
                    <a href="">Supreme Count Wonn’t Revive Camaign Probe Of Wisconsin Governor Walker</a>
                </li>
</ol>

Since all your items have identical classes applied to their elements, there is no need to class them all individually. They can be selected using the master class .newscarosal with the element type. Eg: .newscarosal li {} and .newscarosal a {}


#7

Hi there @SamA74,

I was using this which has a ned result like this →

Number 1, 2 and 3 etc will be programatically generated through php. In that case also is my code not good or un-necessary? Even the multiple <a></a> text elements are also generated through PHP and wordpress loop.


#8

If it is a numbered list, then semantically it is an <ol>. That will automatically have numbers applied by the default browser display. The numbers don't actually appear in the content, so don't need to be generated as content. The numbering is implied by the use of that list type.
If you want custom styling of the displayed numbers, then the default styling can be overridden and custom style number can be displayed via a css counter and ::before pseudo elements.

Using server-side loops to generate html is a smart way to reduce your server-side code. But don't use it as a means to bloat your client-side code.

I would agree that "less is more", so cutting out redundant bloat is a good thing. But I don't think that should take priority over proper semantic structure. Otherwise forget html and just present plain text.
Too many WP themes suffer from too much bloat, with seemingly needless "Russian Doll Divs" and the likes IMO, so seeing a slimmed down one would be refreshing.
But I think there is slimming a page and there is starving a page. When you take it too far that way, you may also loose semantics and maintainability.


#9

No, it isn't right semantically. By utilizing stay label the majority of the content is composed as a hyperlink and it refers nothing so it is better to use li and ul tag.


#10

This is how you can use css counters to replace the default numbering with custom style numbers.


#11

Nice I think now I will go with your version and your suggestion sir. Thank you so much.

counter-reset: number; seems to be a css3. Does it air-tight? No falling back?
Because we are using the pseudo CSS there.


#12

You can check support for CSS properties at Can I Use:

https://caniuse.com/#search=counter-reset


#13

Actually there are lot of pseudo elements used, which deosn't have a fall back.

/* Add a pseudo element to replace the default numbering */
.newscarosal li::before { 
	content: counter(number); /* Insert the number */
	counter-increment: number; /* Increment the counter */
  /* Style the number as you like */
  float: left;
  padding: 0.15em 0.5em;
  margin-right: 1em ;
  color: #bbb;
  outline: 1px solid #bbb;
  font-size: 1.5em;
}
.newscarosal a {
  color: #666;
  text-decoration: none;
}

#14

CSS counters and pseudo elements have full support in all current popular browsers.

If you are concerned about old browsers you could put list-style: none; into an @supports query so they still get default numbering.

@supports (counter-reset: number){
    .newscarosal { list-style: none;}
}

The number part is a user defined name. You can name your counter anything you like, or have multiple counters with different names to identify them.


#15

I only see one.


#16

Best way for you to answer your semantics questions - use W3C HTML Validator + fix any errors/warnings produced.


#17

While I agree that the Validator is an invaluable tool, it can't answer questions of semantics.


#18

Semantics (meaning) tends to mean different things to different people.

The Validator provides a good test of...

1) Will my content index at all.

2) Will my content index as I imagine it will index.

If the Validator produces many errors + warnings, especially of certain types, then it's unlikely you'll achieve any SEO traction.

So the syntax you list is valid, thus will likely index sensibly... and... best to think like Bots think...

Keeping in mind Bots are dead simple.

If I didn't care about SEO, I'd ignore the issue completely.

If I did care about SEO, I'd use li + ul, as the semantics (meaning) of this approach tends to correctly index with Bots (like GoogleBot).

New/Improved ideas about how to design content are great + may or may not index correctly.

The real question is "Will the dead stupid GoogleBot understand what I'm cramming down it's craw."


#19

I think the point that @TechnoBear was making was that although the validator is a useful tool, it will only find problems in syntax, not semantics.
Just like GoogleBot, it's not human and does not understand the context and meaning of your content the way a human can.
This in fact is a main reason for semantic code, it puts content into a context through structure and descriptive semantic tags, so that machines may interpret the content properly, be that a Search-Bot or an Assistive Technology being used by a real person.
The fact it, it is quite possible to write "valid" code that will pass the validator's syntax checks, but it can still be dreadfully non-semantic. The classic example being a table (for) layout. The table may be structured in a correct manner, so the validator passes it, and any Bot or AT may assume the content to be tabular data, due to the use of a the table element. But it may well not be tabular data at all. So while syntax may be correct, semantics are not. They are not the same thing.

Amazingly, SEO is not the only thing that some developers are concerned about. Some actually care about the humans that visit their site. :open_mouth:


#20

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.