Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
I’m currently working on HopScotch 3 and it involves a lot of revising the HTML markup of content structure plus a lot of structural class names.
In relation to this HTML refactoring, I’d like to share with you some notes on writing the HTML markup of web sites:
- Text. Begin by writing in plain text all the important content your web site has. For example, you might have a web site logo – translate it into words; if you web site has a tagline or description, write that too.
- Tag. Follow it up by wrapping each text content in its semantic HTML tag. Avoid using
spanjust yet. For example, your web site name should be wrapped in a heading tag like
h1since it is the title of your HTML document; your tagline could be wrapped in a
ptag. At this point, all heading tags could be in
h1since we have not put these objects in context yet. Eventually, we would be arranging the hierarchy of these tags – from
- Group. This is where div and span will come into play. You will have to group and segment the objects based on semantics and not on visual appearance. For example, you could wrap both the web site name and tagline in one
- Classify. Put the class names into the grouped structure of the objects. For example, the
divthat contains the web site name and tagline could be classified as “web-product-name”. The test for its semantics is if the name is true to the objects’ nature – something that isn’t tied up to visual appearance or layout.
- Format. To add another level of semantics and structure to the objects, we could use Microformats. It uses a vocabulary of class names that give structure to common content such as a person’s information, a movie’s information, an organization’s information and much more.