HTML, CSS and JavaScript: The Anatomy of a Website

Nearly every website in the world is built using 3 core programming languages: HTML, CSS and JavaScript. In this article, we will "dissect" the anatomy of websites to give you an understanding of what these fundamental languages are and how they work together to form something that is both visually impressive and functional.

Written by Nology Team - 02.06.20

An introduction to HTML, CSS and JavaScript. What are they and what do we use them for?

HTML: The skeleton

Hypertext Markup Language (HTML) is the language of the web, without HTML you wouldn’t have a website. HTML defines the content and structure of your website. Using a body for an analogy, HTML would be your skeleton, holding everything together and providing a base to hang everything off. A HTML file is made up of numerous HTML elements. 

Here’s an example of a single HTML element: <h1> your content </h1>

<h1> is called an opening tag, this is the start of the HTML element and tells the browser that this is the start of a piece of content for the site.

</h1> is called a closing tag, this tells the browser that the piece of content is finished.

h1 is the type of content you want, h1 stands for heading 1 (the main title of your page).

your content is where you put the actual content for your heading, this is whatever you want the content to be.

The order in which you put HTML elements into your file affects how they are displayed on the page as well as the underlying structure of the page. Below shows two examples, both using the same HTML elements but in different orders.

Where the subtitle is before the main title doesn’t make sense structurally, as h1 should be the parent of h2 to align with the heading hierarchy. 

You can add attributes to your HTML, attributes are used to provide additional information to your HTML element. An example is when you want to add a unique identifier to your element so you can style just that one element.

 <p id=”summary-paragraph”> This is my summary paragraph </p>

The id attribute is added to the opening tag. After adding the id keyword, you add an equals followed by quotes. Inside the quotes you put a unique identifying word(s). 

Once you have created your HTML file with all your content you have a working website, it may not look nice or do much, but it is a basic working page.  This gives you your skeleton ready to hang your styles and behaviour off.

CSS: The skin

If HTML is the skeleton to our body, then Cascading Style Sheets (CSS) is the skin. CSS is used to change the look and feel of websites. It is where you define your colour schemes, fonts, spacing, layouts and more. 

CSS is written in a separate file to the HTML. This is to allow separation of concerns and make our lives easier when it comes to testing and maintenance. This also makes our styles more reusable, if we put styles directly into the HTML then we wouldn’t be able to use the styles across different HTML pages. 

90% of CSS is fairly straightforward, select the HTML element you want to style, specify what attribute you want to change and the value you want to change it to.  Rinse and repeat this pattern and you can get very far. CSS becomes more complicated when you want to complex layouts, animations or CSS functions.

In the above example we are using three different CSS selectors. The first selects based on HTML element type. The second selects any elements with a class of ‘rounded-border’. The third selects the element with the id ‘second-subtitle’.

With HTML and CSS you can create well structured attractive websites. If you want it to do more than basic functionality and look good you would need JavaScript.

JavaScript: The muscles

JavaScript was created in 1995 by Brendan Eich to add behaviour to websites. Up to this point the web was a relatively static place, good for looking up information but not very interactive. In our body analogy, JavaScript takes the place of muscles, providing motion and behaviour to our limbs. 

There are alot of programming languages out there, but if you want to do web development, then JavaScript is the dominant force. Even other languages that add interactivity to websites eventually end up as JavaScript (CoffeeScript for example).

Like CSS, JavaScript tends to live in its own file to allow reusability and help improve maintainability. While getting started with HTML and CSS is immediately rewarding, JS requires a critical mass of knowledge before it can be used for more than copy and paste jobs. This is because JS has a lot more depth and complexity to it. This depth and complexity mean there is an initially steep learning curve (for those new to software development), but once past that initial curve, you get into exciting and vast opportunities.

A starting point when learning JavaScript (or any programming language) is to get a solid understanding of core programming concepts, such as variables, functions, conditional statements and loops. These take time and practice to get, so don’t move over them too fast, they are very important and the building blocks for all functionality.

Posts

Related Stories

Launch a future-proof career. Discover how you could learn to code, and transform your career by joining the _nology 12 Week Software Developer Course.

Start with the basics: HTML and CSS If you’re completely new to coding and don’t have a background in computing (don’t panic as you’re in good...

Read More

June 3, 2020

UX Developer Definition A UX (user experience) developer is programmer who uses customer insights to create an effective user experience on a website,...

Read More

January 17, 2020