Fours Ways To Reduce HTML
Lets face it, HTML is boring to produce; but I can’t make a website without it? The answer: generate the HTML using something less boring. While I won’t be doing any examples of the technology I’m about to tell you about; I do plan on making tutorials on such topics in the future.
Also, this is aimed at non-backend web developers (though PHP is a serverside technology meaning it needs a web-server).
Generate it using Javascript
You can generate HTML using vanilla Javascript. And, you can use something such as Vue, Angular, React, Ractive, this could be a long list… to generate the HTML for you. Tbis is essentially the goal of these tools (frameworks and libraries) which is why they are such great buzzwords among the web development community. And these tools are typically able to run client-side (though sometimes may vary slightly) so an upside is not having to pay for a backend-server (they can however sometimes be a pain to setup from sratch so don’t be afraid to use a boilerplate / starter-kit and you’ll typically be using a command line).
Use PHP
This solution in my opinion isn’t quite as elegant and in some cases may be overkill, but if you’re gping to be hosting your website on a PHP based server, might as well use PHP to save you from repetition. The idea of PHP in this case is that you save your individual “web-components” as PHP files, and load them in using PHP whenever appropriate - you can “drop in and out” of PHP to type the important HTML. Many content management systems (Wordpress, Drupal) are built on PHP, so familliarity with PHP will make your transition into using one of these industry beloved tools much easier (yes, there are non PHP CMSs out there - but PHP is incredibly popular).
Use a Templating Engine
Is PHP overkill? Perhaps this one will work nicely: templating engines are typically compact mini languages designed to work inside HTML that allow you to add logic to the HTML - think Javascript - but not as advanced. They are easy to learn, and work similar to PHP in that you can drop in and out of the templating engine’s “language” whenever need be. There are a quite a few popular ones out there, the ones I’m most experienced with are Handlebars and EJS, but Jade seems pretty interesting. Many backend frameworks generally use a template engine (assuming you don’t swap it for something like React) by default - Rails for example makes good use of ERB (which is similar to EJS). Static site genrators such as Hexo also make good use of templating engines. Wahts also good about templating engines is that they can essentially do what I suggest using PHP to do (above) except that a server isn’t always required.
Emmet
Emmet, is a plugin / extension for popular text-editors such as Atom, VS-Code, Sublime Text etcetera. As there is typically a pattern when it comes to writing HTML, it allows you to put in aliases for the vital parts (such as “.” if you wish to give your element a class) of the HTML and generates the appropriate markup based on the keys you input. There may be other plugins which do this but Emmet is the only one I’ve heard of.
While this was a breif overview of the web-development technologies that can take away painful hours of typing for you, I decided to only focus on the “developer” centric tools and thus didn’t give much thought about content management systems, WYSIWYG editors, and whatever other web-authoring tools that exist among us.