DEV Community

emmamarks
emmamarks

Posted on

Why HTML is a must for every website

Hyper Text Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language. It’s a form of Computer Language that’s used to make Web pages on the Internet viewable. It’s the fundamental technology behind everything you see in a web browser, and it’s used to build everything from simple web pages to complex web applications and services.

HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured. documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.

The language is written in the form of HTML elements consisting of tags enclosed in angle brackets (like ). Browsers do not display the HTML tags and scripts but use them to interpret the content of the page.

Website Examples: https://qsstudy.com/
https://dev.to/
https://www.freecodecamp.org/

What are Semantic Elements?
HTML was originally created as a markup language to describe documents on the early internet. As the internet grew and was adopted by more people, its needs changed.

Where the internet was originally intended for sharing scientific documents, now people wanted to share other things as well. Very quickly, people started wanting to make the web look nicer.

Because the web was not initially built to be designed, programmers used different hacks to get things laid out in different ways. Rather than using the

to describe information using a table, programmers would use them to position other elements on a page.

CONTAINER TAGS
Container tag: This tag contains 3 parts, namely, the opening tag, content that will be displayed in the browser & the closing tag. If we forget to add the closing tag then the browser will continue to implement the effect of that opening tag on the content inside of that tag. This will deform the structure of the overall webpage.

Syntax:<Tag_Name Content> </Tag_Name>

List of commonly used Container Tags:

Root Tags of HTML Document: These are some root elements of every HTML document, without including these tags in HTML we can not create web pages.

<html></html>: It is the root element of an HTML document that indicates the start & end of the webpage, along with rendering the content which is inside of it.

<head></head>: This tag contains some abstract information related to the webpage, which is not directly displayed but utilized to enhance the overall webpage.

<title></title>: This tag contains the title of the HTML document that is shown in the browser tab. It is described inside the head tag.

<body></body>: The body tag contains all the data that will be visible on the webpage.

Heading Tags: Heading tags are used to provide headings of different text sizes and styles to your web page. Heading tags vary from <h1> to <h6>.

Lists: There are 3 different list tags used for listing different items in a particular way, which is given below:
<ol></ol>: This list tag is used to list the items in a particular order ie., numerical, alphabetical, or roman numerals. The <li> tag is used to add list items inside of it.
<ul></ul>: This list tag is used to list the items in bulleted form. The shape of the bullet can be changed to disc, circle & square. It also uses the <li> tag to add list items.
<dl></dl>: This is an definition list tag. It uses <dt> the data term tag and <dd> the data description tag to add items inside it.
Text Formatters: These tags define the way in which text will be shown on the web page.

<p></p>: This is the paragraph tag used to add text on the webpage.

<b></b>: The bold tag is used to display the bold text that is important on the web page.

<i></i>: The italic tag display the text in the tilted form.
These are also some container tags that are generally used inside an HTML document.

<div></div>: This tag is used to create a separate container on the web page that also can use other tags inside it.
<a href=""></a>: This tag is used to provide links for different pages on the web page.

<button></button>: This is a button tag that is used to form an button on the web page to perform some actions.

<nav></nav>: The nav tag is used to build the navigation bar on the website.

<script src=""></script>: The script tag is mainly used to link an external JavaScript file using src attribute or you can write JavaScript code inside this tag directly in HTML document.

<iframe src=""></iframe>: Iframe tag is used to display nested web pages. It represents a web page inside another web page.

EMPTY TAGS
Empty Tags: Empty tags are the tags that only contain the opening tags, they do not have any closing tag. Hence they don’t affect the webpage if we forget to close any empty tag.

Syntax:

<Tag_Name>
Here are some empty tags that are generally used in HTML documents:

<input>: This tag is used to take input from users. It is mainly used inside a form tag.
<img>: It is an image tag that is used to insert an image on the web page.
<br>: The break tag is used to break the line and skip to the next line.
<link>: The link tag is used to link the external CSS file to the current HTML document.
<hr>: It is used to insert a horizontal line on the web page whenever needed.
<source>: The source tag is used to insert an external media file to the web page that can be an Audio or Video file.
<meta>: It stores the meta-information about the web page that is information about data that we don’t want to show to users on the web page.

Jacob Emmanuel
I4GxZuri 2022

Discussion (1)

Collapse
moopet profile image
Ben Sinclair

Tags like <i> and <b> don't convey anything semantic. You'd probably use em and strong instead.