HTML stands for Hypertext Markup Language. HTML is a code for structuring a web page and its content . Indeed, it is not a programming language but a markup language to structure your content.
Therefore, the HTML code consists of a series of elements to surround and / or encapsulate different parts of your content to give it an appearance.
For example, the <p> tag will allow you to create a paragraph. As a result, you will need to place your text between the <p> tag (opening tag) and the </ p> tag (closing tag) as in the following example:
As you will see later in this article, HTML is an easy language to learn. So what is HTML and how does it work?
History of HTML
HTML was created by Mr. Tim Berbers-Lee at the end of 1991. However, it was not until 1995 that this language was published as HTML 2.0.
- HTML 1.0 was released in 1993 for the purpose of sharing readable and accessible information through web browsers.
- HTML 2.0 was published in 1995 . This version contained all the features of version 1.0 with some additions. This version remained the norm until 1997.
- HTML 3.0 : This release included new features to give Webmasters more powerful features in web page design. However, these new features have slowed down web browsers.
- HTML 4.01 : This is the first version that had a real success before the HTML version 5.0 that we know today. HTML 4.01 was released in 2012.
According to the HTML repository currently used, there are currently 140 HTML tags , although some of them are hardly used anymore. Due to its popularity, HTML is considered an official Web standard . As a result, HTML specifications are managed and developed by W3C (World Wide Web Consortium).
The biggest update of HTML was the release of version 5 in 2014. Indeed, several tags such as <article> , <header> and <footer> have been added to this version.
What is HTML and how does it work?
HTML documents are files with the extension .htm or .html . These files can be read by any web browser. Indeed, the browser will read the file and display the contents.
Most websites using HTML have several pages such as the home page, internal pages and a contact page.
Each HTML page is constructed using a set of tags (also called elements). These are blocks to prioritize and structure your page according to your needs. In addition to some tags, most have an opening tag and a closing tag.
You can see below a sample code showing how to structure your page:
- div : Define a section. This tag allows the creation of a block.
- h1 : Set a title.
- h2 : Set a subtitle
- p : Define a paragraph
- img : Define an image. This tag has two attributes (src defining the path to the image, alt to add a description) .
- a (<a> and </a>) : This tag uses the ” href ” attribute to add a clickable link to your document.
What are the most used HTML tags?
There are two main types of tags. Block tags and online tags:
- Block tags occupy the entire available space and always start with a new line. You can see this by using the title tags or the one allowing the setting up of a paragraph.
- Online tags do not create new lines and use all the space required on the page.
Block tag
Each HTML document must contain the following three tags: <html>, <head>, and <body> .
- The <html> and </ html> tag : This is the top-level element and surrounds the entire HTML page.
- <head> and </ head>: contains information such as the title of your page, the font used.
- <body> and </ body> : encompasses the content of your web page.
- Concerning the ” h ” type tags , there are currently 6 levels ( from the <h1> </ h1> tag to the <h6> </ h6> tag ). H1 being the highest level tag and H6 the lowest . The paragraphs are surrounded by the <p> and </ p> tag, while the quotes use the <blockquote> </ blockquote> tag .
- The <div> </ div> tag defines sections of content. In principle, they contain several paragraphs and images.
- The <ol> </ ol> tags are used to create ordered lists while the <ul> </ ul> tags are unordered lists. The individual elements must be surrounded by the <li> </ li> tag, as you can see in the following example:
Tags online
Some tags are used to format text such as the <strong> </ strong> tag . This tag allows you to display an element in bold while the <em> </ em> tag allows you to display it in italics .
Hyperlinks are also used to indicate the destination of a link by adding attributes such as href :
The tag for images works on the same principle. Indeed, you can add the <img> tag without a closing tag. You can also add the attribute ” src ” to define the path to the image and assign it ” alt ” for the description:
What is the difference between HTML and HTML5?
Since HTML has been proven for more than 10 years, why has it been updated in 2014? The most significant difference between older HTML versions and the HTML5 version is the integration of video and audio without the language specifications. In addition, HTML5 includes the following updates :
- New items such as videos, time, nav, section, progress, meter, aside and canvas
- New attributes such as charset, async and ping
- New APIs with Offline Caching, Drag-and-Drop Support and More
- Support for vector graphics
- Javascript can now run in the background
What are the benefits of HTML?
Like most languages, HTML has many assets such as:
- This is a very used language with a huge community of users that can help you
- Works natively on each browser
- The language is Open-source and totally free
- It integrates easily with languages such as PHP and Node.JS
What are the disadvantages of HTML?
- This language is mostly used for static web pages. Indeed, if you want to use dynamic features, you will most certainly use PHP or Javascript.
- All web pages must be created separately because it is not possible to implement logic.
Is there a link between HTML, CSS and Javascript?
It is true that HTML is a very powerful language. In addition, it allows you to create a very professional website. However, it only allows the addition of elements and text while structuring the content.
If you want to create a dynamic site, this language goes very well with other languages such as CSS (Style Sheet) and Javascript.
- CSS : This language allows you to define the structure of your website such as the layout of each block, the colors, the font and the background.
- Javascript : Allows you to add dynamic features to your site like sliders, photo galleries or other things.
Conclusion
You are now able to understand how HTML works and create your first web page on your web hosting . You can use this language to create and structure your website and its content.
And you, what language do you use to create your site?