What is HTML? An ultimate guide to web development
Simulanis / Nov-10, 2020
HTML or Hypertext Markup Language is the standard code used to structure a webpage. By structure here, we mean the paragraphs, links, bullet points, heading etc. through which content is displayed. HTML elements tell the browser exactly how to display the content to the visitor.
What is HTML?
It is important to note that HTML isn’t a programming language, meaning that it doesn’t have the ability to create dynamic functionality. It is but a markup language with elements which are used to enclose or wrap different parts of the content to make it appear or act a certain way.
For example, look at the following sentence:
1) My grandma is old.
We can create a paragraph by placing the enclosed text within a starting <p> and
closing </p> tag.
1) <p>My grandma is old.</p>
What is an HTML element?
Let’s explore the paragraph element we just saw above.
The main parts of our element are as follows:
1. The opening tag: This contains the name of the element (in this case, p), enclosed in opening and closing angle brackets. This shows where the element begins or starts to take effect — in this case where the paragraph begins.
2. The closing tag: This includes a forward slash before the element name. This states where the element ends which, in this case is the ending of the
paragraph. Failing to add a closing tag is one of the standard beginner errors and leads to strange results.
3. The content: This is the content of the element. In our example, it’s the text
“My grandma is old”.
The opening tag, the closing tag and the content together comprise the element. Elements can also contain what are known as attributes.
<p class = “editor’s note”>My grandma is old.</p>
The text in bold above is the attribute we just added. Attributes contain extra information about the element that we don't want to be shown to the visitor in the actual content.’Class’ is the attribute name. “Editor-note” is the attribute value. The class attribute allows you to give the element a non-unique identifier that can be used to target it (and any other elements with the same class value) with style information, and other things.
How does the HTML work?
HTML documents can be viewed using any web browser (such as Google Chrome, Safari, or Mozilla Firefox). The browser functions to read the HTML file and render its content so that internet users can view it. The average website includes several different HTML pages. For instance all the separate HTML documents required for home pages, about pages, contact pages.
Each of these contain several elements which we discussed above.
The two main types of HTML tags are
1. Block, and
2. Inline
The three block level tags every HTML document needs to contain are <html>,
<head>, and <body>.
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. 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.
The Evolution of HTML: Difference between HTML and HTML5
HTML has gone through various evolutions since its conception. The latest one, HTML5, was developed in 2014. The most drastic addition that came with HTML5 is the provision to embed elements of audio and video. It also includes in-built support for scalable vector graphics (SVG) and MathML for mathematical and scientific formulas. It’s new semantic tags also provide the browsers with the meaning of the website’s content, which benefits both the readers and the search engines.
Pros and Cons of HTML
HTML comes with a plethora of strengths and limitations. Here are some of the most basic ones:
Pros:
● It is a widely used language with a lot of resources and a huge community behind it.
● It runs natively in every web browser.
● It’s an open-source language and is completely free.
● HTML has a clean and consistent markup.
● It's easily integrable with backend languages.
Cons:
● It’s 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. Some browsers adopt new
features slowly.
● Browser behavior is sometimes hard to predict (e.g. older browsers don’t
always render newer tags).