November 25, 2019
November 25, 2019
HTML stands for Hypertext Markup Language. It allows the user to create and structure sections, paragraphs, headings, links, and blockquotes for web pages and applications.
HTML is not a programming language, meaning it doesn’t have the ability to create dynamic functionality. Instead, it makes it possible to organize and format documents, similarly to Microsoft Word.
When working with HTML, we use simple code structures (tags and attributes) to mark up a website page. For example, we can create a paragraph by placing the enclosed text within a starting <p> and closing </p> tag.
<p>This is how you add a paragraph in HTML.</p> <p>You can have more than one!</p>
Overall, HTML is a markup language that is really straightforward and easy to learn even for complete beginners in website building. Here’s what you’ll learn by reading this article:
HTML was invented by Tim Berners-Lee, a physicist at the CERN research institute in Switzerland. He came up with the idea of an Internet-based hypertext system.
Hypertext means a text that contains references (links) to other texts that viewers can access immediately. He published the first version of HTML in 1991, consisting of 18 HTML tags. Since then, each new version of the HTML language came with new tags and attributes (tag modifiers) to the markup.
According to Mozilla Developer Network’s HTML Element Reference, currently, there are 140 HTML tags, although some of them are already obsolete (not supported by modern browsers).
Due to a quick rise in popularity, HTML is now considered an official web standard. The HTML specifications are maintained and developed by the World Wide Web Consortium (W3C). You can check out the latest state of the language anytime on W3C’s website.
The biggest upgrade of the language was the introduction of HTML5 in 2014. It added several new semantic tags to the markup, that reveal the meaning of their own content, such as <article>, <header>, and <footer>.
HTML documents are files that end with a .html or .htm extension. You can view then using any web browser (such as Google Chrome, Safari, or Mozilla Firefox). The browser reads the HTML file and renders its content so that internet users can view it.
Usually, the average website includes several different HTML pages. For instance: home pages, about pages, contact pages would all have separate HTML documents.
Each HTML page consists of a set of tags (also called elements), which you can refer to as the building blocks of web pages. They create a hierarchy that structures the content into sections, paragraphs, headings, and other content blocks.
Most HTML elements have an opening and a closing that use the <tag></tag> syntax.
Below, you can see a code example of how HTML elements can be 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>
HTML tags have two main types: block-level and inline tags.
The three block level tags every HTML document needs to contain are <html>, <head>, and <body>.
<html> <head> <!-- META INFORMATION --> </head> <body> <!-- PAGE CONTENT --> </body> </html>
<ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>
Many inline tags are used to format text. For example, a <strong></strong> tag would render an element in bold, whereas <em></em> tags would show it in italics.
Hyperlinks are also inline elements that require <a></a> tags and href attributes to indicate the link’s destination:
<a href="https://example.com/">Click me!</a>
Images are inline elements too. You can add one using <img> without any closing tag. But you will also need to use the src attribute to specify the image path, for example:
<img src="/images/example.jpg" alt="Example image">
If you want to learn more HTML tags, consider checking our complete HTML cheat sheet (which is also available for download).
Since the first days, HTML has gone through an incredible evolution. W3C constantly publish new versions and updates, while historical milestones get dedicated names as well.
HTML4 (these days commonly referred to as “HTML”) was published in 1999, while the latest major version came out in 2014. Named HTML5, the update has introduced many new features to the language.
One of the most anticipated features of HTML5 is native support for audio and video embedding. Instead of using Flash player, we can simply embed videos and audio files to our web pages using the new <audio></audio> and <video></video> tags. It also includes in-built support for scalable vector graphics (SVG) and MathML for mathematical and scientific formulas.
HTML5 introduced a few semantic improvements as well. The new semantic tags inform browsers about the meaning of content, which benefits both readers and search engines.
The most popular semantic tags are <article></article>, <section></section>, <aside></aside>, <header></header>, and <footer></footer>. To find amore unique differences, consider checking our in-depth HTML and HTML5 comparison.
Like most things, HTML comes with a handful of strengths and limitations.
While HTML is a powerful language, it isn’t enough to build a professional and fully responsive website. We can only use it to add text elements and create the structure of the content.
HTML is the main markup language of the web. It runs natively in every browser and is maintained by the World Wide Web Consortium.