What is Hypertext Markup Language (HTML)?
HTML stands for Hypertext Markup Language. It allows you to create and structure sections, paragraphs, headings, links and much more for web pages and applications.
HTML does not have the ability to create a dynamic functionality as it is not a programming language. IT only makes it possible to format web pages.
When we work with HTML, we use simple code structures (tags and attributes) to markup a website. We can create many different sections of a website with tags like below.
<h1>THis is a Heading Tag</h1>
<p>THis is a paragraph tag</p>The History of HTML
HTML was invented in Switzerland by a physicist named Tim Berners-Lee. He published the first version of HTML in 1991, consisting of 18 HTML tags. Since then, each new version has come with new tags and attributes (tag modifiers) to the markup. There are now roughly 140 HTML tags, some of which are considered obsolete because they are no longer supported by modern browsers.
Hypertext means a text that contains links to other texts that viewers can access fast. Due to its vast popularity, HTML is considered an official web standard. The HTML specifications are maintained and developed by the World Web Consortium (W3C).
How does HTML Work?
HTML are files that end in .html ot .htm extension. You can view them using any web browser. The browser reads the HTML file and renders its content so that internet users can view it.
The average website includes different HTML pages. Home pages, about pages, contact pages, product pages will all be separate HTML documents.
Each HTML page consists of a set of tags called elements, which you can refer to as the building blocks of page. They create a hierarchy that structures the content into headings, sections, paragraphs and other content blocks. Most HTML elements have an opening and closing tag that use the <tag> </tag> syntax. Below you can see a basic example how HTML elements can be structured
<div>
<h1>The Main Heading</h1>
<h2>Sub Heading</h2>
<p>A paragrpah section</p>
<!-- an image tag-->
<img decoding="async" src="" alt="">
<p>Another paragraph with an anchor tag
<a href="https://somesite.com" target="_blank" rel="noopener">Hyperlink</a>
</p>
</div>- The first and outer element is a division <div></div> can be used to mark up larger content sections.
- This example contains a heading <h1></h1>and a subheading <h2></h2>, two paragraphs <p></p>, and an image <img>.
- The second paragraph includes a link <a></a> with a href attribute that contains a URL destination.
- The image tag also has two attributes: src for the image path and alt for the image description.
The next set of code is the basic markup for an HTML markup that will render in a browser window.
<!DOCTYPE html>
<html>
<head>
<!-- META INFORMATION/STYLESHEET -->
</head>
<body>
<!-- PAGE CONTENT -->
<div>
<h1>
Hello World
</h1>
</div>
</body>
</html>Without any style added to the code above, it would just show up on a white background and black text that said “Hello World” in the top left corner of the browser page. Just like the image below.
The below code has just a tiny bit of style attached to it so you can see the difference just a little bit of style can make. I added a background color to the <body> tag of red. For the <h1> tag, I added a color of white, margin from the top of 10% and aligned the text to the center.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: red;
}
h1 {
color: #ffffff;
margin-top: 10%;
text-align: center;
}
</style>
</head>
<body>
<div>
<h1>
Hello World
</h1>
</div>
</body>
</html>