Mr-T-Pity-The-Fool-HTML-Tags

Do you write every single HTML tag by hand sucka? At the most, maybe you copy and paste. Copy and pasting is only the start of how you can minimise repetition and improve productivity when writing HTML.

HTML is designed to involve large amounts of repetition. One of the aims of syntax languages is to classify similar elements under the same tags so that it’s easier to automate actions on all of them at once or in sequence rather than each individually. There are several ways you can do this—some so simple that you’ll wonder how you didn’t think of them yourself. Others are more advanced but also midnbogglingly powerful. For a foray into the world of automation that can save you endless amounts of time and boredom, read on–

Templates and Snippets

HTML templates are prewritten code that can be used in numerous situations and can just be copied and pasted and filled in whenever you need it. The most applicable HTML template is of course, the HTML structure that forms the basis of all HTML documents. At the most basic, it is this:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

You can add other things to this scaffold as you see fit, like “ but this is the essential starting point to all new HTML documents.

To make inserting templates like these convenient, many good text editors offer template managers or snippet managers and the like. For instance, Coda for Mac includes a browsable list of snippets that you can insert at the click of a button. Textmate includes an advanced syntactic system for defining snippets that have macro functionality tied into them (we’ll get to macros in a moment). In some editors like Vim, you can open a context menu to insert a snippet from a list. Or, in a simpler way, some HTML editors open their new files with the HTML template already there ready to go.

Some other useful snippets are:

Lists
(copypastecopypastecopypastecopypastecopypastecopypaste)

<ul>
<li></li>
<li></li>
<li></li>
</ul>

Small caps
(For nice typographical emphasis.)

<span style=”font-variant: small-caps;”>

Macros

Macros are a computer term that most associate with buttons on Microsoft Excel that they’re scared to press. And spreadsheets, how incredibly boring… (?)
But macros are actually extremely mindblowingly cool and powerful. They take text editing and square it. Meta-text editing. You record some of your text editing actions and replay them as many times as you want. With some good programmable text editors like Emacs and Vim (which yours truly is using to write this article), you can save macros as code, edit them, assign them to hotkeys and add them to your configuration file. The potential is unlimited.

But maybe you’re finding all this mindboggling but not in a good way. You can’t imagine saving time on anything so complicated as coding the text editor you’re using the code. Well macros can be that complex if you want them to be, but they can also be remarkably simple—like this example from the great Notepad++ text editor
▶ Start macro

◼ End macro

⏩ Play macro as many times as you want

That’s it, now you’ve got a macro code to delete every second line. By just holding down the ⏩ button, you can go through the entire document playing it if you want.

So how are macros useful for HTML editing specifically?

  • Creating, deleting, modifying the contents of list elements.
  • Promoting and demoting headings en masse.
  • Assigning hotkeys to italicise, bold, underline, center, link, small caps etc. selected text like in a WYSIWYG editor like Microsoft Word. For instance in my editor, I have Control-c to wrap the selected region in “. Macros are a game changer.

 

Markdown

Markdown is the writing syntax of choice of yours truly. It’s an extremely simple and efficient syntax for writing. How can it be so simple? It only does a few things and it does them well—it supports italics, bold, tables, lists, links, images and a few other features. That’s it. It’s not Turing Complete, it doesn’t come with WordArt and Email Merge. It’s just this:

Lorem *ipsum* dolor sit **amet**.

Lorem ipsum dolor sit amet.

And the essence of Markdown is that it’s ‘preprocessed’ HTML—like Emmet. It’s a syntax that gets converted into HTML by a computer program. So it’s actually also a really simple way to write HTML content:

* Item 1
* Item 2
* Item 3

Converts to–

<ul>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
<li><a>Item 4</a></li>
<li><a>Item 5</a></li>
</ul>

We have a lot more to say about this wonderful language, but we’ve already covered it in Speed Up Your Web Content Worflow With Markdown.

Emmett

Emmett is the most advanced element on this list because of its moderate learning curve. It’s an abbreviated HTML-CSS syntax language for writing these languages fast. Really fast. with Emmett, you can write a short line of syntax that expands into full HTML-CSS code that you can then work on like normal. This is a list:

#page&#x3E;div.logo+ul#navigation&#x3E;li*5&#x3E;a{Item $}

…that’s it.

It expands into:

<div id=”page”>
<div class=”logo”></div>
<ul id=”navigation”>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
<li><a>Item 4</a></li>
<li><a>Item 5</a></li>
</ul>
</div>

The time-saving is incredible.

Emmett is a more flexible, powerful alternative to templates, if you invest the time to learn its syntax. It doesn’t require you to predefine numerous snippets for every functionality and then edit them when they don’t quite fit. Instead, you just write exactly what you want in the space of a line, and it expands into HTML before your eyes.

HTML can be repetitive—it’s supposed to be. But if you find yourself doing this repetition by hand like a damn fool, you should think to yourself: can I get the computer to do it for me? That’s why repetition in code is such a good thing. Computers love to do it for you. And it’s easy to opt for templates, macros, Markdown or Emmett to take the dreariness out of web coding—and when you do this, you’ll probably find yourself having a lot of fun.

Leave a comment