What is the difference between the three HTML, CSS and JavaScript?

 

What is the difference between the three HTML, CSS and JavaScript?

 

Ever wonder how Web sites work? Really work, I mean?! Some years ago I was with my nephew and marveled at the colourful and interactive appearance of his favourite gaming website. I was asked by him, ‘Uncle, how do they make all this? It was then that I found out the significance of having a working knowledge of the three primary components of the web: HTML, CSS and JavaScript. Today, I want to tell you about these in a manner that's easy to understand for anyone.

What Is HTML? 

 The building of the entire structure. The base fundamental of a structure.

Just as a house has to be built, a website needs to be created. HTML is similar to the actual structure of that house: the walls, the windows, the doors and the rooms. HTML means HyperText Markup Language, but for now, let's just stick with the simple term “HTML”. You don't need to know that HTML is the structure of every website you are able to see. It is the foundation which keeps the whole structure together.

All text in a web page, pictures, videos and links are HTML. It's the code which tells your browser that “This is a heading”, “This is a paragraph”, “This is a button”, and “This is an image.” HTML is similar to the raw material. If it is not there, then there won't be a website. It's the bedrock on which all the rest of the building is constructed.

What Is CSS?

Now, suppose that you've created that house using HTML. The walls have been erected, the doors are installed, but it's all of the same white and dull. This is where the CSS can help. The paint, wallpaper, flooring and furniture of your website is styled by CSS. It's the beauty that makes it nice.

From the colours of the text, the size of the buttons, the images for the background, the spacing between the various sections and basically anything that will make your website look good visually, it's all the responsibility of CSS. Any website that's attractive is using a nice blue theme, or that has rounded buttons or text that looks in a particular font—all this is CSS working. There's no new content added to CSS, it simply makes current content look pretty.

What Is JavaScript?

 Each of the children has a smart, interactive part.

Let's now return to our house metaphor. It's well structured (HTML) and looks great (CSS). What about if you would desire items to move, respond and react? But, if you want a light switch that can turn the lights on and off after clicking, what then? JavaScript comes in handy here.

The website's "brain" is java script. What makes things interactive is it. JavaScript validates the form when it is submitted – it tests the form to ensure that it has been completed. When the mouse rolls over a button, and it changes colour, it's JavaScript. All of those things you see on the website – when you play a video, see animations, scroll and something changes – is all JavaScript doing smart things in the background. JavaScript is what makes the website interesting to you, the viewer, and what it responds to.

What is the relationship between the parts?

The great thing is they don't operate alone! They work collaboratively as a team. It's structured with HTML, styled with CSS and is made to work with JavaScript. Imagine a typical smartphone these days. The actual body of the cell phone is similar to HTML: it is the framework. The display, colors and design are similar to CSS – and they look great! All the apps and the operating system itself are similar to JavaScript—they actually do something.

If you're on a site such as YouTube or Instagram, you're using all three. HTML is the structure of the page (what you see), CSS is the gorgeous design and layout (why it looks so nice), and the ability to scroll through your stream, click on videos and upload photos (the interactive magic) is all JavaScript.

What's the point of this?

If you're thinking about website design, website development, or simply the way the internet functions, comprehending these three innovations is the initial step. No need to learn anything about the technical aspects. All you have to keep in mind: HTML is the structure, CSS is the style and JS is the interactivity.

If you want to be a web developer, you'd better understand your favorite websites or you just want to be tech-savvy and know the difference between these three languages will help you to appreciate the websites you use daily. Each time you surf the web, you're witnessing the high-changing cooperation of HTML, CSS and JavaScript.

When the next time someone asks you how websites are created, you can give a confident answer, based on the house analogy. It's quite simple, and it's that genius.

 

Found this helpful? Help share this article in the social media platform of your choice! Make your family and friends understand the difference between HTML, CSS and JavaScript. It's better to share than keep knowledge to yourself.

Yes – want more tech? Don't miss a thing, sign up for our blog now and stay up to date with the latest articles on web development, tech trends and digital content. New and easy to digest tech articles are being posted every week and we'd love to see you join our ever increasing community.

Have questions/ideas? Leave a comment below and comment on the comments. Your opinions are valuable to us and we strive to do our best to provide you with a better experience.