{"id":1183,"date":"2022-12-20T05:04:26","date_gmt":"2022-12-20T05:04:26","guid":{"rendered":"https:\/\/www.ubercompute.com\/blog\/?p=1183"},"modified":"2022-12-24T06:43:32","modified_gmt":"2022-12-24T06:43:32","slug":"benefits-of-using-pug-template-over-traditional-html","status":"publish","type":"post","link":"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/","title":{"rendered":"Benefits of using Pug Template Over Traditional Html"},"content":{"rendered":"\n

Pug, also known as Jade, is a template engine for HTML that simplifies the process of writing and maintaining HTML code. It is a high-performance engine that converts Pug templates into HTML.<\/p>\n\n\n\n

\n

Pug was developed to make it easier for developers to write clean, well-structured HTML code. It achieves this by using indentation and whitespace to create a hierarchy of elements, similar to how we use indentation in programming languages like Python.<\/p>\n<\/blockquote>\n\n\n\n\n\n

Here is an example of a simple Pug template:<\/p>\n\n\n\n

doctype html\nhtml\n  head\n    title My Website\n  body\n    h1 Welcome to My Website!\n    p This is my personal website.\n  footer\n    p Copyright 2020<\/code><\/pre>\n\n\n\n
This template would be compiled into the following HTML:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>My Website<\/title>\n  <\/head>\n  <body>\n    <h1>Welcome to My Website!<\/h1>\n    <p>This is my personal website.<\/p>\n  <\/body>\n  <footer>\n    <p>Copyright 2020<\/p>\n  <\/footer>\n<\/html><\/code><\/pre>\n\n\n\n
As you can see, Pug simplifies the process of writing HTML code by allowing us to use indentation and whitespace to clearly define the hierarchy of elements. This makes it easier to read and maintain HTML code, especially for larger projects.<\/p>\n\n\n\n
Benefits of using Pug template over HTML<\/h2>\n\n\n\n
There are several benefits of using Pug over HTML:<\/strong><\/p>\n\n\n\n
    \n
  1. Simplicity<\/strong>: Pug allows developers to write cleaner, more concise HTML code by using indentation and whitespace to define the hierarchy of elements. This makes it easier to read and maintain HTML code, especially for larger projects.<\/li>\n\n\n\n
  2. Reusability<\/strong>: Pug allows developers to create reusable templates and mixins, which can be included in other templates. This allows for a more modular and efficient development process, as developers can reuse common elements across multiple templates.<\/li>\n\n\n\n
  3. Improved performance<\/strong>: Pug templates are compiled into HTML before being served to the client, which means that the server does not have to process Pug templates on each request. This can lead to improved performance and faster page load times.<\/li>\n\n\n\n
  4. Better separation of concerns<\/strong>: Pug allows developers to separate the logic of their application from the presentation of their application. This makes it easier to maintain and update the front-end of an application without affecting the back-end.<\/li>\n\n\n\n
  5. Dynamic templates<\/strong>: Pug allows developers to use variables and looping constructs in their templates, which makes it easy to create dynamic templates that can be rendered with different data.<\/li>\n\n\n\n
  6. Improved readability:<\/strong> Pug templates are much easier to read than traditional HTML code, which makes it easier for developers to work on large projects and collaborate with others.<\/li>\n<\/ol>\n\n\n\n
    Ways to use Pug template<\/h2>\n\n\n\n
    There are several ways to use a Pug template, including using an online web-based tool or installing it locally on your computer.<\/p>\n\n\n\n
    Using an online web-based tool:<\/strong><\/h3>\n\n\n\n
    One option is to use an online web-based tool like Pug to HTML, or Jade to HTML converter. These tools allow you to input your Pug template and see the compiled HTML in real time.<\/p>\n\n\n\n
    For example, using Ubercomputes’s Pug-to-HTML Converter<\/a>, you can input the following Pug template:<\/p>\n\n\n\n
    doctype html\nhtml\n  head\n    title My Website\n  body\n    h1 Welcome to My Website!\n    p This is my personal website.\n  footer\n    p Copyright 2020<\/code><\/pre>\n\n\n\n
    And see the compiled HTML output:<\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n  <head>\n    <title>My Website<\/title>\n  <\/head>\n  <body>\n    <h1>Welcome to My Website!<\/h1>\n    <p>This is my personal website.<\/p>\n  <\/body>\n  <footer>\n    <p>Copyright 2020<\/p>\n  <\/footer>\n<\/html><\/code><\/pre>\n\n\n\n
    Installing Pug locally:<\/strong><\/h3>\n\n\n\n
    Another option is to install Pug locally on your computer using npm (the package manager for Node.js). This allows you to use Pug as part of your build process and integrate it into your development workflow.<\/p>\n\n\n\n
    To install Pug, you will need to have Node.js and npm installed on your computer. Then, you can use the following command to install Pug:<\/p>\n\n\n\n
    npm install pug<\/code><\/pre>\n\n\n\n
    Once Pug is installed, you can use it to compile Pug templates into HTML by using the following command:<\/p>\n\n\n\n
    pug source.pug -o dest<\/code><\/pre>\n\n\n\n
    This will compile the Pug template in the “source.pug” file and output the compiled HTML to the “dest” folder.<\/p>\n\n\n\n
    You can also use Pug as part of a build process by integrating it into a build tool like Grunt or Gulp. For example, you can use the following code in a Gruntfile to compile Pug templates into HTML:<\/p>\n\n\n\n
    grunt.initConfig({\n  pug: {\n    compile: {\n      options: {\n        data: {\n          debug: false\n        }\n      },\n      files: {\n        'dest\/index.html': ['src\/index.pug']\n      }\n    }\n  }\n});\n\ngrunt.loadNpmTasks('grunt-contrib-pug');\ngrunt.registerTask('default', ['pug']);<\/code><\/pre>\n\n\n\n
    This Grunt configuration will compile the Pug template in the “src\/index.pug” file and output the compiled HTML to the “dest\/index.html” file.<\/p>\n\n\n\n
    Using Pug in a Node.js application:<\/strong><\/h3>\n\n\n\n
    You can also use Pug as part of a Node.js application by requiring it in your code and using it to render templates.<\/p>\n\n\n\n
    To use Pug in a Node.js application, you will first need to install it using the npm install command. Then, you can require it in your code and use the render function to render a Pug template:<\/p>\n\n\n\n
    const pug = require('pug');\n\nconst html = pug.render('template.pug', {\n  title: 'My Website',\n  message: 'Welcome to My Website!'\n});<\/code><\/pre>\n\n\n\n
    This will render.<\/p>\n\n\n\n
    Drawbacks of using Pug<\/h2>\n\n\n\n
    While there are many benefits to using Pug over HTML, there are also some potential drawbacks to consider:<\/strong><\/p>\n\n\n\n
      \n
    1. Learning curve<\/strong>: While Pug is relatively easy to learn, it does require a different way of thinking about HTML code. Developers may need to spend some time learning the syntax and concepts of Pug before they can effectively use it in their projects.<\/li>\n\n\n\n
    2. Additional dependencies<\/strong>: Pug requires a build process in order to compile Pug templates into HTML. This means that developers will need to set up a build system and include additional dependencies in their project, which can add complexity and overhead.<\/li>\n\n\n\n
    3. Compatibility issues<\/strong>: Some older browsers may not support Pug templates, which means that developers will need to ensure that their templates are compatible with these browsers.<\/li>\n\n\n\n
    4. Lack of flexibility<\/strong>: While Pug templates can be very powerful, they may not always be the best choice for more complex or dynamic templates. In these cases, developers may need to use traditional HTML code or a different template engine.<\/li>\n<\/ol>\n\n\n\n
      In addition to Pug, there are several other template engines that offer similar benefits. These include Handlebars:<\/p>\n\n\n\n
        \n
      1. Handlebars<\/strong>: Handlebars is a popular template engine for JavaScript that uses a syntax similar to Pug. It allows developers to create reusable templates and mixins, and also supports helper functions and partials.<\/li>\n\n\n\n
      2. Mustache<\/strong>: Mustache is another popular template engine that is similar to Handlebars. It is known for its simplicity and flexibility and is often used in conjunction with a front-end JavaScript framework like Angular or React.<\/li>\n\n\n\n
      3. EJS<\/strong>: EJS is a template engine for Node.js that allows developers to embed JavaScript code in their HTML templates. It is a popular choice for developers working with Node.js<\/li>\n<\/ol>\n\n\n\n
        In Summary<\/h2>\n\n\n\n
        Pug, also known as Jade, is a template engine for HTML that helps developers write and maintain clean, well-structured code. It does this by using indentation and whitespace to create a hierarchy of elements, similar to how we use indentation in programming languages. The benefits of using Pug include simplicity, reusability, improved performance, better separation of concerns, dynamic templates, and improved readability. There are also several alternatives to Pug, such as Handlebars, Mustache, and EJS, that offer similar benefits. It is important to consider the pros and cons of using Pug before deciding if it is the right choice for a project.<\/p>\n
        Share and Enjoy !<\/h3>
        <\/i><\/span>Shares<\/small><\/div>
        <\/i><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
        Pug simplifies the process of writing clean, well-structured HTML code and offers benefits such as improved performance and improved readability.<\/p>\n","protected":false},"author":1,"featured_media":1190,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"0","ocean_second_sidebar":"0","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"0","ocean_custom_header_template":"0","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"0","ocean_menu_typo_font_family":"0","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"0","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"off","ocean_gallery_id":[],"footnotes":""},"categories":[35,10],"tags":[29,30,33,32,34,31],"class_list":["post-1183","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code","category-learn","tag-advantages-of-using-pug-template-engine-instead-of-traditional-html","tag-pug-template-engine-offers-numerous-benefits-compared-to-traditional-html","tag-pug-template-engine-vs-traditional-html-what-are-the-benefits","tag-pug-template-engine-an-improvement-over-traditional-html","tag-the-benefits-of-switching-to-pug-template-engine-from-traditional-html","tag-why-use-pug-template-engine-over-traditional-html","entry","has-media"],"yoast_head":"\nBenefits of using Pug Template Over Traditional Html<\/title>\n<meta name=\"description\" content=\"Pug simplifies the process of writing clean, well-structured HTML code and offers benefits such as improved performance and improved readability.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Benefits of using Pug Template Over Traditional Html\" \/>\n<meta property=\"og:description\" content=\"Pug simplifies the process of writing clean, well-structured HTML code and offers benefits such as improved performance and improved readability.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Ubercompute\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/ubercompute\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-20T05:04:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-24T06:43:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2022\/12\/Reading-time-calculator.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2240\" \/>\n\t<meta property=\"og:image:height\" content=\"1260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"ubercompute\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ubercompute\" \/>\n<meta name=\"twitter:site\" content=\"@ubercompute\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ubercompute\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/\"},\"author\":{\"name\":\"ubercompute\",\"@id\":\"https:\/\/www.ubercompute.com\/blog\/#\/schema\/person\/b88b7e9b2dea490ae06786f833da7c0d\"},\"headline\":\"Benefits of using Pug Template Over Traditional Html\",\"datePublished\":\"2022-12-20T05:04:26+00:00\",\"dateModified\":\"2022-12-24T06:43:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/\"},\"wordCount\":1078,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.ubercompute.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2022\/12\/Reading-time-calculator.jpg\",\"keywords\":[\"Advantages of using Pug template engine instead of traditional HTML\",\"Pug template engine offers numerous benefits compared to traditional HTML\",\"Pug template engine vs. traditional HTML: What are the benefits?\",\"Pug template engine: An improvement over traditional HTML\",\"The benefits of switching to Pug template engine from traditional HTML\",\"Why use Pug template engine over traditional HTML?\"],\"articleSection\":[\"code\",\"learn\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/\",\"url\":\"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/\",\"name\":\"Benefits of using Pug Template Over Traditional Html\",\"isPartOf\":{\"@id\":\"https:\/\/www.ubercompute.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2022\/12\/Reading-time-calculator.jpg\",\"datePublished\":\"2022-12-20T05:04:26+00:00\",\"dateModified\":\"2022-12-24T06:43:32+00:00\",\"description\":\"Pug simplifies the process of writing clean, well-structured HTML code and offers benefits such as improved performance and improved readability.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/#primaryimage\",\"url\":\"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2022\/12\/Reading-time-calculator.jpg\",\"contentUrl\":\"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2022\/12\/Reading-time-calculator.jpg\",\"width\":2240,\"height\":1260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.ubercompute.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Benefits of using Pug Template Over Traditional Html\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.ubercompute.com\/blog\/#website\",\"url\":\"https:\/\/www.ubercompute.com\/blog\/\",\"name\":\"Ubercompute\",\"description\":\"Online code formatter, converters, minifiers and domain tools\",\"publisher\":{\"@id\":\"https:\/\/www.ubercompute.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.ubercompute.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.ubercompute.com\/blog\/#organization\",\"name\":\"Ubercompute\",\"url\":\"https:\/\/www.ubercompute.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.ubercompute.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2020\/07\/Logopit_1595761381070-1.png\",\"contentUrl\":\"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2020\/07\/Logopit_1595761381070-1.png\",\"width\":546,\"height\":175,\"caption\":\"Ubercompute\"},\"image\":{\"@id\":\"https:\/\/www.ubercompute.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/facebook.com\/ubercompute\",\"https:\/\/x.com\/ubercompute\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.ubercompute.com\/blog\/#\/schema\/person\/b88b7e9b2dea490ae06786f833da7c0d\",\"name\":\"ubercompute\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.ubercompute.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/415385008a2e31c1c75421c02cae634c9cad39917b6036763e56ad7f893e2976?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/415385008a2e31c1c75421c02cae634c9cad39917b6036763e56ad7f893e2976?s=96&d=mm&r=g\",\"caption\":\"ubercompute\"},\"sameAs\":[\"https:\/\/www.ubercompute.com\/blog\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Benefits of using Pug Template Over Traditional Html","description":"Pug simplifies the process of writing clean, well-structured HTML code and offers benefits such as improved performance and improved readability.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/","og_locale":"en_US","og_type":"article","og_title":"Benefits of using Pug Template Over Traditional Html","og_description":"Pug simplifies the process of writing clean, well-structured HTML code and offers benefits such as improved performance and improved readability.","og_url":"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/","og_site_name":"Ubercompute","article_publisher":"https:\/\/facebook.com\/ubercompute","article_published_time":"2022-12-20T05:04:26+00:00","article_modified_time":"2022-12-24T06:43:32+00:00","og_image":[{"width":2240,"height":1260,"url":"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2022\/12\/Reading-time-calculator.jpg","type":"image\/jpeg"}],"author":"ubercompute","twitter_card":"summary_large_image","twitter_creator":"@ubercompute","twitter_site":"@ubercompute","twitter_misc":{"Written by":"ubercompute","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/#article","isPartOf":{"@id":"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/"},"author":{"name":"ubercompute","@id":"https:\/\/www.ubercompute.com\/blog\/#\/schema\/person\/b88b7e9b2dea490ae06786f833da7c0d"},"headline":"Benefits of using Pug Template Over Traditional Html","datePublished":"2022-12-20T05:04:26+00:00","dateModified":"2022-12-24T06:43:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/"},"wordCount":1078,"commentCount":0,"publisher":{"@id":"https:\/\/www.ubercompute.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2022\/12\/Reading-time-calculator.jpg","keywords":["Advantages of using Pug template engine instead of traditional HTML","Pug template engine offers numerous benefits compared to traditional HTML","Pug template engine vs. traditional HTML: What are the benefits?","Pug template engine: An improvement over traditional HTML","The benefits of switching to Pug template engine from traditional HTML","Why use Pug template engine over traditional HTML?"],"articleSection":["code","learn"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/","url":"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/","name":"Benefits of using Pug Template Over Traditional Html","isPartOf":{"@id":"https:\/\/www.ubercompute.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/#primaryimage"},"image":{"@id":"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2022\/12\/Reading-time-calculator.jpg","datePublished":"2022-12-20T05:04:26+00:00","dateModified":"2022-12-24T06:43:32+00:00","description":"Pug simplifies the process of writing clean, well-structured HTML code and offers benefits such as improved performance and improved readability.","breadcrumb":{"@id":"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/#primaryimage","url":"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2022\/12\/Reading-time-calculator.jpg","contentUrl":"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2022\/12\/Reading-time-calculator.jpg","width":2240,"height":1260},{"@type":"BreadcrumbList","@id":"https:\/\/www.ubercompute.com\/blog\/benefits-of-using-pug-template-over-traditional-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.ubercompute.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Benefits of using Pug Template Over Traditional Html"}]},{"@type":"WebSite","@id":"https:\/\/www.ubercompute.com\/blog\/#website","url":"https:\/\/www.ubercompute.com\/blog\/","name":"Ubercompute","description":"Online code formatter, converters, minifiers and domain tools","publisher":{"@id":"https:\/\/www.ubercompute.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.ubercompute.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.ubercompute.com\/blog\/#organization","name":"Ubercompute","url":"https:\/\/www.ubercompute.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.ubercompute.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2020\/07\/Logopit_1595761381070-1.png","contentUrl":"https:\/\/www.ubercompute.com\/blog\/wp-content\/uploads\/2020\/07\/Logopit_1595761381070-1.png","width":546,"height":175,"caption":"Ubercompute"},"image":{"@id":"https:\/\/www.ubercompute.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/ubercompute","https:\/\/x.com\/ubercompute"]},{"@type":"Person","@id":"https:\/\/www.ubercompute.com\/blog\/#\/schema\/person\/b88b7e9b2dea490ae06786f833da7c0d","name":"ubercompute","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.ubercompute.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/415385008a2e31c1c75421c02cae634c9cad39917b6036763e56ad7f893e2976?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/415385008a2e31c1c75421c02cae634c9cad39917b6036763e56ad7f893e2976?s=96&d=mm&r=g","caption":"ubercompute"},"sameAs":["https:\/\/www.ubercompute.com\/blog"]}]}},"_links":{"self":[{"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/posts\/1183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/comments?post=1183"}],"version-history":[{"count":8,"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/posts\/1183\/revisions"}],"predecessor-version":[{"id":1256,"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/posts\/1183\/revisions\/1256"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/media\/1190"}],"wp:attachment":[{"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/media?parent=1183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/categories?post=1183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ubercompute.com\/blog\/wp-json\/wp\/v2\/tags?post=1183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}