All web pages where we usually surf are written in a language called HTML. It is not the only language and component that exists in a web, but it is the first and fundamental for browsers to interpret the contents. If we understand HTML as a skeleton, other languages such as CSS or JS come to complete and style that skeleton, but it is always necessary that there is a layer of HTML underneath everything, otherwise we will have nothing on which to support us.
Differences between HTML5 and HTML4 versions
HTML is not a new language. It dates from the early 90’s and during this time has undergone modification and additions, hence we can talk about HTML 3, HTML 4 and the current HTML 5. Each of these versions inherits the previous, eliminates those elements or specifications obsolete and adds new content.
So when we talk about HTML5 we are not talking about something totally different from HTML4. Nothing further from reality, it is the same language with the same syntax but with new additions and improvements. So if you are starting with the web design and its structure, you can learn HTML5 directly which is the standard to this day. It would not make much sense to start with HTML4 and then learn the differences between them, even though it is also a valid learning method.
HTML elements: opening and closing tags
To identify an HTML element, we should only look for its opening tag, content between the symbols less than and greater than, for example h1 .For the closing tag a bar is inserted just behind the initial symbol of less than /h1:
With this pair of tags (opening and closing) we already have our HTML element defined, in this case an h1, useful to indicate to the browser that the content that encloses is a title of order 1, the largest we can have.
<h1>Título del artículo</h1>With this pair of tags (opening and closing) we already have our HTML element defined, in this case an h1, useful to indicate to the browser that the content that encloses is a title of order 1, the largest we can have.
Most elements in HTML are defined by this pair of tags, although not always so. Elements like img or input work differently.
Attributes in HTML
One of the most important aspects of HTML is knowing how attributes work, which is ultimately extra information that we add to each element in the HTML to be able to adjust its design and behaviour. An easy example of an attribute is the url that we can indicate to any link that exists in our web.
<a href="https://www.silocreativo.com.com">Link</a>
All the attributes have some common characteristics:
– They are always described on the HTML opening tag
– They always comply with the structure name="value"
– There are attributes common to all elements (class or id) and also attributes specific to each element (href para <a>, o src para <img>)
As for the correct way to define the attributes, the W3C recommends (although it is not already mandatory in HTML5) the following rules:
– Using Lowercase to define the name of an attribute
– Using double quotation marks to contain the value of an attribute
The reason for this recommendation is to avoid problems with old browsers for example the versions prior to Internet Explorer 9) and to be able to include within the value of the attribute the element single quotation markswithout being afraid to close that attribute.
Styling HTML with CSS
Once we have our HTML skeleton ready, we can load it with the browser. If all the elements are properly closed the web will be displayed without problems, but the design will be very basic and the fonts and colours used will be those that apply the default browser.
To avoid this and that all web pages have the same style and web design, we need to apply some styles of our own. These styles are added using the CSS languagethat is in charge of responsive designto display on all devices, and can be added in three ways:
– Online styles, directly in the HTML element, in its opening tag
– In the header of the web, inside the label
– In a stylesheet with .css extension
The order of the above points goes from less recommendable (online styles) to more recommendable (external stylesheet .css). The reasons for this order are to look for a better rendering of HTML in the browser (the fewer bytes the faster the web will load getting a better user experience) and a certain order and structure for thework of the web designer. Hence, working with an external style sheet is the best way to avoid having to overwrite the HTML every time there is a change in the design.
We’ll go into the CSS in the next part of the basic fundamentals tutorial. Stay tuned!
