HTML stands for “HyperText Markup Language”.
At first sight, this meaning may seem quite complex but actually, HTML is a simple text containing the link to another text or resource.
This term was originally applied to literature and then moved to the IT field. A table of contents of any book is actually the HTML since it contains references to different pages.
Then let’s analyze the meaning of “markup language.” Any website in its nature is simply the pages with the typed text, images, and links. All this is the HyperText.
If we compare the house building with the website development, then in the same way as in the first case, we need a plan, to understand the location of doors, windows, a bathroom and so on. Therefore, HTML is a drawing (plan) of the website that is being developed.
You can see the HTML markup on any website on the Internet. For this, you need to open the page, RBC on it and choose the “View page source” option from the menu that appears (it depends on the browser you are using, the name may differ).
If the HTML document is opened in a graphics editor, it will be displayed as a standard text file and if it’s opened in a browser, its displaying will look as markup tags. Such a variant of the HTML document is called a web page. The main function of a browser is to read HTML and show it as a web page.
Structural elements of the HTML document
You should understand that HTML is not a development language. Its main task is to describe the items that are located in a document (links, images, text, videos), with the help of tags. Tags are written in special angular brackets (“<” and “>”). In most cases, they are used together.
First, an opening tag is written, then – its content. After this, a closing tag is written, and it’s created with the help of a slash “/” before the tag’s name.
Tags also have attributes that increase their functionality. Such attributes are always written inside the opening tag.
Let’s study the structure of the HTML document with the help, by analyzing a simple web page.
HTML document starts with the <!DOCTYPE html> tag. It helps to send the information on the HTML language version, that is used by a page, to a browser.
After <!DOCTYPE html>, a double <html> is placed. The HTML structure is frequently compared to a tree so that the <html> is its base, trunk. And such a “trunk” has <head> and <body> branches.
<head> contains data that are necessary for a browser and search engines and also, styles for webpage exterior design are added. For example, <head> contains a mandatory <title></title> tag – the tag of a page title, displayed on the browser’s tab.
All information (text, images and so on) that is displayed on a page should be located inside the <body></body> tag.
Doctype, Html, Head, Title, Body are mandatory tags, that must be written on a new page and have such an order. All this is contained in a file that has the «.html» extension.
Single and double tags
There are double and single tags. Let’s analyze their difference.
Single tags are empty, they don’t contain anything, and help to create various graphic elements on a page. Such tags should in no way contain a closing tag.
Double tags have such a name since they contain two tags: an opening tag and a closing tag (<html></html>). Double tag content contains everything that is located between the opening and closing tags.
Testing in HTML
We should know what should be tested while working with HTML documents. Our primary task is to check the HTML code for validation errors on website pages, be sure that a website works properly in any browser since it’s one of the main requirements for all developers.
After testing and finding the defects (if any), you should make changes to the code.
There are numerous online programs that help to check the HTML code for the correctness of result generation.
Let’s describe 7 most popular methods of HTML code testing in a browser:
HTML Testing Tools
JSBin
In most cases, inexperienced new testers think that the JSFiddle interface is very hard to study and therefore, it’s hard to work with. That’s why JSBin is an alternative to JSFiddle and is a little bit easier to use.
It has 2 types of access: free and professional. Both first and second types allow testing HTML, CSS and JavaScript codes in a browser for numerous times but a number of JavaScript libraries that can be switched on is fixed.
If you need additional functionality for work, such as private bins and asset hosting, you need to create your own professional account.
CodePen
This application can be considered as an online group of developers who use different interface programs such as HTML, CSS, JavaScript and many libraries for code development, in their work. In other words, CodePen is an online code editor in a browser.
HTMLhouse
This tool is the best solution for working with HTML.
The interface is very simple, clear, doesn’t contain unnecessary functionality and support.
HTMLhouse will help to publish HTML and share it with everyone or with the selected group of people.
For any code element that will be written in the future, there is the possibility to share the link if it’s necessary to send it.
Markup Validation Service W3C
It’s a free tool for searching the validation errors on a site. It helps to test the selected data for bugs, make a report with the list of them and receive the recommendations on its fixing.
Text editor
It helps to launch the HTML document. While working with a text editor (for example, Sublime Text or Notepad ++) in autonomous mode, you simply need to upload a document with .html extension and double click to open it.
It is opened in a browser, installed on PC by default.
To check data displaying in different browsers, you can change the browser that has been installed for automatic activation in the “Settings tab”.
JSFiddle
JSFiddle is a platform for online checking the HTML code of a browser. The service was launched in 2009.
Basically, JSFiddle is used for checking Javascript code online but you can also test HTML, CSS and the code created on the basis of other interface libraries.
It has a personal online editor and at the same time, displays the output. JSFiddle is perhaps the best application for working with JavaScript.
Liveweave
Liveweave allows preview the HTML code in a real-time mode and is one of the most comfortable applications in this field.
The interface is very simple and user-friendly. While writing code in a built-in editor, you can always receive tips that greatly simplify your work.
Moreover, the code can be uploaded to a cloud and even downloaded in a .zip format.
Liveweave also works with some JavaScript libraries.
The following HTML applications may be useful for workers of QA testing field who don’t have enough experience: HTML Goodies, Chrome developer tools. To work with the second one, you need to open the HTML file in Google Chrome, RMC on it and choose that HTML detail that must be tested.
In addition to the above advantages, all these services have one common disadvantage: they display the code only in one browser. If you need to test this in multiple browsers, you should install all of them and sometimes it’s not possible. For example, working with a Mac browser, you won’t be able to check it directly in IE.
If you need to check a website in different environments, you should try cross-browser testing applications, such as LambdaTest. It helps to test the code for cross-browser compatibility. The results of such testing are based on data received from more than 2000 browsers.
Conclusion
The main task of the HTML document is to tell a browser what elements build a webpage and what is their content. HTML is easy to understand and has a clear structure.
To make code work properly, you should test it on different platforms, that will simplify a testing process and you will be able to easily find all defects.
Leave A Comment