What Html and CSS are?

Home | Blog | What Html and CSS are?

What do all the online sites we visit every day have in common? Simple, the markup language used to make them so!
What is a markup language? It is a language in the public domain that through the so-called “tags” defines and creates the structure of web pages; it will then be the task of the browsers, which we use every day, to translate all the tags into portions of text, images and content of various kinds.
HTML (“HyperText Markup Language”) is used to create websites and is exactly such a language, not to be confused with common programming languages like Matlab or C++.
What is a “tag”? No, in this context we don’t talk about the famous tags we use every day on Facebook to share images and content with friends.
<head>, <body>, <header>, <section>, <article>, <footer>, <div> and <p> are the main “tags” that characterise the HTML language. Each one is enclosed between the “<” and “>” symbols and contains a portion of content.

Struttura pagina web

Figure 1 – Web page structure

Let’s see some of the main ones in detail.

  • <header> : is the first container of elements visible on the web page, not to be confused with <head> equally important but which contains elements that allow the correct functioning of the code such as the link to the .css style sheet. The <header> is a useful element to enclose any content with introductory intent, such as the brand logo and the navigation menu.


  • <body> : is the central element that defines and identifies the body of the entire page. It is unique and can contain all the other tags mentioned above and many others like <img> to insert images or <h1>, <h2>, <h3>, <h4>, <h5>, <h6> to insert titles with different importance and size.


  • <section> : represents a generic section of a document or application, intended as a thematic grouping of contents. Generally there is a title that introduces the topic.


  • <article> : is a standalone section that can identify a forum post, a magazine or newspaper article, a blog article, a comment, an interactive widget, or anything with independent content.


  • <footer> : is the element that must contain information at the bottom of the page such as the website owner’s logo and contacts, links to related documents, copyright data, and so on. It does not necessarily have to be inserted only at the end of the document.


  • <div> : was born as an abbreviation of “divide” intended as separator, today can be defined the most neutral tag of the markup because it allows you to create sections within the web page in order to separate content from each other. The purpose of <div> is to act as simple containers, then it will be the designer’s task to change their appearance and size to make them suitable for every need.


  • <p> : is the container that provides within it the insertion of text and other tags such as <a>, or the insertion of a link to another page or more commonly “link”.

What are CSS?

“Cascading style sheets”, or more simply cascading style sheets, closely related but conceptually different from the HTML language. This is because they deal with the aesthetic part of the tags defined earlier, in essence HTML without CSS would only represent a bad copy of our web page. With time it has become necessary to introduce CSS to separate the contents of HTML pages from their formatting and allow a clearer and easier programming.
Alternatively, you could think about inserting the <style> tag in the .html file and define an internal style statement related only to the page containing the statement itself. Today this procedure has lost importance and has been almost completely replaced by style sheets, which make it possible to obtain a clean, streamlined and easier to consult code.
An example of CSS code could be:

p {
‘Lato’, Verdana, sans-serif;
div {
background-color: red;

On the left you define the font, size and color of the paragraphs <p> within my html page, the browser will interpret this portion of code and the user will see on screen the paragraph with “Side” font, large 14px green. On the right is simply defined the background color of the <div>.

Figure 2 – CSS rules

As you can see, both examples are composed of the same elements: a selector (p and div in our case) followed by curly brackets containing the properties and respective values.
The selector, as the name suggests, is used “to select” the element(s) of the page to which the declarations contained in the curly brackets are to be applied (the so-called “declaratory block”).
Very useful and important for those who use this type of language are also the global attributes “id” and “class”, the latter are applicable to all elements and without them CSS would not be such a powerful tool. Id and classes are really one of the keys to make the most of this language.
How do I connect the .html and .css files?
Simple! Just insert inside the <head> tag of the html sheet a link to an external sheet, which will be nothing but the css style sheet. The string to use is the following:

<link rel=”stylesheet” type=”text/css” href=”nome_foglio_di_stile.css“/>

Simply by copying and pasting this string, modifying “style_sheet_name.css” with the appropriate name, it will be possible to display the web page just created on the browser.

Stai cercando un'agenzia per approfondire gli argomenti di questo articolo?
Clicca qui per andare alla nostra pagina contatti.

Roberto Paolucci

SEO Specialist

Anno 1990. Mi sono laureato in Economia Aziendale presso l’Università degli Studi della Tuscia. Prima SEO e sviluppatore freelancer, poi presso la concessionaria d’auto “Centro Auto VT”, le mie esperienze lavorative hanno spaziato in differenti settori. Il mio interesse nel Digital Marketing inizia grazie ad alcuni corsi professionali come PHP e Database relazioni MySQL, programmazione Wordpress e partecipando a numerosi convegni e workshop di settore. In ByTek sono SEO Specialist e utilizzo ogni giorno strumenti di Web Analytics. Running e mountainbike nel tempo libero.

Articoli Correlati

What Html and CSS are?

3 April 2020

What Html and CSS are?

Roberto Paolucci

Microcopy and UX Writing

18 March 2020

Microcopy and UX Writing

Giorgia Schiappadori


Tell Us About Your Project

Share your business goals with us and find out how we can help you

We are part of


Tech company focusing on collecting, analyzing and converting customer data into actionable insights, anomaly detection and predictions in order to improve business decisions and results.


Fintech company that collects, interprets and weighs Alternative Data of various sources and mixes them with traditional datasets for advanced monitoring and investment purposes.


Tech company specialised in the digital transformation, distribution and monetization of content via mobile and smart speakers, for publishers and brands.