They are essential for websites, but do you know HTML files?

In 2004, a group of major browser developers, including Google, Apple, Mozilla, and Firefox, created the WHATWG (The Web Hypertext Application Technology Working Group) which in Spanish would be like The Web Hypertext Application Technology Working Group. This group is responsible for developing and advancing the HTML format.

How does it work

Through the markup language HTML elements that make up the structures of web pages are presented. Typically, each element includes an opening tag enclosed in angle brackets () and a closing tag also enclosed in square brackets, but with a forward slash between the tags ().

Subsequently, over time, other web technologies such as CSS (.css) and JavaScript (.js) code have been introduced in current HTML web pages. Developers typically create and edit HTML files and then upload them to browsers’ web servers, which are responsible for analyzing and interpreting in seconds showing us the final result when we visit the page. This is why we never see the HTML source code in the browser.

To explain the basic structure of an HTML document, we must know that there are three tags that describe it and through which simple information about it is offered. These tags do not affect the appearance of the document at all, but simply frame and structure the HTML file:

• and : surround the document and indicate the language in which it is written.
• : Specifies the preface for the rest of the file. Inside there are few tags, highlighting the title
• : here we find the main content or cause of the document. This is the part of the HTML document that is displayed on the computer.

View HTML preview from browser

As we have mentioned, web browsers are responsible for interpreting the HTML code to show us all the content graphically, whether as text, images or videos, just as it has been designed. However, it is possible view a preview of an HTML web page of any web from the browser, following certain steps depending on the one we use

• Google Chrome: from its options menu, clicking on “More tools” and “Developer tools”.
• MozillaFirefox: In your options menu select “More tools” and “Page source code”.
• Microsoft Edge: By clicking on “More tools” and “Developer tools”, within its options menu.
• apple-safari: in its options menu by clicking on “View source code”.

These are just a few examples within the most popular browsers, but virtually any web browser on the market has the ability to view HTML code.

How to easily create an HTML file

If we want to quickly and easily create an HTML file, we can make use of these free text editors, which will allow us to create and save it in a matter of seconds.

memo pad

It is a simple editor integrated into Windows, through which it can be used to write small text documents such as notes. At the same time it can also be used to easily create an HTML file. To do this, it will only be necessary to open it from the search engine of the Start menu.

Once opened we only have to write the code we need. Once finished, we click on the “File” tab, a drop-down menu will open where we select “Save as”.

Now within the Type tab at the bottom of the window, we must change the option “Text documents (*.txt)” to “All the files (*.*)”. In this way, our file will be saved as an HTML document. All that remains is to select the location of the file and add a name to it along with the “html” extension. All that remains is to click on Save to convert our text document into an HTML file.

NotePad++

This is possibly the best alternative text editor to Windows Notepad. It is a free and open source program compatible with different programming languages, it has native support for Windows and with which we can create an HTML file very easily. To get started, just download it from the developer’s website.

Once downloaded and installed, we only have to run it so that its interface appears. We write the desired code and once finished click on the “File” tab. This will open a drop-down menu where we will choose the option to “Save as”.

In the new window that appears, we go to the Type tab, where we display all the options and select “Hypertext Markup Language (*.hmtl, *.htm, *.shmtl, *.shtm, *.xhtml, *.xht, *.hta)”. Now we only have to enter the desired name for the HTML file and the location where we want it to be stored. Finally, click on “Save”.

EditPad Lite

Another very popular text editor program is EditPad Lite, which has a free version for personal use. It has full Unicode support and allows direct editing of text files using Windows text encodings and line breaks. Despite the fact that its interface is in English and easy and intuitive, allowing us to create our HTML file in a matter of seconds. To do this, the first thing is to download it from its official website.

We install it and run it so that its interface appears. Here we write the code we need and once finished click on the File tab. This will open a drop-down menu where we select the option to Save Ace.

In the new pop-up window that appears, we go to the Type section, located at the bottom. Here we display the list and choose “HTML documents (*.html, *.htm, *.shtml, *.hta)”. Now we only have to give it a name and a path to save the file. Finally, click on Save and we have already created our HTML file.

Best programs to open and edit an HTML file

To be able to see a preview of the HTML files, our own web browser may suffice. However, if we want to open and edit HTML files, it is best to use different types of web development programs such as the ones we are going to see below.

Visual Studio Code

Microsoft is the company in charge of developing this source code editor that works with multiple programming languages, among which are include the HTML. It features support for Git built-in control debugging, syntax highlighting, smart code completion, snippets, and code refactoring. It also supports the use of snippets, which helps us drastically reduce the time spent writing code. Of course, the software is customizable, which will allow us to configure everything from the workspace to the HTTP or CCS configuration.

Visual Studio Code is a multi-system application that we can download for free from its website.

SublimeText

This text editing app for professionals has become one of the best options for open and edit HTML and CSS filesalong with other programming languages. With it we will be able to jump to strings or symbols, define several syntaxes, highlight code, select several lines and do a divided edition. It is also compatible with keyboard shortcuts, which will allow us to dominate and reduce programming and debugging time. It is especially aimed at advanced users, so it is not indicated for novice users who are starting to do their first programming jobs.

Sublime Text is cross-platform and has a free version that we can download from the developer’s website.

Adobe Dreamweaver CC

This application has been created and developed by Adobe to become one of the industry standards when it comes to design a web page in HTML, since it has certain functions to create pages with the latest design innovations along with a modern look and allowing some flexibility to facilitate our work. Its evolution over time has led this software to become one of the preferred options for web designers. Also, if we don’t know how to code, it includes a series of predefined modules to help us create websites.

We can download a trial version of Dreamweaver from the Adobe website. If we want to use it permanently, we must pay a subscription of 24.19 euros per month.