HTML, CSS and the Languages of the Web

Posted on by learndocs

You don’t really need to know any of the languages of the web to create an amazing website.

However, it’s helpful to know what’s going on in the background as you create a space online. This will empower you as you understand why things may or may not appear as you’d expect or perhaps inspire you to learn more so you can create unique experiences online.

Your Browser is an Interpreter

When you visit a website or use a web application, your browser (a programme such as Chrome, Firefox, Safari, Edge, etc.), is looking at information stored on a server, compiling it and then presenting it to you as a completed web page. 

Websites typically use information created in three or more languages to present the content you see on your screen.

The three main languages of the web are:

  • HTML
  • CSS
  • JavaScript

Here’s a quick overview of how your browser works with each of these languages:

HTML is used to create the main content of the page (headings, paragraphs, images, etc.)

CSS dictates how that content should appear to the user (layout, colour, typography, etc.)

JavaScript allows users to interact with the content of the site (clickable buttons, scrolling animations) 

Client-Side and Server-Side Languages

HTML, CSS and JavaScript are client-side languages, so web browsers “speak” them and translate them for visitors.

There are also server-side languages (such as PHP, Python, Java, Ruby, etc) which work with data stored on the server (where the website is hosted) and hand this information to the browser. Server-side languages are needed whenever a website uses a database to store information (such as customer details, blog posts, financial information, etc.). Websites attached to a database are known as dynamic and those without them are static.

WordPress, for example, is a dynamic Content Management System and uses a database to store key information such as users, blog posts, themes, plugins and more, so it needs a server-side language (in this case, PHP). Moodle, the Virtual Learning Environment used at Coventry University, also uses a database and PHP.

Again, it’s possible to create a great website without knowing a single line of code in any of these languages. It’s just helpful to be aware of what they are and how they relate to each other.

HTML – Hypertext Markup Language

Image by W3C [CC BY 3.0]

HTML is the backbone for anything on the web; it’s the core information of your site.

Even when your website information is stored in a database in a language other than HTML, a server-side language like PHP collects this information and hands it to your browser as HTML.

Here’s an example of the HTML for a page with only a heading and a paragraph. 

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>

  </body>
</html>

If you ever want to go beyond a basic Content Management System, add unique features to your site or have a valuable skill to take with you into different industries, learning HTML is the first place to start.

There’s no shortage of free and paid online resources, but one great place to get started for free is W3 Schools which contains information, tutorials and practice examples for every major language of the web.

CSS – Cascading Style Sheets

In the early days of the web, developers would have to create an element in an HTML document and add a line of code next to it in order change its style. CSS was developed to separate the content from the style in order to keep both of them more organised and work more efficiently. 

Image by Rudloff [CC BY 3.0]

With CSS, you can target one or more elements on a web page (or entire site) and change their appearance with a short line of code. Rather than, for example, changing the colour of every heading on a website one by one, CSS lets you target every main heading at once and create a rule for what colour they should be.

Here’s what that would look like in a CSS document: 

h1 {
  color: blue;
}

That’s it. This rule targeted every heading of that type, and they all become blue at once.

CSS can also be used to change the font colour, background colour, background images, shadows, font-weight, layout and so much more. Modern CSS can even be used to create animations and advanced effects that previously required a good knowledge of JavaScript to implement.

CSS is probably the most fun language of the web to learn as even a little bit of knowledge will let you make dramatic changes to your site. However, you’ll need a basic understanding of HTML first in order to know how to use CSS properly.

Even if you plan on using a Content Management System to build your website, it’s well worth learning what you can do with CSS. W3 schools has some great training material for CSS too.

JavaScript

Image by Chris Williams

Not to be confused Java (a popular general purpose programming language), JavaScript is used to change the behaviour of a webpage when the user interacts with it.

JavaScript is behind interactive elements on a site such as alerts and pop ups, buttons, animations, media players, games, chatbots and more.

HTML and CSS are markup languages whereas Javascript is a programming language. This means you can use it to store variables, carry out mathematical functions and perform many advanced functions.  

If you’re planning on investing a lot of time in web development, you’ll find JavaScript will help you add new levels to the function, features and complexity to your site. Because it manipulates the HTML and CSS of a site, it’s important to have a firm grasp of both of these before you learn JavaScript.

JavaScript was created as a programming language which browsers could understand, and it remains the only language which can be used to perform both client-side and server-side tasks.

If you’re managing your site with a CMS, it’s unlikely you’ll ever need to make any changes to your site’s JavaScript, but if you want to learn more about the language, you can also find tutorials and practice examples at W3 schools.

Other Languages

Image by Daniel Iversen

Other languages in web development focus on server-side tasks largely to do with the creation, storage and recall of information in databases. Most Coventry Domains users won’t need to know them, but if you’re interested in web development, app development or data science, learning to code in one of these languages is a valuable skill to have with great employment prospects. 

Here’s a quick look at some of the more popular languages associated with the web:

  • PHP – The most popular server-side or scripting language. Major CMS platforms like WordPress, Joomla and Drupal are built using PHP
  • Python – This is a quickly growing language which is popular in data science and financial tech industries
  • Java – This is a popular and robust programming language used by most FTSE100 corporations
  • Ruby – Another quickly growing language which was designed to be fun to use. The Ruby on Rails framework has made this language a popular choice for start-ups.

HTML, CSS and JavaScript are the core languages of the web, and the vast majority of the websites today depend on browsers to interpret all three of them. While you don’t need to know how to code in any of them in order to create a great website, it’s good to know what these languages are, why they exist, and how learning them can help you develop a unique presence online.