CODEWITHSUNDEEP
javascriptjqueryhtml
Snorlax
Snorlax

Reputation: 4765

Minimalizing HTML content

Is there a way to minimalize HTML content?

For example, let's say I have a regular HTML document such as:

<html>


<title>A title or something</title>  

  <h2>Blah blah blah times 5 </h2>
  <p>
  Blah blah blah times 5Blah blah blah times 5Blah blah blah times 5Blah blah blah times 5Blah blah blah times 5Blah blah blah times 5Blah blah blah times 5Blah blah blah times 5Blah blah blah times 5Blah blah blah times 5Blah blah blah times 5Blah blah blah times 5Blah blah blah times 5Blah blah blah times 5
  </p>


</html>

I would rather if possible do something like this:

<html>


<title>{title of page}</title>  

  <h2>{header information}</h2>
  <p>
{Paragraph information}
  </p>


</html>

I'm not sure how the html page would know it's getting that information but I'm looking just to see if this is possible or not.

Upvotes: 4

Views: 95

Answers (4)

millerbr
millerbr

Reputation: 2961

You probably want to use a library like Handlebars. There are other similar libraries out there as well so take care to research which is best for you.

Handlebars will allow you to use the {{something}} format to minimise the information you code into your html. Others will use a similar, if not the same, format.

Building on that, you could also switch to using an MVC framework (such as Angular or Ember) which include similar "mustache" style templating and other helpful features in order to make your dynamic content easier to code. Ember actually uses Handlebars, Angular uses it's own "directives" which are very similar. Other MVC frameworks with included templating are available as well.

Upvotes: 8

Munawir
Munawir

Reputation: 3356

Or you can use JavaScript to place contents programatically

document.getElementsByTagName('title')[0].innerHTML = 'title of page';
document.getElementsByTagName('h2')[0].innerHTML = 'header information';
document.getElementsByTagName('p')[0].innerHTML = 'Paragraph information';
<html>
  <title></title>  
  <h2></h2>
  <p></p>
</html>

Upvotes: 0

pcproff
pcproff

Reputation: 622

What do you plan on using to populate your HTML? I usually use

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> </head> <body> <h1>{{jsonResponse.whatever}}</h1> </body> </html>

as my minimum markup to start off with and then have angular fill in the rest where needed.

Upvotes: 1

driangle
driangle

Reputation: 11779

You're basically asking about using some kind of UI templating framework. It's possible to do, it can be done server-side or client-side, each has it's pros and cons.

Since you tagged the question with javascript and jquery here are a few client-side templating frameworks that you may find useful:

Also take a look at Template Engine Chooser

Upvotes: 2

Related Questions