Streaming live at 10am (PST)

Semantic markup


#1

Ive just made a couple of pages for an academic website. One is a bibliography, the other a complex 4 columned series of recommendations. They are looking pretty neat regards typography, but I do worry about them semantically.

firstly because I needed to have two ordered lists, 123 and also ABC, I just styled the rich text block unordered list to be ABC. There is no span tag. Endnotes, citations, superscript etc.

There is no provision to make a legitimate table other than with divs. I know this tag was abused in the early days of the web but I actually want to make one.

Are there HTML tags for author, the title of publication, that sort of thing. Is there any possibility that you would be looking into expanding the possibilities of the cms text editor to allow for more markup options.

As this is the only part of Webflow that the client sees, I worry that they will feel a little frustrated. I think it would be a good idea to run some UX sessions with actual clients - editors and see what they think.

I’m loving webflow of course, just sharing some thoughts from the coalface.


#2

First, webflow give you a lot of power to create semantic code (Add schema.org, HTML5 elements and so on).

Schema.org

In general HTML5 dont have specific elements for each type of data. This is why you should use Schema.org (For article: https://schema.org/Article).

Tuturial:

Endnotes

Endnotes ==> use footer (Wrap your article with section -or- article).

For article meta data use header (Title, date and so on).

Spans

spans are not semantic (Like divs). But you could add spans by the text editor.

For now, you find these Semantic elements on webflow:

image

Maybe add wishlist req for adding the X elements missing.

Wishlist table support:
https://wishlist.webflow.com/ideas/DESIGNER-I-16

I agree it could be cool to have more options under richtext editor (Like https://quilljs.com/).


#3

OMG I have been using webflow now for a number of years and I have never noticed that dropdown!!! I feel a little embarrassed to admit that - but hey this is how we learn. Thx for the tips, very helpful. Gonna go through my pages now and adjust my divs semantically - gonna be a long night.


#4

#5

got it. thanks again.