HTML stands for Hypertext Markup Language. It helps users create and structure elements of web pages or applications, divide paragraphs, headings, links, blockquotes, and so on.
HTML is not a programming language, meaning it cannot create "dynamic" functions. It is just like Microsoft Word, used to layout and format web pages.
When working with HTML, we will use a simple code structure (tags and attributes) to mark up a webpage. For example, we can create a paragraph by putting text inside a pair of tags that open and close the text <p> and </p>
<p> This is how you add paragraphs in HTML. </p> <p> You can add more paragraphs! </p>
In general, HTML is a markup language, it is easy to understand, easy to learn, and every new person can start learning it to build a website. Here is what you will learn in this article:
History of HTML
HTML was created by Tim Berners-Lee, a physicist at the CERN research center in Switzerland. He came up with the idea for the hypertext system on the Internet.
Hypertext means the text contains links, where the viewer can access it immediately. He published the first version of HTML in 1991 including 18 HTML tags. Since then, each new version of HTML has new tags and attributes.
According to the Mozilla Developer Network: HTML Element Reference, there are currently more than 140 HTML tags, although some of them have been suspended (not supported by modern browsers).
Quickly gaining popularity, HTML is considered the secret of a website. HTML constructions and structures are operated and developed by the World Wide Web Consortium (W3C). You can check the latest status of this language at any time on the W3C’s website.
The latest upgrade was in 2014, when the HTML5 standard was released. It adds several tags to the markup, to identify what the content is, such as <article>, <header>, and <footer>.
How does HTML work?
HTML documents are files ending with .html or .htm. You can view them using any web browser (like Google Chrome, Safari, or Mozilla Firefox). The browser reads these HTML files and publishes the content on the internet so that readers can view it.
Normally, an average web page contains many HTML websites, such as home page, about page, contact page, all need separate HTML pages.
Each HTML page contains a set of tags (also called elements), which you can see as building blocks of a web page. It forms a tree structure including sections, paragraphs, headings, and other content blocks.
Most HTML elements have opening and closing tags with a structure like <tag> </tag>.
Below, you can see how the example code of an HTML page is structured:
<div> <h1>The Main Heading</h1> <h2>A catchy subheading</h2> <p>Paragraph one</p> <img src="/" alt="Image"> <p>Paragraph two with a <a href="https://example.com">hyperlink</a></p> </div>
- The outermost element is a tag division (<div> </div>), used to mark up for large content.
- It includes a title tag (<h1> </h1>), a subheading tag (<h2> </h2>), 2 texts (<p> </p>), and an image step (<img >).
- The second paragraph contains a tag containing a link (<a> </a>) with an href attribute containing the destination URL.
- The image tag also has 2 attributes: src for the image, and alt for the description of the image.
Overview of the most common HTML tags
HTML tags have two main types: block-level and inline tags.
Elements Block-level will use the entire site space and always start new lines of the site. Headings and paragraphs are the main examples of block tags.
Inline elements only take up a fraction of the webspace and don't start new lines of the web page. They are often used to format the internal content of block-level elements. Links and emphasis tags are popular inlines.
The 3 block level tags of every HTML page need tags like <html>, <head>, and <body>.
- The <html> </html> tag is the highest element used to encapsulate each HTML page.
- The <head> </head> tag contains meta information such as page titles and charsets.
- Finally, the <body> </body> tag is used to encapsulate all the content that will appear on the page.
<html> <head> <!-- META INFORMATION --> </head> <body> <!-- PAGE CONTENT --> </body> </html>
There are 6 levels in the HMTL, ranging from <h1> </h1> to <h6> </h6>, h1 is the highest heading level and h6 is the lowest. The text is placed in the <p> </p> tag, but the blockquotes use <blockquote> </blockquote>.
Divisions are large areas, containing many paragraphs, images, blockquotes, and other elements. We can mark them by using <div> </div>. The div element may also contain another div tag within it.
You can also use the <ol> </ol> tags for ordered lists and <ul> </ul> for unordered lists. The list should be placed within the <li> </li> tag. For example, this is how an unordered list displays in HTML:
There are many inline tags used to format the text. For example, the tag <strong> </strong> will format in bold, while the <em> </em> will format italics.
Hyperlinks are also element elements that need <a> </a> tags and href attributes to identify specific links:
http://<a href="https://example.com/">Click me!</a>
The image is also an inline element. You can add images using the <img> tag without the closing tag. But you also need to use the src attribute to identify the source of the image, such as:
Development of HTML. What is the difference between HTML and HTML5?
From the very first days, HTML has been a timeless invention. W3C constantly publishes updates and upgrades.
HTML4 (also commonly known as "HTML") was released in 1999, while the latest and greatest version, HTML5, was released in 2014. This release has released many important new features.
One of the most exciting features of HTML5 is its ability to support audio and video. Instead of using Flash Player, we now just embed videos and audio files into the site with the <audio> </audio> or <video> </video> tags. It also supports default features such as scalable vector graphics (SVG) and MathML support for mathematical formulas and scientific equations.
HTML5 has a lot of language improvements. The new tags are intended to tell the browser what the main purpose of the content in the website is, which is beneficial for both the reader and the search engine.
These semantic tags are <article> </article>, <section> </section>, <aside> </aside>, <header> </header>, and <footer> </footer>. To better understand the differences of each type, take a look at our in-depth comparison of HTML and HTML5.
Advantages and disadvantages of HTML
Like most things, HTML has its advantages and disadvantages.
This vastly used language has lots of resources and a huge community of users.
Use smoothly on almost any browser.
There is a simple and direct learning process.
Open source and completely free.
Clean and consistent markup.
The main web standard is operated by the World Wide Web Consortium (W3C).
Easy integration with backend languages like PHP and Node.js.
It can execute certain logic on the user. Therefore, most pages need to be created separately, even if it uses the same elements, such as headers or footers.
Some slow browsers support new features.
Difficult to control the browser execution scene (for example, older browsers cannot render new tags)
Although HTML is a powerful language, it still does not have enough features to build a professional and fully responsive website. We can only use HTML to add text elements and create a structured interface for content.
CSS is responsible for designing, styling backgrounds, colors, layouts, separators, and effects.
So ... What is HTML?
HTML is the markup language of the web world. The markup language is a language used to design and organize content, images, and all elements of a website. It runs on any browser and is managed by the World Wide Web Consortium.