Alternative HTML syntax

Question

It's a subjective question but don't you think the following HTML syntax would make more sense?

<div #id .class1 .class2><!-- content --></div>

Instead of:

<div id="id" class="class1 class2"><!-- content --></div>

@Chris: Exactly my thoughts. Or with style sheets other than CSS. Or with other languages that use CSS, such as SVG ;-) — Joey, Nov 03 '10 at 11:55
It's not really a subjective question - there are some very objective reasons as to why you shouldn't do this — Yi Jiang, Nov 03 '10 at 11:57
@Yi Jiang, there are but there are also objective reasons (maybe not as many) as to why you should do it (such as readability). That makes the question subjective. — Emanuil Rusev, Nov 03 '10 at 12:01
I added something I just found in my answer. Maybe it helps. — Joey, Dec 22 '10 at 20:36

score 10 · Accepted Answer · edited Jun 20 '20 at 09:12

Might be that it makes more sense to someone who authors only HTML and CSS. However, bear in mind that

CSS was invented much later than HTML
HTML is largely backwards-compatible; you can still view current web pages with ancient browsers and there is no need to change that
Your proposed syntax is incompatible with XML. Therefore you're throwing out all XHTML folks
Furthermore, do you want to change other languages too that rely on CSS for styling, e.g. SVG (again, XML, therefore incompatible)?

I agree, for a very narrow purpose, it might be a beneficial change, but when viewing at this from a broader angle, I doubt you'll see much improvement, only pain. You can of course use a preprocessor to write your HTML this way and convert it to the actual thing.

You may also want to take a look at other languages who convert into HTML, such as Haml.

If you are content with just typing something similar to what you have proposed, then Zen-Coding might be an option for you. Quoting:

Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code. For example:
div#page>div.logo+ul#navigation>li*5>a
... can be expanded into:
<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

score 4 · Answer 2 · answered Nov 03 '10 at 11:51

4

Not really. Attributes in HTML are general, CSS only builds on top of them. HTML itself has no notion of "ids" or "classes", only attributes.

answered Nov 03 '10 at 11:51

Core Xii

6,270
4
31
42

score 4 · Answer 3 · edited Mar 04 '20 at 15:46

4

You might enjoy using HAML (with any of these implementations):

%body
    #header
        %h1 BoBlog
        %h2 Bob's Blog

edited Mar 04 '20 at 15:46

Adrian

2,233
1
22
33

answered Nov 03 '10 at 12:23

robertc

74,533
18
193
177

Thanks for the suggestion! Looks very interesting. Do you know of any popular project that uses HAML? – Emanuil Rusev Nov 03 '10 at 12:27
@Emanuil I'm not sure if there's a definitive list, the fact that it's been ported to several different platforms and has widespread editor support would seem to indicate it's widely used. – robertc Nov 03 '10 at 13:13
thanks again. I'm definitely interested in the concept. I'll look more into it as soon as I have a little more time. – Emanuil Rusev Nov 03 '10 at 17:32
@Emanuil Rails does support HAML: http://stackoverflow.com/questions/99211/how-do-i-get-haml-to-work-with-rails – Fábio Batista Nov 04 '10 at 14:09

score 2 · Answer 4 · answered Nov 03 '10 at 11:57

2

That might work for the example you provide, but how would you notate the following?

<a id="my-link" href="http://example.com" rel="external" target="_parent" class="complex" title="click here for no good reason">My Link</a>

HTML has specific attribute names so that you can work with key/value pairs (with the possible exception of boolean attributes such as checked). If you take away the keys, the values become ambiguous and it is too hard to see what property should adopt which value.

answered Nov 03 '10 at 11:57

Phil.Wheeler

16,748
10
99
155

All other attributes would work the classic way - `attr="value"`. – Emanuil Rusev Nov 03 '10 at 11:58
That would then be `My Link` – I didn't understand his idea that he wants a single-character shortcut for every conceivable attribute there is. – Joey Nov 03 '10 at 12:00
Phil: I guess, because modern web pages with extensive styling put a class or id on nearly any element in the page. – Joey Nov 03 '10 at 12:01
@Phil.Wheeler, `class` and `id` are much used, they work on every tag and CSS has made them easily associated with the `#` and the `.` symbols. – Emanuil Rusev Nov 03 '10 at 12:04
@Joey That's a sign of the lack of expressiveness in HTML, something being addressed by HTML5, and also often a lack of experience with CSS selectors, rather than an argument for special casing those two attributes. – robertc Nov 03 '10 at 12:18

Alternative HTML syntax

4 Answers4