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:
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 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:
...and if that code gets rendered in a browser with no further styling, here’s what it looks like in the default browser styling:
As you can see, it's pretty plain and boring — definitely something you want to override with your own styling!
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:
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:
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.
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:
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*
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).
Here’s an example of some jQuery code that calls a function called toggleMenu when an element with the class ‘menu’ is clicked:
Alright, onto the last one! PHP.
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.
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”.
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
...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.
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!
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.
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: