Building HTML5 websites in Squiz Matrix 4.18

(Ryan Archer) #1

I am wondering what the best practice maybe in regards to creating HTML5 structured websites using tags such as <header>, <section>, <aside>, <footer>, etc.

I can nest in the <aside> tags within the code that's not really a concern but the block level elements such as header, section and footer are a bit of a challenge as Squiz Matrix will allow me to build pages in block elements of divs, not able to choose any other type of block level element.

 

So what I have done is give the building block div the class of 'section', 'header', 'footer' or whatever else I want it to be then I am nesting the HTML5 tags within the actual page content, for example:

<div class = "section">
  <section>
    <h1>This is a section</h1>
    <p>This is some content for a section</p>
  </section>
</div>

I'm kinda thinking that this is overkill and the HTML5 tag does not really need to be there at all but I really want to follow HTML5 semantic markup and the Squiz Matrix version I am currently using does not seem to support that when building page content.

 

Is there a better way to do this whilst staying true to HTML5 markup?

(Bart Banda) #2

You could just make the container print as raw HTML and just print the <section> tag inside it? 

(Ryan Archer) #3

That's what I am doing, but as you know - the container itself is a div, hence why I came up with the code example above.

The opening div tag class is actually what I have named the parent div that squiz matrix provides.

(Douglas (@finnatic at @waikato)) #4

We're on 5.1 but were serving HTML 5 sites from 4.18 from before the update to 5.  We're not heavily using many html5 tags  - <header> and <nav> get used but are populated from the design files.  

 

The <div class = "section"> seems redundant.

 

You can, as Bart suggests, toggle the presentation setting on the Matrix 'div' so that it doesn't output the <div ...> and</div> tags (see https://manuals.matrix.squizsuite.net/concepts/chapters/page-contents-and-divisions#Editing-the-Properties-of-the-container).  You'd then just get the <section> tag and its contents printed.

(Ryan Archer) #5

I just realised I 'missed the boat'. Yes I can set it to 'raw html' but I'm fairly sure we avoid this so people with little HTML skills can go in and edit it later on. I will check this for future work where we won't have editors coming in later to update content.

 

If using all raw html fields to insert HTML5 tags in the future, it wouldn't obviously cause any issues with Easy Edit Suite would it?

(Bart Banda) #6

it wouldn't obviously cause any issues with Easy Edit Suite would it?

 

No it wouldn't. 

(Ryan Archer) #7

I feel real silly. Lack of understanding really. I can still keep whysiwig but set the presentation to "raw html" and leave the content type as whysiwig and not have an extra div inserted into the code.

lightbulb just went on.

(Nic Hubbard) #8

I feel real silly. Lack of understanding really. I can still keep whysiwig but set the presentation to "raw html" and leave the content type as whysiwig and not have an extra div inserted into the code.

lightbulb just went on.

 

You can also set this globally, so that you never have to deal with divs being automatically put in your HTML.