Is This Semantic?

[davemcnally]

I came across a blog entry recently that recommends not including common page elements such as your menu and sidebar within your page code but having them in their own files and loading them dynamically:

"A lot of web content is common from page to page. Think menu bars, sidebars, footers, “boxes”, etc. This kind of content should be dynamically loaded. Either from a database or with simple PHP include statements."

From the example they give for loading your common elements:

<?php include_once("left-sidebar.html") ?>

Is this actually recommended? I have never read anything like this before! Below is the link to the original article which is all about Beautiful Code. It's a great article regardless of whether or not the above is actually recommended.

http://css-tricks.com/what-beautiful-html-code-looks-like/

[Jessi]

I've never seen that recommended before. I'd like to see what others have to say about it, too...

[BPartch]

I'm not sure it has anything to do with semantics but yes if you are going to design a 1000 page website and every page is going to have the same nav, then by all means it is best to add it into the pages via an include. This way you only have to edit the one nav.php file to make changes to the menu globally.

Similar to how using one external stylesheet to present your layout would make changes easier than if every page had the same .css in the head or inline with the content.

A Wordpress theme does basically this in that most of the files that make up a theme adds the same header, sidebar and footer.php files into the structure via includes.

[davemcnally]

@Ben:

Isn't semantics all about structure? Surely this slots right into that? I noticed WP does this, just never read anything before actually recommending to hand author your pages in this way.

[BPartch]

No, semantics is about using the right element for the right situation.

If you have a grocery list with 10 items on it where the order in which these items are purchased is not important you would use an unordered list.

If you have a cooking recipe that has 10 steps that have to be followed in a certain order than an ordered list would be best.

This include deal above really has nothing to do with structure. It is just placed in the file where the .html would go, then the .html that it replaced is moved to an external file, then PHP does the trick on the server and when it gets to the browser the external files contents appear in the main file just as if it was still in it.

[davemcnally]

Gotcha, thanks for clearing that up.

So, would you only recommend doing this when working on larger sites?

*Edit - Forgot to mention where I picked up that using semantic markup was related to structure. Zeldman's "Designing With Web Standards" has a section relating to this and he mentions "structural markup" as being the same thing as "semantic markup". Just a bit of a confusing statement.

[BPartch]

Gotcha, thanks for clearing that up.

So, would you only recommend doing this when working on larger sites?

*Edit - Forgot to mention where I picked up that using semantic markup was related to structure. Zeldman's "Designing With Web Standards" has a section relating to this and he mentions "structural markup" as being the same thing as "semantic markup". Just a bit of a confusing statement.I would use includes for anything that is going to be exactly the same on every page of the site if there was more than just one page. I am lazy though.

Though yes this is mainly for larger sites. If you have just 5 pages and do not mind making the same changes to all of them when an element that is the same needs to be changed then it could be skipped.

I cannot argue with Zeldman! :p

[chrispian]

This is more of a programming way of thinking around the ideas of Don't Repeat Yourself (http://c2.com/cgi/wiki?DontRepeatYourself) and Once and Only Once (http://c2.com/cgi/wiki?OnceAndOnlyOnce). It is a very good practice, especially if you run multiple sites.

If you are running wordpress, the template serves the same purpose. I have a network if sites that I include certain common elements. And when I designed 451 Press we had hundreds of sites that all included common elements and includes are the only way to go.

They are absolutely right. This is a very good way of doing things.

[davemcnally]

Hehe, I wouldn't argue with him either!

I suppose I haven't come across this before because where it is probably being used the most is in the likes of blogs and as you mentioned, WP does that for you anyway. This could come in handy for a lot of sites though, as in the majority of cases, site navigations tend to stay the same throughout so it could at least be used there more often.

[ses5909]

I suppose I haven't come across this before ...

That's because you've been involved only in the HTML side of things. This is where a server-side programming language like PHP comes in handy. But yeah, most sites you see do it this way, it's just not visible from the front end.

[Dan Schulz]

I know this is slightly off topic, but I thought I'd share this with you all anyway. Just bear in mind that there is a difference between "well formed" and "semantic". The following sentence, for example, is well, formed, but is by no means semantic (and if you're drinking anything, I strongly suggest you stop before reading further).

"The man was pregnant."

Now, as others have noted, PHP is by no means semantic. It is however, a powerful server-side programming language that can make managing and maintaining Web sites a heck of a lot easier. And to answer the question (wherever it was), yes, I would use it on smaller sites as well, since I never know when they'll suddenly decide to grow up. :)

[davemcnally]

Thanks for the help, guess I should start implementing this then.

[deronsizemore]

I don't use WordPress, but I do the equivelant in ExpressionEngine. In EE, you can set up "embeds" so for example I have my header which is consistent across all pages. I create a template called "header" and place it into my "includes" template group and then call it into my other templates by placing this code:

{embed="includes/header"} So, when I need to change something to the header, all I need to change is the includes/header template file and viola, it's changed across all of my pages.

I'm guessing what it is included inside of the php file, is semantic. When a browser renders your web page it reads the php and outputs to the screen whatever the php is telling it to do. So, if you have a php include that has a nav menu semantically written inside of it, all that will be output when you view the source is the semantic unordered list.

[shyflower]

I've never seen an article on it, but it's the way I've been doing it for years.

[SarahG]

Any site that duplicates a section of content would be daft not to separate this into includes or the ASP equivalent. The minute you need to update that you'll be kicking yourself for having to do it twice ;)

I have two page sites that use the same header and footer.

Not sure if these posts of mine will be of any interest
Basic file includes :: Stuff by Sarah (http://www.stuffbysarah.net/blog/2005/08/26/basic-file-includes/)
Including Files : Advanced :: Stuff by Sarah (http://www.stuffbysarah.net/blog/2006/01/22/including-files-advanced/)

[davemcnally]

Any site that duplicates a section of content would be daft not to separate this into includes or the ASP equivalent. The minute you need to update that you'll be kicking yourself for having to do it twice ;)

I have two page sites that use the same header and footer.

Not sure if these posts of mine will be of any interest
Basic file includes :: Stuff by Sarah (http://www.stuffbysarah.net/blog/2005/08/26/basic-file-includes/)
Including Files : Advanced :: Stuff by Sarah (http://www.stuffbysarah.net/blog/2006/01/22/including-files-advanced/)


They will surely help me out as I know very little PHP at all. Thanks xD

[Michael Martin]

It's good practice (for the reasons others have given), but it's not entirely semantic.

<?php include_once("left-sidebar.html") ?>

Left refers to a presentational device. A fully semantic document would completely separate style from content.

What happens if you decide to swap the left and right sidebars around? :)

[davemcnally]

It's good practice (for the reasons others have given), but it's not entirely semantic.

<?php include_once("left-sidebar.html") ?>

Left refers to a presentational device. A fully semantic document would completely separate style from content.

What happens if you decide to swap the left and right sidebars around? :)

Clearly, the example they gave didn't have this in mind. It wasn't the naming of their example which was in question however, it was the idea of includes in your markup. :tongue:

[deronsizemore]

It's good practice (for the reasons others have given), but it's not entirely semantic.

<?php include_once("left-sidebar.html") ?>

Left refers to a presentational device. A fully semantic document would completely separate style from content.

What happens if you decide to swap the left and right sidebars around? :)


Copy the code inside the left-sidebar file to the right-sidebar file? :naughty:

[BPartch]

Copy the code inside the left-sidebar file to the right-sidebar file? :naughty: and vice versa :'"

[Michael Martin]

Copy the code inside the left-sidebar file to the right-sidebar file? :naughty:

lol - I didn't mean that there wasn't an answer. Just that if you wanted a fully semantic design, it would be something to bear in mind. :P

[deronsizemore]

lol - I didn't mean that there wasn't an answer. Just that if you wanted a fully semantic design, it would be something to bear in mind. :P

hehe, yeah, I was just giving you a hard time. :bigsmile: