HTML + CSS
The most used and unrecognized Programming languages.
Is HTML + CSS a programming language? Yes definitely. Here’s why.
You’re still there? You didn’t quit? Great!
Many times I’ve heard that I’m not a programmer as I’m coding HTML+CSS. I was so frustrated that I’m not considered as a developer by other developers. We discussed it for hours. There are also lots of talks on the internet about that. And the haters are still denying it. Let’s talk about it one more time.
Before we can go deeper into our argumentation, let’s start by understanding the basics of HTML + CSS.
According to Wikipedia:
Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser.
That meant that you use Html to structure the documents you want to display on a webpage. Here is an example of a basic Html page.
Besides HTML, you use CSS to make it look good. That’s why they go together.
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
Here is an example of a CSS file:
First thing first, I’ve heard and read many times that HTML+ CSS doesn’t have programming structures. What are the programming structures then? After intense searches, modern programming languages have almost the same programming structures. Control Structures and Data Structures. Don’t panic, I’ll explain it as clear as possible. :-)
Control Structures
A control structure is a block of programming that analyses variables and chooses a direction in which to go based on given parameters.
The control structure helps to express algorithms thanks to sequences, conditions, and loops. Let me explain this with more likable details and short-simple examples. For our examples, I’ll use Ruby language. Don’t worry, Ruby is like human language( English) and easy to understand.
Sequence control: the instructions execute line-by-line. In the following example, we will execute a series of instructions.
Condition control: The code execute here if the condition is true. Depending on the result of that condition, the program will decide which block of code to execute.
Loop: Here the block of code specified in the loop will execute as many times as possible until the condition is true. In our example here, the condition is until “counter” is equal to 5. Thus the message will print 5 times.
So, does HTML +CSS has such Control Structures? What do you think?
Data Structures
What is Data Structure? This is what it’s said about it on Wikipedia
In computer science, a data structure is a data organization, management, and storage format that enables efficient access and modification. More precisely, a data structure is a collection of data values, the relationships among them, and the functions or operations that can be applied to the data.
In sum, the Data Structure organize the data, defines their types, and how to manipulate them. For most of the programming languages, we have different types of data. Strings, integers, booleans, arrays, object…
Does Html +Css have such Data Structure? We’ll come back on it.
Besides, the talks about HTML + CSS also said that it is not Turing complete.
So, What is Turing completeness?
Yes exactly. That was my first reaction too. But after a few hours of readings, I can finally get it, almost. To make it short, a Turing Complete language can emulate the Turing machine. The language can also program Rule 110 automaton. It means that you can implement any algorithm.
A Turing machine is a system of rules, states and transitions rather than a real machine.
To know more about Turing Machines, you should read “What exactly is Turing Completeness?” from Evin Sellin. The article is good and explains things deeply.
So, in our case then, HTML +CSS is not Turing-complete. This because it can’t change the state of the system. Nor decision making or state changes according to a given input…
Considering all that, how can I still say for sure that Html +Css is still programming language?
CSS Control Structures
Yes, you didn’t misread. CSS has it’s own ways for Control Structure. Here are some examples.
Sequence control
Like for the other programming languages, we can execute instructions line-by-line in CSS.
body{
// Set the background to white color
background:#fff;
// Set the font size to 20px
font-size: 20px;
// Set the background to yellow
background:yellow;
// Set the font size to 14px
font-size:14px
}For the code above, the first instructions have been overwritten. So here is the result.
Conditional Control
@Media Queries
@media screen and (max-width: 567px) {
// Style 1
}
@media screen and (max-width: 900px) {
// style 2
}With this code, style 1 apply if the device size max-width is 567px and style 2 for a max-width of 900px. So this is a Condition control.
@Supports
@supports (display: flex) {
navbar{
display:flex; }
}
With the code above the navbar, display property will be set to “flex” if the user device supports it. You can even check the false statement with the keyword “not”
@supports not (display: flex) {
div { float: left; } /* alternative styles */
}Loop Control
Are you serious? Yes. CSS has a loop like instruction. It doesn’t look like the other programming languages loops. No “while” of “for” loop here. Let’s have a look at this code
li a{
font-weight:700;
display: block;
padding: 15px;
margin-bottom:10px;
background:#333;
color:white;
text-align: center;
text-decoration: none;
}li a.active{
background:red;
color:white;
}
The first block is telling the browser to loop through all the “a” elements inside a “li” element. Then apply the given style instructions. The second block of code is telling the browser to loop again. If an “a” element has the class “active”, apply the given style. So I’ve used both loop and condition controls combined.
Are you agree now that Html + CSS has a Programming Language Structures? Is it a YES? Great! We’re on the same page now. You can close the page then. :-)
Oh, you’re still there? Do you still have doubts? Let me clear them up.
What Will you say then if you heard that CSS is Turing complete? Oh now you’re speechless, ain’t you? Indeed, some awesome guy named Eli Fox-Epstein proved that. He ran an experiment and proved that HTML+CSS is Turing complete, and this since 2011. You can read more about that experiment here. Here is the repo of that experiment.
So with this last point, you can now definitely accept and agree with me that HTML+CSS is a programming language.
Html+Css, The deadly duo for an alive web page.
Globally, all websites, whatever the server-side language is is using HTML+CSS.
Now of writing, there are more than 1.7 billion websites for 4,4 billions internet users. And it keeps growing. This stats are available on internetlivestats.com.
Among those Websites, we have static websites and dynamics website. Static ones are built only with HTML+ CSS. Dynamics ones are built with additional languages.
Additional languages? What’s that mean?
To make HTML+CSS shines, you need an additional programming language. The common used languages are Php, Python, Ruby, Javascript and so. Facebook, Twitter, Google.com or Medium.com, are dynamics websites. They thrives thanks to that combination.
We’re both on the same page now. But If you think that I’m wrong at some point, please feel free to comment. Also, don’t hesitate to share. Thank you for reading.
PS: This is my first article ever. So please leave a comment. I need your feedback to improve myself. :-)
