How HTML, CSS, and JavaScript work together in web design

Do you need to learn HTML, CSS, and JavaScript in web design when you can easily create websites with AI-powered tools? That's a question that stopped me in the tracks because there's no easy answer.

Still, for someone whose first taste of web design was with Macromedia Dreamweaver, I'll say it helps to know how websites are put together.

Even if you're creating landing pages with advanced tools like HubSpot's AI website generator, you never know when you'll need to manually change the font, layout, or animate a particular web element. And knowing the web fundamentals - specifically HTML, CSS, and JavaScript - definitely helps.

In this guide, I'll walk you through each of them, explaining how each web technology works and why it's important for developing modern websites.

Table of Contents

• HTML, CSS, and JavaScript at a Glance
• What is HTML?
• What is CSS?
• What is JavaScript?
• How to Use HTML, CSS, and JavaScript Together for Web Design

HTML, CSS, and JavaScript at a Glance

Almost every modern website uses HTML, CSS, and JavaScript. The fact that you're able to read this blog, presented in an aesthetically pleasing layout, and see a slide-in pop-up after scrolling to a certain depth is due to all three web technologies.

The best way to understand each of them is to use the house analogy.

• HTML provides structure to a website, just like how beams and pillars support a house.
• CSS beautifies an otherwise plain web page, much like paints and wallpapers enhance the beauty of a house.
• JavaScript allows users to interact with a website by adding behind-the-scenes functionality. It's like adding plumbing, electricity, and internet to a house.

If you're not familiar with coding, they might look similar and confusing. But when you're trained to look into the details, or specifically the syntax and semantics of each, you'll be able to differentiate them.

What is HTML?

HTML stands for HyperText Markup Language. It structures a web page into logical parts so the web browser knows where the header, body, paragraphs, tables, images, and other elements are. For example, these are common elements that you can specifically state in an HTML document.

• contains metadata of the web page.
• consists of visible content that users can see.
• the heading with the largest font size.

• starts a paragraph.

• bolds the text.

How does HTML work?

When you visit a webpage, the browser loads the associated HTML document from the web server. An HTML document organizes web content with a series of HTML tags. Then, the browser creates a Document Object Model (DOM), which it uses to understand how various web elements relate to each other. You can think of DOM as a building blueprint that explains a house's structure.

Although HTML is not a programming language, I appreciate how it categorizes web elements with standard conventions. For example, if you want to underline a sentence, you mark it with and .

This is underlined text using the HTML u tag.

Just like how an architect uses a blueprint to construct a house, a web browser uses the HTML file to render the web content's structure. Whether a text is a heading, paragraph, or belongs to a numbered list, it's all clearly stated in the HTML file.

Here's what the HTML structure looks like for a simple dialog box.

Hello World

Basic HTML content

Click me

You can copy the markup above, paste it into a text editor, and save it as an .html file. Then, open it in a browser and you'll see a simple, plain web page like this. While you won't see the HTML markup on the browser, they're helpful for the browser to map information in ways the web designer intended.

Another important feature of HTML is that you can add attributes to the HTML elements. For example, if you want to turn a text into a hyperlink, you can add an attribute that describes the destination page.

Content

Here, href contains the destination file that you will be directed to when you click Content, which is the anchor text.

Understanding HTML5 in Modern Web Development

The first version of HTML was invented in 1991. Since then, HTML has gone through several major revisions. Today, many modern websites use HTML5, which is more flexible and supports features that modern web development needs.

For example, HTML5 provides semantic tags that better describe specific web elements. Let's take the , which you'll find in HTML. Basically, it tells the browser to render a particular text bold. While is still available in HTML5, you can achieve the results with . When you use , you're also telling the browser the text is significantly important, which is helpful for assistive technologies.

HTML5 also provides better support for audio and video embedding. Remember the days when you had to download Flash to render videos on websites? With HTML5, you can embed videos with tags like

and.

For more on the many features that HTML5 offers, read this article.

What is CSS?

Cascading Style Sheets (CSS) is a rule-based language that lets you create an aesthetically pleasing webpage. You can change how every web element looks by applying CSS to override the browser's default style. For example, if you want a different font, background colors, or margin size, you can write CSS code for the HTML document you created.

How does CSS work?

CSS follows a standardized syntax, which, in my opinion, even for non-coders, is easy to follow. Basically, you write CSS code by specifying the selector and declaration.

• Selector is the web element you want to modify. For example, a heading can be a selector.
• A declaration is the new properties that you want to assign to the web element. You use a { } pair to list the declaration, which consists of a property-value pair.

Let's take the CSS code below as an example.

I've added several changes that override the original element's style, including the background color, text color, and the padding. And here's what the dialog box looks like with the CSS code.

Prettier, isn't it?

But that's not all. You can style web elements at different levels by placing the CSS code in different parts of your website.

• Inline: Write the CSS code within the HTML element using the