Terence Eden’s Blog on Nostr: The minimal-div minimal-span philosophy of this blog ...
The minimal-div minimal-span philosophy of this blog
https://shkspr.mobi/blog/2023/10/the-minimal-div-minimal-span-philosophy-of-this-blog/
If you've ever leaned Mandarin Chinese, you'll know about "measure words". They're the sort of thing that trip up all new learners of the language. While 个 (gè) can be used as a generic measure word, using it everywhere makes you sound like an idiot (according to my old teacher). So you learn to use 个 for people, 包 for packets, and 根 for things which are long and thin.
English has a similar construct. You might say "one bunch of flowers" or "two glasses of wine" or "three bowls of soup".
You could say "one thing of flowers" or "two things of wines" or "three things of soups" but the measure words give much needed context and semantics.
If you get it wrong and said to a publican "four mugs of beer please" they'd probably know what you meant but it could be a bit confusing.
And isn't that very much like HTML?
The language of the web gives us semantic elements for our markup. When you use <button> to draw a button on screen, the browser knows exactly what to expect, how to display the content, and what it should do. A search engine can extract meaning from the page. Users of assistive technology can be told that they're on a button. Everything is lovely!
You don't have to do that, of course. You could use <div class="button" onclick="something()"> - with enough CSS and JS you'll have something which looks and acts more-or-less like a button. But you'll lose all the semantics which make life easier for browsers, search engines, assistive technologies, and anything else that a user uses to interact with your site.
HTML has dozens of semantic elements. There's <address> for contact details, <time> for dates and times, <nav> for navigation elements.
There are two main "generic" elements. <div> for blocks of stuff, and <span> for a short run of text. I find that most modern websites over-use these elements. I want to reiterate, there's nothing illegal or immoral about doing so; the web police aren't going to take you to gaol. I personally think that writing semantic HTML is easier to maintain, easier to understand, easier for accessibility, and easier for automatically extracting meaning.
So, for a while now, I've been slowly working on my blog's theme in order to remove as many <div>s and <span>s as possible. I started out with a couple of hundred of each. I'm now down to about 35 of each - depending on which page you're on.
Here are some of the problems I found.
Semantic wrapping is complicated
I use Schema.org microdata in my HTML. For example, when a user has left a comment, I might indicate their name by using <span itemprop="name">Juliet Capulet</span>
Or, in the heading of a post I might useThis post has<span itemprop="https://schema.org/commentCount">3</span>; comments and is<span itemprop="https://schema.org/wordCount">400</span>; words long
Because there's no HTML element like <commentcount> or <wordcount>, I have to wrap those numbers in something if I want to indicate the semantic content behind them. I could "cheat" and use something like <var> or <output> but they're as semantically irrelevant as <span>.
Similarly, it's hard to do semantic comments for WordPress.
Some things are just things
I have a large calendar at the bottom of every page showing my archives. Each calendar is its own "thing" and so is wrapped in a <div> which controls its style and layout. That group of calendars is also its own thing - because <details> elements are weird.
They're inside a widget - which itself is inside of an <aside>.
I was using a <table> layout for them, but it wasn't flexible and it ballooned the size of the DOM. Perhaps I should treat them as lists? At least then they'd be easier to skip?
WordPress defaults
All built in widgets in WordPress take the following form:<h2 class="widget-title">...</h2><div> ...</div>
I don't think they need that extra <div>, although I can see why it might be necessary for styling.
Similarly, wp_nav_menu() is encased in a <div> by default - although that can be removed.
What's Next?
I'm going to continue hacking away out of a sense of masochism. Perhaps the only person who will notice (other than me) is someone accidentally viewing the source of this page.
But I think it's worth it. There's that story about how the original Mac circuit board was laid out so that, despite never being seen by normal people, it was part of the overall æsthetic. And I think that's what I'm going for - something that I can be satisfied with.
https://shkspr.mobi/blog/2023/10/the-minimal-div-minimal-span-philosophy-of-this-blog/
#blogging #HTML
https://shkspr.mobi/blog/2023/10/the-minimal-div-minimal-span-philosophy-of-this-blog/
If you've ever leaned Mandarin Chinese, you'll know about "measure words". They're the sort of thing that trip up all new learners of the language. While 个 (gè) can be used as a generic measure word, using it everywhere makes you sound like an idiot (according to my old teacher). So you learn to use 个 for people, 包 for packets, and 根 for things which are long and thin.
English has a similar construct. You might say "one bunch of flowers" or "two glasses of wine" or "three bowls of soup".
You could say "one thing of flowers" or "two things of wines" or "three things of soups" but the measure words give much needed context and semantics.
If you get it wrong and said to a publican "four mugs of beer please" they'd probably know what you meant but it could be a bit confusing.
And isn't that very much like HTML?
The language of the web gives us semantic elements for our markup. When you use <button> to draw a button on screen, the browser knows exactly what to expect, how to display the content, and what it should do. A search engine can extract meaning from the page. Users of assistive technology can be told that they're on a button. Everything is lovely!
You don't have to do that, of course. You could use <div class="button" onclick="something()"> - with enough CSS and JS you'll have something which looks and acts more-or-less like a button. But you'll lose all the semantics which make life easier for browsers, search engines, assistive technologies, and anything else that a user uses to interact with your site.
HTML has dozens of semantic elements. There's <address> for contact details, <time> for dates and times, <nav> for navigation elements.
There are two main "generic" elements. <div> for blocks of stuff, and <span> for a short run of text. I find that most modern websites over-use these elements. I want to reiterate, there's nothing illegal or immoral about doing so; the web police aren't going to take you to gaol. I personally think that writing semantic HTML is easier to maintain, easier to understand, easier for accessibility, and easier for automatically extracting meaning.
So, for a while now, I've been slowly working on my blog's theme in order to remove as many <div>s and <span>s as possible. I started out with a couple of hundred of each. I'm now down to about 35 of each - depending on which page you're on.
Here are some of the problems I found.
Semantic wrapping is complicated
I use Schema.org microdata in my HTML. For example, when a user has left a comment, I might indicate their name by using <span itemprop="name">Juliet Capulet</span>
Or, in the heading of a post I might useThis post has<span itemprop="https://schema.org/commentCount">3</span>; comments and is<span itemprop="https://schema.org/wordCount">400</span>; words long
Because there's no HTML element like <commentcount> or <wordcount>, I have to wrap those numbers in something if I want to indicate the semantic content behind them. I could "cheat" and use something like <var> or <output> but they're as semantically irrelevant as <span>.
Similarly, it's hard to do semantic comments for WordPress.
Some things are just things
I have a large calendar at the bottom of every page showing my archives. Each calendar is its own "thing" and so is wrapped in a <div> which controls its style and layout. That group of calendars is also its own thing - because <details> elements are weird.
They're inside a widget - which itself is inside of an <aside>.
I was using a <table> layout for them, but it wasn't flexible and it ballooned the size of the DOM. Perhaps I should treat them as lists? At least then they'd be easier to skip?
WordPress defaults
All built in widgets in WordPress take the following form:<h2 class="widget-title">...</h2><div> ...</div>
I don't think they need that extra <div>, although I can see why it might be necessary for styling.
Similarly, wp_nav_menu() is encased in a <div> by default - although that can be removed.
What's Next?
I'm going to continue hacking away out of a sense of masochism. Perhaps the only person who will notice (other than me) is someone accidentally viewing the source of this page.
But I think it's worth it. There's that story about how the original Mac circuit board was laid out so that, despite never being seen by normal people, it was part of the overall æsthetic. And I think that's what I'm going for - something that I can be satisfied with.
https://shkspr.mobi/blog/2023/10/the-minimal-div-minimal-span-philosophy-of-this-blog/
#blogging #HTML