Build your foundation
Coding (Html5)Nov 14, 2017
Reading this article you will create the reliable foundation that will allow you to move comfortably toward more advanced HTML techniques.
Whether you want to learn how to drive, how to make a flavourful pizza or how to code, the necessary steps to put yourself into your passions have to be gained gradually.
Creating reliable fundamental will allow you to move comfortably toward more advanced techniques.
There are a few basic elements that need to be fully understood to move forward deepening the learning process in the web development discipline.
What is HTML?
Any of us have at least a web browser among the software installed in our computer, is it possible to choose between Google Chrome, Mozilla Firefox, use Safari provided by Apple and many others.
All of these browsers use the same main language to communicate with you, this language is called HTML.
HTML was invented by Tim Berners-Lee an English computer scientist who developed it in the 1990's while he was working at C.E.R.N. in order to simplify and share data with his colleagues at different universities.
The structure and the simplicity of use of his creation spreads its use in such a way that it rapidly became the main foundation of the web.
How HTML works?
Think of an HTML page as a car, It is composed by a variable number of simple elements which are put together to form a solid structure.
In a web environment, these little elements are called tags and, as the part of a car, each of this tag accomplish a different function.
This is a paragraph
Furthermore, is it even possible to use the same tags, but with different features to one another, carrying on with the example of cars, just think of the different attributes that must have a wheel created for a sports car and one created for an off-road vehicle.
These attributes are composed by key - value pair and play a fundamental role in HTML because depending on their values they can radically change functionality.
During the planning stage of the creation of a new web page, a developer is mainly focused on the content that this page must have and how to design the best structure possible to make the experience as much pleasant as possible for the final users.
Once the content and the structure of the page are ready the following step is to wrap the tags around them.
The HTML tags
There are plenty of tags supported by HTML5 (which is the last version initial released on October 2014) and adding this number to the amount of attributes that they can use make a complete knowledge of this markup language really demanding to achieve, luckily, by using the most common tag is it possible to create simple web pages that allow entire functionality.
The heading tags are a set that is used to create titles, the elements belonging to this group go from
and their importance is evaluated according to the number of their names.
These tags are among the most important because they explain what the page is all about and are used by the search engines to define the structure of the web page.
and its closing tag
are the most important of this group, this heading tag should be used with parsimony and only for main headings.
is less important than the previous but more than
, and so on.
HTML Basic Tags
The definition of paragraph is: “a distinct section of a piece of writing, usually dealing with a single theme and indicated by a new line, indentation, or numbering. ”, and this is what it is; a simple, short, part of text that describe a single idea.
It is formed by the tags
with the text just in between.
I am learning HTML
Since the first version of HTML to display an italic stylized text, wrap the words between the and tag was enough, nowadays the language is more focused on keep separate the content and the graphic to better manage the semantic within the page.
For this reason is now possible to use the tags that represent a word or a sentence which is pronounced differently.
This sentence could denote a state of mind
This instead represent a linguistic stress or different pronunciation
The same concept just seen in the emphasis chapter is worth when certain words need to appear in bold.
Making a more semantic page in order to be more understandable, for both, user and search engine made the use of the tag, to come along the tag, necessary.
The tag doesn’t add any importance in the word, but creates a stylistic difference from the other content, meanwhile the and its partner bestow a strong importance or urgency to the text.
I am not so important but i am looking bold
I am the most important text of the paragraph, and Google knows it
They may be useful in a textual content, used to set up a navigation bar or even order the post’s titles of a blog, Lists are undoubtedly among the most interesting and popular tags. There are two different types of list and both of them enclose a variable number of items. The ordered list represents a list of items that follow a certain order, they start from the first to the less important and they are usually shown with number or letters.
this is the first element
this is the second element
this is the third element
The unordered list from the other side doesn’t have any particular order which means that any element has the same importance, for this reason they are just shown with shapes, usually circles or squares.
this is an element
this is an element
this is an element
Until the second to last version of HTML this tag, simply represented as a horizontal line,
didn’t mean a lot, from HTML5 instead, even if it is still graphically rendered as a line, it has to be used when the content drastically changes topic, moving from a subject to another.
Today is a sunny day.
I love pizza.
Images are a fundamental part of a web page, they keep the user focused, they make the content looks nicer and, to help us today, they make really easy to understand the notion of attributes in an html tag.
This tag, indeed, rely completely on their required attributes which are the source, the path of the location of the file and the alternative text (it appears only in case the image is not loaded correctly or in case of a blind user to understand what’s going on within the page by using HTML screen readers).
This tag has no meaning at all, the only function is to create sections within a page. Imagine having boxes that can contain other tags, and give us the opportunity to style itself in the way we like the most.
This can be very useful when creating the structure for a visual layout.
This paragraph is inside a container.
Last but not least: the links.
They are the fundamental tags that have permitted, the web to become the web as we know it today, they allow the users to surf among the billions of pages available just using a click.
Syntactically, they look pretty much the same of the paragraph, but they must have at least the href attribute which point to the specific resource on the internet.
As said, employ these tags can already help to create elementary web pages and they also provide robust roots that will be a sure beneficial when there will be the need to use other characteristics of this language, other characteristics that you will find inside this website or following the link in the section just below.
If you like the content of this page, please, do not forget to share with your friends using the button at the top right of the navigation; if you have something else to say about this topic or you think i missed some important part, contact me and I will add it citing you.
Ever thought on learning some server-side language?
Check out my reviews of 24 of the most popular PHP framework currently available