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.

 

 

 

 

 

This is a link

 

 

 

 

 

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.

 

 

 

 

 

Heading

 

 

 

 

 

The heading tags are a set that is used to create titles, the elements belonging to this group go from

to

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

 

 

 

 

 

 

Paragraph

 

 

 

 

 

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

and

with the text just in between.

 

 

 

 

 

 

 

I am learning HTML

 

 

 

 

 

 

Emphasis

 

 

 

 

 

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

 

 

 

 

 

Strong

 

 

 

 

 

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

 

 

 

 

 

Lists

 

 

 

 

 

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.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
1.  
2.      
   • this is the first element

    

    

    

    

3. this is the second element
4. 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

 

 

 

 

 

 

 

 

 

Thematic change

 

 

 

 

 

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.

 

 

 

 

 

 

 

Image

 

 

 

 

 

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).

 

 

 

 

 

 

 

 

 

 

Division

 

 

 

 

 

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.

 

 

 

 

 

 

 

 

 

 

 

 

Hyperlink

 

 

 

 

 

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.

 

 

 

 

 

Visit YouTube

 

 

 

 

 

 

 

 

Conclusion

 

 

 

 

 

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