There are three parts to a web page - HTML, CSS, and JavaScript. Each of these serves a different purpose when you are creating your web page.The way in which you write these component parts of your web page will determine how accessible and user friendly your web page is.
Some people will write the HTML, CSS, and JavaScript all together and all in the one file just mixing them together as required to obtain the desired end result. Taking this approach may get you a page that does what you want when CSS and JavaScript are enabled but your code will be a real mess and the page may not work properly for everyone. If you do create your page that way then you really need to rewrite the page at the end so as to separate out the CSS and JavaScript into separate files.
A better approach is to start by considering what the purpose of each of the three languages are.
- HTML is intended to define the content of your web page. the HTML tags should define what the content of the tag actually is.
- CSS defines the appearance of your page so what fonts to use and what to put where shoudld be defined here. It also allows you to define a different appearance for different media.
- JavaScript defines the behaviour of the page.
If we think of these three as separate layers that build one on the other then the order in which we should create our page becomes far more obvious. A web page exists for the content and so the content should come first. To that content we add the HTML that defines semantically what that content is. Once the HTML is complete we then define how we want it to look using CSS. While setting up the appearance we may need to add a few extra div or span tags to the HTML in order to handle the lack of CSS 3 support in some browsers but for the most part there shouldn't be any major changes required to the HTML in order to define its appearance in the CSS. The same then applies in adding the JavaScript. The JavaScript should be added after the HTML and CSS are complete and the only updates to the HTML it should require are the addition of the script tag and perhaps a few extra div and span tags to identify the content that the JavaScript is to interact with.
This is the ideal way of creating a web page but what works in theory doesn't always work in practice. Web designers will not necessarily have the actual content for the web page available until after they are supposed to have completed writing all the HTML, CSS, and JavaScript for their page. They are instead supposed to be creating a template for the site that will work regardless of the content that is in a specific page. Some people use this as their excuse for not creating the HTML, CSS, and JavaScript in the most appropriate order.
This is actually a completely invalid excuse for doing things the wrong way around. Certainly you may not have the actual content for individual web pages when creating the template but that content will generally consist only of headings, paragraphs, images, and possibly a list or table. A few generic paragraphs of text (possibly lorum ipsum) can easily substitute for that part of the page when you are designing the template. The rest of the real page content, the part that will be common between all of the web pages using the template by necessity must be known before the template can be created. It is capturing that part of the real content that forms a part of the web page designers job in doing the design of the web page.
Therefore the actual page template can be written HTML first then CSS and JavaScript last just as if it were a real page. The only part of the page that will be incomplete will be the actual content of the page and while you may have a few CSS commands to define how that content should look there will be no JavaScript in the template that interacts with that part of the page at all.
When the real page content becomes available you then do a second pass through the same steps that were used to create the template. The HTML for the real content is written to define what that content really is and it is substituted into the page in place of the placeholder text. Next any CSS commands are added that apply specifically to the content of this page. Finally if there is JavaScript required to interact with the specific page content then it is added last. Again as before the only changes to the HTML when adding the JavaScript will be the script tag and possibly a div or span tag.
So in practice we end up with a six step process of HTML, CSS, JavaScript to create the template followed by HTML, CSS, JavaScript for each page to complete the creation of that page. By creating our page using this sequence of steps we end up with semantically correct HTML and unobtrusive, accessible JavaScript.
The only time that this process would not work properly is if the real page content were to break out of the container that is allocated in the template to hold it. When that happens it is an indication that the template wasn't thought out properly with respect to what it is expected to contain.That would just mean that the CSS and possibly the JavaScript steps for the template design need to be done again so as to redesign the template to fit all of the pages that it is supposed to contain. Whether this modified template is applied to all the pages or just to those that break the original template is then a design decision.
The one thing that all of the above processes have in common with respect to JavaScript is that the HTML and the CSS for the part of the page the JavaScript is going to interact with are written and tested before you start writing the JavaScript for that interaction. By always leaving your JavaScript coding until after the HTML and CSS are written means that you can both test that the page will work for those of your visitors who do not have JavaScript available and also can make the JavaScript completely unobtrusive.
