The anatomy of a web page

The four main ingredients of a web page

When you look at a web page, you might wonder how it is made. There are four main ingredients of a Website. Structure, Design, Functionality and Content. These are the four main ingredients however there is quite a lot more that goes into optimising, design, security, speed and standards. This post however will discuss these four main ingredients to give you a better understanding of the anatomy of a website. We will start of by discussing the structure of any website.

  1. Structure
  2. Design
  3. Functionality
  4. Content

1. Structure

What is HTML

The structure of the human body is made up of bones that define our basic shape.  The same is true of web documents in the sense that they are shaped from various interlinking elements that form the backbone of the Web.

Most web documents are formed through languages which describe the skeletal structure of the document, such as HTML.

HyperText Markup Language – HTML

HTML is most commonly used as the format of the online documents we call web pages.  HTML code ensures the proper formatting of text and images so that your Internet browser may display them as they are intended to look. Without HTML, a browser would not know how to display you document in the browser like Chrome, Firefox, internet explorer.

2. Design

What is CSS

The Design or the presentation of web pages, including colours, layouts, and fonts. This is where cascading style sheets (CSS) comes into play. CSS is the style of your website and should be completely seperated from the structure.

Cascading Style Sheets – CSS

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. CSS is a language that works with HTML to apply this style and formatting to your web page. We use CSS to find one or more HTML elements, and then provide additional instructions for what to do with that element (such as change its color or center it on the page).

3. Functionality

The functionality of a website is the interactive part of the site which allows the visitor to respond or interact in some way. The functionality can be an Image Slider, Image Gallery, Drop down navigation and much more. This is where JavaScript comes into play.


JavaScript is a programming language used to make web pages interactive. JavaScript is often used to create polls, quizzes or any interactive content. It is an object-oriented programming language and runs on most websites online, even this one that you are on now. It can be used to control web pages on the client side of the browser, server-side programs, and even mobile applications.

4. Content

High quality content is crucial to the success of any website in order to retain visitors and have a high ranking on search engines. Of course the design of the website is essential in making a good first impression on your visitors, but the content of the website is what will keep them coming back.

Many clients want to meet this goal by taking away content and making the site more visual. While this may certainly make for an attractive website, it could also hurt your search engine rankings. Having a beautiful website doesn’t always ensure it will be seen. In order for your website to show up in the search results, search engines have to know what your website is about.

One of the main ways to educate search engines about your website is through quality content ie: Text and Images. Although the structure, design and functionality is important, content is essential for a high ranking website.


As mentioned, these are the main four ingredients of a basic website, however there are more underlying technologies like PHP and MySQL for dynamic database driven websites.

At Web Design Academy we offer courses for all the above mentioned technologies. Our Introduction to Web Design Course in Gauteng and Durban will cover the essentials about designing websites with HTML and CSS. We also have a more advanced HTML5 and CSS3 course. Our Search Engine Optimisation course will cover the importance of content.

You can view all our Gauteng web design courses and Kwa-Zulu Natal web and graphic design courses below.


Web Design Academy
Web Design Academy
Practical Web and Graphic Design Courses. Adobe Training. We offer a range of subjects to cover all aspects of Website Design, Web & Mobile Development and Graphic Design. We also have subjects in Search Optimisation and Social Media Marketing.
Recommended Posts

Leave a Comment

Start typing and press Enter to search

Telkom Notice

Please note: Our landline is down.

Please contact us on 078 210 5683 – or Contact us here

Together we can still have a safe learning environment.
We are looking forward to teaching you the skill that is now a very sought after one.

Pin It on Pinterest