The Difference Between HTML, CSS, JavaScript, & PHP

HTML. CSS. JavaScript. PHP. Acronyms (and one weird sounding compound word) that come up time and again when it comes to web development. You might be asking yourself when you're meant to use each of these, and that’s what I'll be talking about in this post: the difference between HTML, CSS, JavaScript, and PHP.

When getting started in web development, the different types of code can be a bit overwhelming — but, these ones are likely those which you’ll come across the most. Primarily HTML, CSS, and JavaScript, though PHP definitely comes into play with WordPress (and other content management systems) — but I’ll get to that later.

In this post, I’m going to tell you what each of these are used for, what you need to know about them, and which you should fuss about learning first, because I know — it’s a lot! But don’t worry, I’m going to break it down.

I’ve actually created a free cheatsheet for you on this topic that can serve as a handy reference for the future! Make sure you download it by clicking here or on the button below:

Free Cheatsheet: The Difference between HTML, CSS, JavaScript, & PHP

I’m including basic examples of each type of code to demonstrate how they are typically structured so you can start to recognize them. But, I’m intentionally not going to cover how to code in each of these languages.

For one thing, that would make this post way too long, and for another, my main goal here is simply for you to be able to conceptualize what each of these are used for. It’s pretty important to have a basic understanding of the purposes of these types of code before learning how to actually code in them. So, I’ll save the 'how-to' for future posts.

HTML

HTML stands for ”Hypertext Markup Language”, and is the standard language used for building web pages. HTML can be considered to contain the building blocks for a web page: it contains the content, structured through the use of HTML tags, of what will ultimately be displayed to the user.

In HTML you use tags to structure content sections such as navigation menus, headings, paragraphs, images, videos, and lists (the list goes on, but you catch my drift). As I mentioned, these different types of content are defined using HTML tags. Some examples of these tags include paragraphs (<p>), headings of various levels (<h1> through <h6>), and images (<img>).

It’s important to note that HTML isn’t intended to make your content look pretty! Browsers have default styles that they’ll apply to certain HTML tags if you don’t add your own styling, but it’s very, very basic (and boring).

Here’s an example of some basic HTML markup, with a first heading, second heading, and paragraph tag:

<body>
<h1>This is a first heading</h1>

<h2>This is a second heading</h2>

<p>This is a paragraph. Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
</body>

...and if that code gets rendered in a browser with no further styling, here’s what it looks like in the default browser styling:

Example default HTML styling
Boring.

As you can see, it's pretty plain and boring — definitely something you want to override with your own styling!

While you technically can add styling in HTML (known as ‘inline styling’), in the majority of cases it’s not considered a best practice. Better to keep things separate and organised for several reasons — I’ll explain more in the next section.

HTML In a Nutshell

You can think of HTML has the "skeleton" of your webpage: it contains the page’s content. It describes, through the use of semantic HTML tags, what each piece of content is intended to be.

HTML isn’t intended to add visual styles the content (aside from the default browser styling, I guess you could argue — but let’s be real, that ain’t pretty, and is majorly limited) — it simply defines and structures the content in a logical way that’s readable to both humans and machines.

Let’s move on to CSS — but first, don't forget to grab your free cheatsheet on all this stuff! Just click here or on the button below:

Free Cheatsheet: The Difference between HTML, CSS, JavaScript, & PHP

CSS

CSS stands for ‘Cascading Style Sheets’... and this is what makes your content look pretty! You use CSS to target the different parts of your webpage and add visual styles to them.

CSS can be included in your content in 3 ways: inline, internal, and external. I’ll briefly go over each so you’ll know what you’re seeing if you come across it in the wild.

Inline styling is what I mentioned above in the HTML section as not typically being a best practice — it means adding style tags directly into the HTML tag. An example of that would look like this:

<p style=”color:red;”>This is a paragraph with inline styling applied.</p>

As you might guess, the style=”color:red;” would make the text of that paragraph (but only that paragraph) red.

This isn’t ideal, since it only applies to that specific paragraph — usually in our web designs we want all of our paragraph text to have the same styling. Instead of applying an inline style to each paragraph tag, it’s much preferable to define the style in one place and have it apply sweepingly to all of the <p> tags.

That’s where internal and external styling come in.

The difference between internal and external styling is that internal styling is in the same document as the HTML, but contained within its own <style> tags so its not mixing in with our nice semantic markup. Internal styling only applies to the single page it’s contained on.

External styling is contained in its own separate file(s) with a .css extension that the HTML file would link to. The same external stylesheet(s) can be linked to from multiple HTML files, and therefore are able to be applied to several pages at once.

Aside from that, the CSS code itself looks the same.

CSS is awesome because it allows you to reference and style an entire ‘type’ of content at once. There are different ways of targeting page sections with CSS, and I won't cover all of those here, but one way you might apply styling is by applying it to an entire HTML tag.

For example, if you wanted all of your paragraph text to be red, you might target all <p> tags at once, which would look like this:

p {
color: red;
}

This CSS styling would apply to each and every <p> tag on the page(s) that this styling is applied to. You could potentially have tons of paragraph tags, and this code would target them all at once.

Compare this to inline styling (where the styling is directly in the HTML tag), where you have to go in and add the code to each <p> tag individually. And then in the future, if you wanted to change it, you’d have to go revisit and manually edit each one again — but by using style sheets, you just have to change it in one place and it’s done. Boom!

CSS is fun. :D

CSS In a Nutshell

CSS goes hand-in-hand with HTML by adding visual styles to your site content. If you think of HTML as your house’s structure and foundation, CSS would be the paint, funky furniture, and decorations that make it look beautiful. *heart eyes emoji*

Okay, now to move on to the wonderful world of JavaScript! Don’t forget to grab the free cheatsheet that summarizes all of the points of this post — click here to download it (or the button below!):

Free Cheatsheet: The Difference between HTML, CSS, JavaScript, & PHP

JavaScript

JavaScript (or JS, as the cool coders call it) adds interactivity to websites. To be specific, JS is a client-side scripting language, which means the scripts are running directly in the user’s browser (the browser being the client). JS scripts can be triggered by a user’s interaction with the page. Client side is also often referred to as front-end.

Quick note — it is possible for JavaScript to be server-side, but I won't be getting into that topic here. In any case, JavaScript is usually client-side.

Some common examples of JavaScript that you might come across are dropdown menus, slideout menus, ‘accordion’ style tabs that show and hide content, form validation, and way more.

Here’s the thing: for many websites, you don’t need JavaScript. For example, if you have a blog that you just wanted to post to and lay out in a pretty way, it’s totally possible to achieve that goal without using JS whatsoever. And there's no problem with that!

To be honest, the capabilities of CSS are so extensive nowadays that there are a lot of things that used to require JS that can now largely be achieved using CSS alone (animations, for example).

But JavaScript is fun and can really take a website to the next level when used strategically. And, of course, there are some things that can only be achieved using JavaScript (or are much more easily achieved with JS than trying to finagle a solution with purely CSS — I’ve seen people go pretty far to avoid touching JS with a ten-foot pole, but it’s really not that scary!).

The thing about JavaScript is that it has tons of libraries. Coding in pure JS without using a library — fondly known as ‘vanilla JavaScript’ — is surprisingly rare nowadays. In many cases you’re far more likely to find someone using a library such as jQuery.

jQuery and other JavaScript libraries are not their own languages. In the cases of libraries, essentially what happened is that someone (or a bunch of someones) wrote some JavaScript code to make writing JavaScript code easier. Yup, it’s quite meta. Then they packaged up that code into a library, gave it a name, and made it available for people to download and use. jQuery is an example of one such library, and is the most widely used one.

Here’s an example of some jQuery code that calls a function called toggleMenu when an element with the class ‘menu’ is clicked:

$('.menu').on('click', function() {
toggleMenu();
});

Libraries like jQuery provide functions for you to use that make your code cleaner, simpler, and faster to write. If you wanted, you could figure out how to write those functions yourself in vanilla JavaScript, but the libraries exist so you don’t have to. They speed up your workflow and simplify your code — the tagline of jQuery is “write less, do more”.

JavaScript In a Nutshell

Continuing with our house analogy: if the HTML is the structure, the CSS is the decor, then JavaScript would be the interactive and functional things like the coffee maker and dishwasher. JS makes it so your site is dynamic and “does stuff”, as opposed to being comprised of static HTML & CSS only.

Alright, onto the last one! PHP.

PHP

Remember how I said JavaScript was a client-side (or front-end) scripting language? Well, PHP (meant to stand for "Hypertext Processor") is a server-side (or back-end) scripting language.

Unless you’re a professional web developer in some capacity, my guess is that your experience with PHP will most likely be constrained to how it’s used on a PHP-based platform like WordPress.

Note, it’s possible to use WordPress without ever touching a line of PHP. WordPress is intended to be able to be used by non-coders, so there’s no prerequisite knowledge required to use it.

That said, you do have access to your site’s PHP code if you're on WordPress, and you can get a lot more out of the platform if you know how to use and edit it strategically. This is more advanced than the typical WordPress user might go... but that’s why you’re here, right?

With server-side scripting, the scripting happens on... a server! What this means is that the scripting is already completed by the time the site is rendered on your browser. That’s where the term back end stems from — think of it like “behind the scenes”.

Whenever you visit a website, it’s served from a server (see what I did there?); that means by the time you’re actually seeing it, the server-side scripts, if any, have already run. The site content is now rendered as good ol’ HTML in your browser — which is known as the client — and that’s where client-side scripting (like JavaScript!) takes over.

Here’s an example of some PHP code that prints “Hello” on the page:

<?php echo “Hello”; ?>

Like I said, if you're a non-professional web developer, you’re likely not going to be using server-side scripting much, unless you’re using it in conjunction with a CMS such as WordPress. CMS stands for “content management system”, and it refers to a platform that makes it easier to manage your website’s content.

Imagine if every time you wanted to write a blog post, you had to code it yourself. Not exactly efficient, right? Sure, you could copy-paste the code from a past post and then just replace the content, but it would be tedious and time-consuming. That’s why content management systems exist — they allow you to modify, manage, and add to your site content without having to deep dive into the code every time.

To make this possible, WordPress uses PHP. WordPress themes have templates for things like pages and posts. It’s in your WordPress dashboard that you create those and add the content for them. WordPress then uses PHP to grab the content you added in the CMS to render it into the appropriate places in the template when the page is loaded.

That’s why themes are (well, for the most part) grab’n’go — WordPress has standard PHP functions that theme developers can use. This standardization allows you to swap one theme for another, and that new theme will still be able to distinguish between the different types of content you've put onto your WordPress site.

PHP In a Nutshell

I’m struggling a bit to build on (no pun intended) the house analogy here... but I’m going to try! If HTML is the structure, CSS is the decor, JavaScript is the appliances, then I guess PHP would be the equivalent of the manufacturing plant for the appliances and building supplies. It’s the stuff that happens behind the scenes before the final product is available for use by you.

...hopefully I didn't completely lose you with that one. Basically, PHP scripts run on the server-side and generate the HTML that you see in your browser once the page loads.

Out of all the coding types I went over in this article, you’ll likely use PHP the least, but it’s still good to know what it does.

In Conclusion

If you’re just getting into web development, start with learning HTML & CSS. They’re the most basic and necessary markup languages you need to know to build websites, and you can build some pretty cool sites using just them!

After you have a basic understanding of those, I’d start to integrate some JavaScript into your development workflow. And, while a knowledge of vanilla JavaScript is certainly useful, there’s no shame in beginning with jQuery, which can be a more digestible starting point. jQuery sort of boils JavaScript down into simpler functions that are more practical and straightforward for basic front-end development.

From there, I’d consider learning the basics of PHP. If you’re not using a PHP-based CMS, you might not even have a need to, unless you simply have an interest in server-side scripting. But if you’re on WordPress, it’s a good idea to understand the basics.

And once you’ve gotten somewhat comfortable with HTML, CSS, and JavaScript, you’ll likely find it much easier to figure out where PHP fits into the mix and understand how they all work together!

I know this post was pretty long — but don't forget that I made a free cheatsheet concisely summarizing the information I went over here! Grab yours by clicking here or on the button below:

Free Cheatsheet: The Difference between HTML, CSS, JavaScript, & PHP

I hope this post helped clarify the difference between HTML, CSS, JavaScript, and PHP and their various uses. Please feel free to leave any questions in the comments, and stay tuned for future tutorials! :)

Browse more blog posts »
  • Mar

    I love your work! You are literally who I want to be. One question, I sometimes see “HTML5.js” and I don’t really understand it, because one thing is HTML and the other is JavaScript (js) right? Do you know what it means?

    • Hey Mar, thank you so much! :) You’re right, the .js file extension denotes a JavaScript file. So, “HTML5.js” would just be a JavaScript file that’s named “HTML5” for some reason. I haven’t come across that myself, but I hope that helps!

    • Hey Mar, thank you so much! :) You’re right, the .js file extension denotes a JavaScript file. So, “HTML5.js” would just be a JavaScript file that’s named “HTML5”. I looked it up and it seems like that is a script used for enabling HTML5 elements in browsers that don’t support it. It’s not something I’ve personally used before but I hope that helps!

Browse more blog posts »