Member of The Internet Defense League

The Difference Between HTML, CSS, PHP, and Everything Else

  • HTML sets up the structure
  • WTF does all this mean?
  • HTML setting up the structure
  • look
  • look

Fair Warning: This is a long post about a technical subject, I’ve done my absolute best to break it down into very understandable sections so that everyone can understand it. 

There is a lot that goes on behind the scenes for every website and it’s very valuable to understand at some level all of the pieces that go into a website. You will be able to better address an issue (as well as communicate an issue to tech support) with your website if anything should go wrong. You will be able to look at your website and understand the fundamentals of how it works. You will be able to impress your friends with your new found knowledge and explain it to them using what I think is a pretty decent analogy! And who doesn’t love impressing people?

I suppose before anything I should probably go a little in depth to the basics of code and how it all comes together. If you already have a basic understanding of code then feel free to skip onto the next section. Code is the base for everything you see and interact with on your computer, television, DVD player, the web, your phone, your car, etc. If it has electricity running through it then there’s a good chance that it has a fair bit of code behind it. I’m going to go into the types of code that build a website and how they all go together to create the experience you see now on the web (note that this is different from the type of code that runs applications like Adobe Photoshop or Microsoft Office). Code itself is sorted into languages, just like how we communicate. This is because each one operates on its own respective dictionary; for example, something written in PHP could mean something entirely different in HTML. The primary languages used on the web are HTML (HyperText Markup Language), CSS (Cascading Style Sheets), PHP (Personal Home Page tools), ActionScript (Adobe Flash Player), and JavaScript. There are other languages out there but these are the 5 basic languages you will see on the web.

Starting with a general overview of the different languages, they can be sorted into three categories: structure, look, and function. You can think of the way they interact like the different sections of a house. Structure is the framework, the foundation, walls, doors, stairs, and that sort of thing that make up the house. The Look is what colour you paint your house, what rugs you use to decorate, paintings you put up, and what you put in your yard. The Function makes up the electricity, gas, solar power, and all the things that make your house tick. Technically if you wanted to have a house you only need the Structure; the Look and Function aren’t required. A website is the same way, technically you only need the structure, but your site isn’t going to look very good or function very well. That’s why you paint your house or apply a background colour to your site, and why you install a furnace or install the ability to play video. You want to have a nice house just like you want a nice website, and for that you need Foundation, Look, and Function (generally in that order). Now that we have the categories I’ll fit HTML, CSS, PHP, ActionScript, and JavaScript in their respective groups.

Starting with Structure, as any person would do when building a house, we have HTML. HTML makes up the whole structure of your website. In a house you define each room for a specific task, bedrooms, bathrooms, kitchens, dining rooms, etc. Bathtubs go in the bathroom, refrigerators go in the kitchen, a TV goes in the living room; however it is not defined where in the room they will be. HTML does the same thing with the elements on your website. If you have a video you want on the homepage or your phone number on your contact page, HTML creates these rooms or pages and tells those elements to go there. HTML does not tell them where on the page to be, that’s a job for the Look of your website.

The Look of your site picks up where HTML left off, it tells objects where to sit inside the rooms they’ve been told to sit in. CSS defines the location and, well, the look of all the elements on a webpage. If you had a shoe rack next to your front door in your living room, HTML would define it as being in the front room, CSS would define it as being next to the front door, made of wood and aluminum, and its dimensions. You can see how the relationship between HTML and CSS is significant in placing and designing everything on your website.

Now thanks to HTML and CSS you’ve got a house with walls, windows, doors, couches, a TV, a stove, and everything else you want to put in it and they look and are placed how you want them. But you’re still missing a few very critical elements in your house. Electricity, gas, cable, and a phone line are all missing from your house. You can have a nice house relative to the rest of the world without these things, but they add that last bit of pazzaz that make your house really yours. This is where The Function comes into play. Just using HTML and CSS you can easily create a nice website relative to all the websites on the web, but if you want to have a top-tier website you need to include Functions. Functions are made up of many different coding languages: Javascript, PHP, ActionScript, and HTML5 (this is different from HTML for some very specific and good reasons) are good examples of coding languages that provide The Function to your website. Each of these languages operates on its own library, meaning that something written in Javascript will mean something entirely different when placed into PHP.

It takes a long time to learn all of these elements to a website and how to effectively combine them to create a beautiful, functioning top-tier website. It also takes a long time to take all of that knowledge and distill it through project requirements and requests into an actual website that can be released to the public. There are even more elements that go on in the background that you may know something about, Search Engine Optimization being the biggest one of all. An expert can take all of the requirements of a project and break it down into its sections of Structure, Look, and Functions and create a website that everyone can enjoy and will build reputation and produce results for the project.

Categories

About Author

Colwyn Fritze-Moor

I have spent the past 20 years of my life in the world of business, marketing and design. Before that? I wasn't born before that. I am an entrepreneur at heart, I've had 4 jobs and started 2 companies by the time I turned 18. I'm obsessed with technology and the ways it can improve our lives. Storytelling, design and community are themes which resonate through everything I do. I see the bond between technology and community, it's ability to bring us together as a planet. My vision is to create real bonds out of that potential for community and connection.

5 Comments

  1. Pradeep Pal

    Thanks for defining. I am a beginner and was a bit confused about the above terms but now I have got them.

Leave a Reply

Get Adobe Flash player