Tag: HTML Interview

Categories
HTML STATIC WEBSITES TUTORIALS WEB DEVELOPMENT WORDPRESS

Difference Between Link & Anchor Tag In HTML

HTML provides us with 2 different tags called the Anchor tag (represented by <a>) and the Link tag (represented by <link>). But what is the difference between the two? Can they be interchanged with one another? We will explore these queries in this article.

What is an HTML Anchor tag?

An anchor tag is used in an HTML file to help us link our HTML file’s texts to certain other web pages. In other words, it helps in the creation of hyper texts (<a>these are the hyper texts</a>) in HTML documents.

These other web pages that is linked into by the anchor tags can be present within the same website, or can be residing in a different website on a different web server altogether. But what is important is that the Anchor tags <a></a> are responsible for linking different web documents together through hyper texts and help user navigate from one web page to other in a simple mouse click!

It must be noted that all anchor tags are present only within the <body></body> section of an HTML page. They are never used in the <head></head> section of the HTML page. This is because the primary function of the Anchor tags <a></a> is to let web page users to move from one page to the other page. As the web page users can never see the content of <head> section, anchor tags are never used there!

So, in other words, we can say that Anchor tags <a> are used in the user visible part of an HTML web page so that the web page user can click on the Hyper Texts created by these Anchor tags and move from one web page to another.

What is an HTML Link tag?

On the other hand, our web page is not just made up of HTML web pages, but consists of one or more of Cascading Style Sheets (CSS) that are used to style the web page. It also consists of one or more Javascript files to provide interactive functionalities to the web page. These CSS files and the Javascript files are thus part and parcel of the web page and hence need to be linked to the web page. This is achieved using the <link> HTML tag.

The <link> HTML tag is hence used to link up all external resources such as CSS and Javascript files associated with a web page. This linking does not need to be seen by the final user as he only needs to get an integrated HTML web page rendered. As a result, the linking of these files, done through the use of <link> tag is done in the <head> meta section of the web page.

So these were the difference between Link tag Vs Anchor tag in HTML. Each of these tags have very unique functionalities to fulfill in their own roles and cannot be used interchangeably as we suspected in the beginning of the article.

With this, hope it became clear on the differences between Link and Anchor tags’ purpose in the creation of an HTML document. If you have any more queries or doubts between Link and anchor tags, let me know in the comments below and I will try to clarify your doubts.

Until next time, happy coding! 🙂

Categories
HTML TUTORIALS

List Of HTML Empty Elements

What are HTML Empty Elements?

Empty elements of HTML code are those HTML elements that have start tags but do not have an associated end tags. So these are the HTML elements which can contain only attributes associated within them but no content by themselves.

Sometimes, HTML Empty elements are also called as Void Elements of HTML.

Some of the interesting features of Empty Elements of HTML includes:

  • They can never have raw text or CDATA associated within themselves.
  • They can never have any additional child nodes in the DOM tree.

A list of HTML Empty Elements are as follows:

  • <br> Insert A Line break
  • <hr> Insert A Horizontal line
  • <img> Insert an image from a file in the path defined by its “src” attribute
  • <meta> Defines the metadata of a web page
  • <source> Insert a media file
  • <link> Used only in a document header to link in an external resource
  • <input> Used to declare an input element to accept user input.

Hope this gave you good idea about what HTML tags are considered HTML Empty elements. I will continue to write further on more such lesser known information related to web development in future articles as well.

Until next time, happy coding! 🙂

Categories
TUTORIALS WEB DEVELOPMENT

Who is an Information Architect?

An information architect is a person who is responsible for organizing the content of the website in a logical and easily findable way.

We know that a website is made up of lots of contents, images, videos and many other interactive functionalities created using Javascript.

While the design of a website as to how to appears and how the user of the website interacts with it is decided by web designers and web developers, the real crux of a website is its content. It is the content that matters the most in a website.

Having these contents of a website laid out in an easily accessible and logical way is very important for the success of the website.

One of the most important and significant metric of a website is the amount of time a user spends on a website. The more a user spends his time, more the opportunity for the respective website to showcase its value and hence more the chance it gets to convert it to profitability.

In order to achieve this metric, it becomes extremely important that the website contains a lot of useful and relevant information for its users. But just having very good content by itself is not sufficient, it also becomes important to lay these contents in a very logical way such that the website’s users can move from content to content, post to post in a progressive way. In addition to this, having very good search-ability or discoverability of these contents also becomes extremely important.

It is exactly these objectives that an Information Architect performs upon the contents of a website. Information Architect of a website makes sure that all the content are laid out along the website in a logically coherent way such that the user can transit form one article to another in a structural pattern. In addition to this, Information Architect of the website will also ensure that all these contents are made easily discoverable by providing sufficient inputs to get it easily searchable and discoverable by the users of the corresponding website!

Hope this article clarified the role of an Information Architect of a website. If you have any other inputs or opinions that you think needs to be added, do let us know in the comment section below.

Until next time, happy coding! 🙂

Categories
HTML STATIC WEBSITES TUTORIALS WEB SERVER WORDPRESS

What does Hyper Text Markup Language (HTML) even mean?

HTML is the language used to develop web pages for the world wide web. But what does HTML even mean? We know that HTML stands for Hyper Text Markup Language, but what does each of these terms even signify? This post will try to discuss upon each of these words and their significance in the world of the web.

What is Hyper Text?

Hyper text refers to the ability of web pages to link with each other, within the same website or between websites on the internet.

What is a Markup Language?

HTML is a markup language. But what does markup language even mean? It means that all the building blocks that make up a HTML web page are made up of HTML elements defined by HTML markups. In other words, HTML markups are special tags used to define all the HTML elements that make up a web page. These HTML markups includes tags like <head>, <title>, <body>, <footer> etc.

Why use semantic HTML markups for your web page?

With the recent HTML 5 specification, there has been an increase in the amount of these HTML markups (or tags) defined by the specification so that there are more semantically meaningful HTML markup tags available to define a web page. These new semantically appropriate HTML markup tags help improve the readability and understanding of the sections of these web pages by machines (aka algorithms) such as search engines.

Categories
CMS HTML STATIC WEBSITES TUTORIALS WEB SERVER WORDPRESS

How HTML Anchor Tag Could Be Used To Perform DDOS Attacks

Chinese attackers have been using HTML Anchor tags to perform DDOS attacks across the world these days. This is one such instance where a seemingly benign feature addition done to the HTML technical specification has inadvertently opened a Pandora box of its misuse/abuse by hackers and attackers.

As mentioned in my introductory article to HTML Anchor Tags, Anchor tags are used to link documents present on the word wide web so that users of a web page can easily navigate to a new web page seamlessly from their web browsers.

An example of HTML code using anchor tags looks something like this:

<a href="https://muddoo.com" title="Muddoo Home">Muddoo</a>

While the above code is a standard way of using HTML anchor tags, there are also additional anchor tag attributes one can use to add new features to the anchor tag’s overall functionality. In our previous article we looked at the noopener attribute that ensures that when the respective anchor links are opened in a new window, they are opened in a separate thread all together and have no relationship to the parent web page in anyways. This ensured that Cross Site Script (XSS) attacks could not be made from child web page to the parent page.

Just like the noopener attribute, we have another attribute associated with the anchor tags that some hackers are misusing to perform DDOS attacks on other websites. This attribute is the “ping” attribute of the anchor tags!

What is HTML Ping Attribute?

Ping is a new attribute of an Anchor tag that was introduced in HTML5 specification. Ping attribute would list a set of one or more URLs that are pinged back whenever a user of a web page follows a hyperlink from that anchor tag.

The idea of introducing Ping attribute to anchor tags was to enable web administrators track clicks on that hyperlink. An example of how this attribute looks like is shown below:

<a href="https://google.com" ping="https://muddoo.com/tracker">Go to Google</a>

So in the above example, whenever a user clicks on “Go to Google” hyperlink, he will be taken to the Google home page, but at the same time, a ping POST message is sent back to the https://muddoo.com/tracker webpage for muddoo.com website to keep track of number of users going to Google through that hyperlink.

But the problem occurred when some of the Chinese hackers started using this innocuous feature to perform DDOS attacks on many websites. They simply created web page with links to standard websites such as Alibaba or Tabao, while using ping back links to their target websites. They specifically targeted people using QQBrowser (from Chinese giant Tencent) to use their web pages to reach standard websites. This resulted in millions of Ping request going back to targeted websites thus acting as a DDOS attack on these websites.

How to prevent Anchor Tag Ping attacks from your web pages?

With good understanding of how the attack is being performed, you must be wondering how you can prevent such DDOS attacks originating from your websites or getting attacked by one. But unfortunately, there are no clear solutions in place as the support for Ping requests are part of HTML 5 specifications so all browsers will be supporting it (well, more or less), so your only best possibilities will be to keep monitoring such activities on your web server and take appropriate action at the right moment.

Hope this article gave good introduction to the possible Ping DDOS attacks happening due to the presence of Ping attribute in the HTML Anchor tags. This article has been part of series of articles that I have been writing about HTML tags with this being the third article on HTML Anchor Tags.

If you would like to take a look at other two articles, you can follow these links:

Introduction To HTML Anchor Tag

What is noopener vulnerability found in anchor tags of HTML?

Until next time, happy coding! 🙂

Categories
HTML STATIC WEBSITES TUTORIALS WEB SERVER WORDPRESS

What is noopener vulnerability found in anchor tags of HTML?

HTML anchor tags are used to link to different web pages available on the internet. We also frequently use “target” attribute with the anchor tags so that the linked web page is opened in a separate new window. This is achieved by using the anchor tag like this:

<a href="https://muddoo.com" target="_blank"title="Muddoo Home">Home</a>

Note that in the above code we set the “target” value to be _blank, which would result in the linked web page (https://muddoo.com in this case) to be opened in a new window.

However, it has been found that this can leave a possible vulnerability where in the remotely linked web page can take over control of your web page.

Why does this vulnerability happen?

This vulnerability of remotely linked web page taking over your web page (that is having the anchor tag) is because of the following reasons:

  1. In normal scenario, whenever you open a new web page in your browser in a new window, the web page is running in its own separate thread.
  2. Now when we open a link present in that web page, the new linked web page gets opened in a new window due to the presence of “target” attribute of the anchor tag. However, in this scenario, the newly opened web page is also running under its parent’s thread itself instead of its own thread.
  3. As a result, the newly opened external web page has controls over its parent’s thread. There by creating a vulnerable situation!

How to overcome anchor tag’s “target” vulnerability?

We can overcome this “target” thread control vulnerability simply by introducing a new attribute to your anchor tags called the rel=”noopener” attribute.

Thus, the new fixed anchor tag would look something like this:

<a href="https://muddoo.com" target="_blank"title="Muddoo Home" rel="noopener">Home</a>

With this simple change, we can ensure that the newly opened web page runs in it’s own thread there by having no link to it’s parent thread in any way!

Hope you are now aware of this possible vulnerability and ensure you start using the rel=”noopener” attributes to all your web pages’ external links!

Happy coding! 🙂

Note: This article is continuation of my previous article Introduction To HTML Anchor Tag