I started a new weekly series called CSS Challenges, where every Monday there is a different feature or element to implement. The goal is to encourage people to practice their css by doing and to also discuss different ways to achieve the task. This week's topic is Breadcrumbs.
At the end of each week I'll be posting a separate post giving examples of different implementations from submissions and trying my best to explain how they work and the logic behind.
Now, even though it is a css challenge, we can't just ignore other aspects of web development. I am somewhat familiar with html semantics, but far from expert, and a total newbie when it comes to accessibility.
The plan is to include in the post with solutions, some general tips and things to watch out for when it comes to semantics and accessibility. So, alongside my own research that I'll be doing, I wanted call everyone to pitch in and give their tips, dos and do-nots when it comes to Breadcrumbs. Things like recommended html structure, what tags to use, what attributes should be included or not, etc. are welcome.
Also it'd be nice if you could provide references to official specs and documentation that's related to your arguments, but it's optional.