What is HTML | HTML 4

HTML
HTML

What is HTML

HTML stands for Hypertext Markup Language. It allows the user to easily create and structure sections, paragraphs, headings, links, images, and blockquotes for web pages and applications.

HTML is not a programming language but a scripting language, meaning it doesn’t have the ability to create dynamic functionality. Instead, it makes it possible to organize/arrange and format documents.

In HTML, we use simple code structures using 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.

So, HTML is a markup language that is simple, straightforward and easy to learn even for the beginners in website building.

The History of HTML

HTML has been invented by Tim Berners-Lee, at the CERN research institute in Switzerland. He came up with the idea of an Internet-based hypertext system.

Hypertext is a text that contains references  or links to other texts that viewers can access just by clicking it.The first version of HTML was published in 1991 with just 18 HTML tags. Since then, each new version of the HTML language came with new tags and attributes also called tag modifiers to the markup.

As per Mozilla Developer Network’s HTML Element Reference, there are 140 HTML tags, though some of them are already obsolete (not supported by modern browsers).

Due to a quick rise in popularity of internet, and simplicity of HTML, it is now considered an official web standard. The HTML specifications are  developed maintained and by the World Wide Web Consortium (W3C). You can check out the latest state of the language anytime on W3C’s website.

The major upgrade of the HTML was with 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>.

How Does HTML Work?

HTML documents files have  .html or .htm extension. You can view then using any web browsers (such as Google Chrome, Safari, or Mozilla Firefox). The web browser reads an HTML file and renders its content for users to see the output by decoding the tags and attributes .

Usually, a website contains several different HTML pages. For instance: home pages, about pages, contact pages would all have separate HTML documents or web page.

Each HTML page is a set of tags (also called elements), which are basically  the building blocks of web pages. These elements form a hierarchy for the  structures the content into different sections, paragraphs, headings, and other content blocks.

Most HTML elements have an opening and a closing that use the <tag></tag> syntax.

This is an example show the structure of  HTML page:<div>

<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 simple division (<div></div>) you can use to mark up bigger content sections.
  • It contains a heading (<h1></h1>), 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 the destination URL.
  • The image tag also has two attributes: src for the image path and alt for the image description.

The Most Used HTML Tags

HTML tags have two main types: block-level and inline tags.

  1. Block-level elements take up the full available space and always start a new line in the document. Headings and paragraphs are a great example of block tags.
  2. Inline elements only take up as much space as they need and don’t start a new line on the page. They usually serve to format the inner contents of block-level elements. Links and emphasized strings are good examples of inline tags.

Block-Level Tags

The three block level tags every HTML document needs to contain are <html><head>, and <body>.

  1. The <html></html> tag is the highest level element that encloses every HTML page.
  2. The <head></head> tag holds meta information such as the page’s title and charset.
  3. Finally, the <body></body> tag encloses all the content that appears on the page
    <html>
    <head>
    <!-- META INFORMATION -->
    </head>
    <body>
    <!-- PAGE CONTENT -->
    </body>
    </html>

    Headings have 6 levels in HTML. They range from <h1></h1> to <h6></h6>, where h1 is the highest level heading and h6 is the lowest one. Paragraphs are enclosed by <p></p>, while blockquotes use the <blockquote></blockquote> tag.

  • Divisions are bigger content sections that typically contain several paragraphs, images, sometimes blockquotes, and other smaller elements. We can mark them up using the <div></div> tag. A div element can contain another div tag inside it as well.
  • You may also use <ol></ol> tags for ordered lists and <ul></ul> for unordered ones. Individual list items must be enclosed by the <li></li> tag. For example, this is how a basic unordered list looks like in HTML:
    <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    </ul>

Inline Tags

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">

Basic Difference Between HTML and HTML5?

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

Pros and Cons of HTML

Like most things, HTML comes with a handful of strengths and limitations.

Pros:

  • A widely used language with a lot of resources and a huge community behind.
  • Runs natively in every web browser.
  • Comes with a flat learning curve.
  • Open-source and completely free.
  • Clean and consistent markup.
  • The official web standards are maintained by the World Wide Web Consortium (W3C).
  • Easily integrable with backend languages such as PHP and Node.js.

Cons:

  • Mostly used for static web pages. For dynamic functionality, you may need to use JavaScript or a backend language such as PHP.
  • It does not allow the user to implement logic. As a result, all web pages need to be created separately, even if they use the same elements, e.g. headers and footers.
  • Some browsers adopt new features slowly.
  • Browser behavior is sometimes hard to predict (e.g. older browsers don’t always render newer tags).

How are HTML, CSS, and JavaScript related?

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.

However, HTML works extremely well with two other frontend languages: CSS (Cascading Style Sheets), and JavaScript. Together, they can achieve rich user experience and implement advanced functions.

  • CSS is responsible for stylings such as background, colors, layouts, spacing, and animations.
  • JavaScript lets you add dynamic functionality such as sliders, pop-ups, and photo galleries.

Think of HTML as a naked person, CSS as the clothing, and JavaScript as movements and manner.

Finally…What is HTML?

HTML is the main markup language of the web. It runs natively in every browser and is maintained by the World Wide Web Consortium.

You can use it to create the content structure of websites and web applications. It’s the lowest level of front end technologies, that serves as the basis for styling you can add with CSS and functionality you can implement using JavaScript.

You may like : Let us Learn JavaScript Step by Step

1.8 4 votes
Article Rating
Subscribe
Notify of
guest
12 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
pawan
pawan
1 year ago

very good notes

santosh
santosh
1 year ago

nice

nagma
nagma
1 year ago

nice

arti
arti
1 year ago

excellent

silma
silma
1 year ago

fabulous

minakshi
minakshi
1 year ago

excellent

trackback
1 year ago

[…] Similar Posts : HTML Introduction […]

Simran
Simran
1 year ago

Well Explained

trackback
1 year ago

[…] HTML Introduction      Let us Learn JavaScript from Step By Step      How to Activate GST in Tally.ERP9 ? […]

trackback
1 year ago

[…] You May Also Like :    How to Activate GST in Tally.ERP9 ?        Let us Learn JavaScript from Step By Step                HTML Introduction […]

Please Subscribe to Stay Connected

You have successfully subscribed to the newsletter

There was an error while trying to send your request. Please try again.

DigitalSanjiv will use the information you provide on this form to be in touch with you and to provide updates and marketing.
Share via
Copy link
Powered by Social Snap
%d bloggers like this: