Solution 1 :

You could try an HTML pre-processor such as HAML (

With HAML, your code would go from this:

<div class='class1'> <div id='id1'> </div> </div>

to this:


And something a little more complicated like this:

    <h1 class="heading title">Heading</h1>
    <p class="paragraph description">Lorem ipsum dolor sit amet...</p>

could be written in HAML like this:

    %h1.heading.title Heading
    %p.paragraph.description Lorem ipsum dolor sit amet...

Solution 2 :

I’d recommend you to take a look at pug

Problem :

I was wondering if anyone could suggest a shorthand for html coding specifically in naming classes and ids or just designating html elements. Currently with regular html i am forced to write:

<div class='class1'> <div id='id1'> </div> </div>

It seems kind of heavyhanded to me having to write div class=” or div id=” , each time. I keep writing the same type of thing over and over again. I know its normal but it doesnt seem optimal at all. Is there another way this can be written either in standard html, html5 or using a other markup language or preprocessor that still maintains the <> symbols but replaces div class= or div id = with something allittle less verbose? but equally expressive? Thank you.


Comment posted by Melvin

I suggest to study CSS more extensive. Parts of HTML can changed not only by classes or ids but in the CSS directly. A good planning and formatting of div, p, ul, li, … directly in the CSS helps to spare most of the class-calls in your HTML-source directly.

Comment posted by Maximilian Travis

This seems quick and easy to write, but confusing to read afterwards for me unfortunately. Thank you for the suggestion.