What do square brackets mean in html?

Question

I am assisting on a project right now and building out templates for the first time, trying to wrap my head around a few things but one aspect of the html that's confusing me are certain things sitting in square brackets. I've never used these in html before so I'm just wondering what they are for (when I open the page in a browser they all show up as text)

Here's a bit of the code:

<div class="container">
   [HASBREADCRUMBS]
   <ol class="nav-breadcrumb">
      [BREADCRUMBS]
   </ol>
   [/HASBREADCRUMBS]
   <h1 class="header-title" style="color:[TITLECOLOR];font-size:[TITLESIZE];">[TITLE]</h1>
</div>

Answer 1

It's using some templating engine and the whole page is parsed before getting output to the browser. During parsing, those square bracket tags work as something else (depending on the templating engine used).

So, for example, [HASBREADCRUMBS] and [/HASBREADCRUMBS] could denote a piece of code that might be similar to:

if (breadcrumbs) {

and:

} // closed if

and for each value of the breadcrumbs object (whatever it might be) one ordered HTML list is rendered with the breadcrumb value as its content ([BREADCRUMBS]).

So in short: it's not HTML, that part of the file never reaches the browser but is converted into proper HTML (based on conditions, can also use loops, etc.) before rendering.

Answer 2

The square brackets have nothing to do with HTML. They probably belong to the template and will be replaced by actual value from the template engine.