What is the best method to change content of a website ?

Hello, first of all I am new to this Forum and this is my first post.

I'm just a beginner regarding to Web Development so I want to apologize for asking simple questions.

Now to my question:
I have a <nav> with 5 elements and by clicking an element I would like the page to change the content below the <nav>. My content is written inside a <div> element with the id="content".

I wanted to solve this problem by using some javascript that loads the "new" HTML code in the <div> element.
Is it possible to do that, or are there any other ( maybe easier ) ways to switch the content of my page ?

Thanks for taking the time to read through this ! If you need any further information just ask for it

-TheArchitecct

 

First question would be: what's wrong with page-loads?

 

You mean loading a whole new page instead of just changing the content ? What would be the benefits of doing it like this ?
And that would mean that I just copy the main code and change it for every single element right ?

 

Because it doesn't involve any scripting, it means that everything can be cached without any problems, if you have lots of the same content on every page (only the "article" or other content changes) then you utilize some sort of server-side code, if you just have links, you get a proper URL that users can use to go directly to the page they want, etc. etc.
Of course you can use javascript to show/hide content on the page, or retrieve the content from a database and put it on the page, but mostly this is gimmicky, without any real benefit to the user - it all depends what you want to do, and what content you plan on showing.

 

Well the header of the page is supposed to be the same, but everything below the header is going to change. The content of the starting page is only supposed to show text, other pages are supposed to show Images, Videos and Audio Files. It changes from page to page. I guess it will be better to load a whole new page then instead of just changing content via javascript right ?

 

It will be simpler. By "lots of the same content" I mean code, not content - I'm assuming, since you were interested in having just the content change, that the rest of the page is gonna be just the same code, and that just a main container changes.
Of course, you can do this via javascript, retrieve the content from files or from a database, and update the content, but (depending on the amount of content) it will be faster and easier to just retrieve a new page. And it will work in all browsers, even screen-readers, for people who's turned off javascript, etc. etc.
At least you should make it work like that FIRST - when you have that working as you want, you can add a javascript function to pull the content in via ajax, if you want to add animation, fades etc. But then you'll already have a working site, which can be viewed and used (without the fancy javascript styling) for users who wants that.
Never EVER add javascript to anything unless you have it working without first. That's a very good rule.

 

Okay thank you very much for those tips !

 

... and some SEVERE shortcomings -- like search engines possibly not being able to even find your content, zero graceful degradation, and possibly wasting bandwidth on a bunch of scripttardery for nothing.

Worst of all is it violates the unwritten rule of JavaScript: If you can't make the page work without JavaScript FIRST, you likely have no damned business adding scripting to it!

Of course, you mentioned the pointless redundant HTML 5 garbage NAV tag, what's inside it?

Really even the simplest PHP could be leveraged to give you a simple skinning system if you want to maintain the site directly via the markup. It's basically what PHP was designed to do.

Dicking around with JavaScript to do it client-side? WAY to piss off users and piss all over the accessibility of the site. Not everyone is going to even HAVE scripting, WANT scripting, or even be able to USE the scripting since not everyone navigates the web with mouse or touch.

Same reason content and semantics should be done BEFORE layout, since not all users are sighted and search engines don't have eyeballs. If your navigation only works with scripting, you're alienating a giant swath of potential users which is why such scripttardery has no damned place on a website. (no matter what FaceBook says on the subject flipping a double-bird at anyone not in their magical perfect realm of perfect vision and zero accessibility needs)

 

Hopefully it's not too late, but I think Server Side Includes could work really well for you in this case. No need to get your hards dirty with PHP even.

Here's a tutorial on how to use them: http://www.freewebmasterhelp.com/tutorials/ssi

If you need to test/work with them locally: WAMP or MAMP is the way to go.