# Understanding the Basics
But what do we request? For displaying a website, the browser must retrieve HTML code (which is part of an .html file). Without HTML, no website would work as this file defines the content and the structure of our website, which means that getting HTML is a must.
So the browser requests an .html file and if our request was successful, we get back an .html file as a response. This file is called index.html in most cases, more about that later this series. With this response, we are able to display a website, the first steps are as simple as that.
# Frontend vs Backend
But what about the backend? The backend is that part of the code that runs on the server only. With this code, we can for example run a database (on the server), which allows Amazon to store your data (e-mail, password, credit card information, etc.). This information can not be accessed in the browser, as it is saved on the server only. If you enter your valid credentials, the server checks whether the information you entered matches the one saved on the server. In case this is true, you are identified as the owner of the account and you can log in.
We won’t dive into the backend in this series though, as we want to focus onto HTML and therefore onto the frontend. But it’s important for you to keep in mind, that there is code running in the browser and code running on the server only.
# Enough of the Theory - Let’s See Some Code
We learned that every website is based on HTML - so can we actually see what HTML looks like on existing websites? Yes we can and as HTML runs in the browser we can use tools which are integrated into all modern browsers - the developer tools. Specifically, I will use Google’s Chrome browser throughout this series as it comes with, in my opinion, very powerful developer tools.
At the beginning of the code we see
<body> and a lot more. These are tags and elements and this is the way HTML code is written. We’ll of course dive deeper into that, but apparently the browser is able to interpret the code with these elements. But why don’t we take the chance and create our own .html file and add such elements to better understand how the browser interprets these?
# Writing Our First HTML Code
No matter if you are working on a Mac or a Windows machine, writing our first HTML code only requires one thing: A text editor. On the Mac we can use TextEdit, on Windows, NotePad would be a good choice to get started.
Writing code is easy now, let’s just add some text in the editor of our choice: “Hello I am a webpage”.
At this point, these “Elements” we talked about before come into play. And with an element, we also introduce tags. Now you might be lost, right? Don’t panic, it’s simple:
<p>tells the browser, that the content should be displayed in a new line. The combination of these tags and the content finally creates an element.
# The Importance of Using Tags
So why are tags important? The simple answer is: Because they add the content but also the structure to our website. With that they make our code easier to understand (for other coders or our colleagues) and more efficient to interpret for our browser, i.e. our website loads faster, which is definitely something we’d like to achieve as a developer.
Therefore, any content on our website should be surrounded by tags, which is currently not the case in our example as the first sentence is just plain text. Although the .html file can still be interpreted and the text is displayed correctly, which shows us that HTML forgives a lot of mistakes or “incorrect” semantics, this code does not follow a best practice approach. So adding
<p> also to the first sentence, will not change the way it is displayed, but create a better structured code.
As written before, there are a lot of different tags/elements available in HTML and we’ll have a look at some of these throughout this series (e.g. the
<h1> tag as presented in the video).
But with the information covered in this part of this series, we are now ready to further work on our HTML skills and to do so we need the right tools. The “normal” text editors are ok, but not a coder’s dream, so there must be better ways to write code. Turns our there are, so let’s have look at the options we have in the next part of this series.