I recently was looking for a solution to the excessive coding needed to add classes to html, which makes the document less readable than it need be.
Previous to this I have used some shortcuts by redefining set Html tags to do other jobs that I need, so for instance the emphasis tag foo serves for a declaration of what would otherwise need to be written as foo. This may not look like much but if you have a lot of spans that need to be marked it does in fact make it more readable.
em is defined in the css as:
em {color:darkred; font-style:normal; letter-spacing:1.25px;}
and give an inline presentation that highlights the metre markers with darkred, and looks like this:
This solves some issues, but is also problematic in that we are not using tags semantically, and even more so because there are a very limited number of tags that can be redefined in this way.
Also for most of the cases where I use the metre class I want it to indent, so it is defined like this:
.metre {margin-left:2em; color:darkred; font-size:85%; line-height:100%; letter-spacing:1.25px;}
to give a presentation like this:
A New Solution
Warning, the following is not part of the Html5 standard, so if standards-compliance is your god, you can read it for interest and ignore its implementation.
The following was not discovered by me, I found it in Timothy Perez’ answer to a question posed on stackexchange:
Spans
Another way to achieve the same aim, is simply to declare a new “tag” in the css:
metre {margin-left:2em; color:darkred; font-size:85%; line-height:100%; letter-spacing:1.25px;}
(Note the absence of the leading dot, which would define it as a class. Without the dot it becomes a tag.)
we can then transform this:
to this:
which to my mind is much more readable and therefore easier to maintain.
I have other classes I use regularly also, so by making a new tag like this
nmb {color:#7F9861; font-weight:normal; font-size:small;}
I can change this:
to this:
which gives a presentation looking like this:
Divisions
This solution will also work for divisions with the right coding. The way we normally declare a division is with a class to configure it, so:
.indent3 {margin-left:2em; margin-right:2em;}
with coding:
gives:
If we declare a tag, but with a little extra coding to make it display as a block:
b3 {display:block; margin-left:2em; margin-right:2em;}
then with coding:
We can achieve the same result.
To someone not involved in development this might not look like much of an improvement, but when you have tens of thousands of such spans and divs over a website, as I do, it makes everything so much easier to work with when reading the code.
Although not part of the Html5 standard, for many of us the fact that it works, cleans up the code, and is easy to implement recommends it.
I hope this will be of use to others as well. As far as I can see it works in all modern browsers. IE6 apparently doesn’t support it, but then all it will do is ignore the tag, and some presentation is lost.