Introduction to HTML

First developed by Tim Berners-Lee in 1990, HTML is short for Hypertext Markup Language. HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. It is relatively easy to learn, with the basics being accessible to most people in one sitting; and quite powerful in what it allows you to create. It is constantly undergoing revision and evolution to meet the demands and requirements of the growing Internet audience under the direction of the W3C, the organization charged with designing and maintaining the language.

HTML is not a programming language, meaning it doesn’t have the ability to create dynamic functionality. Instead, it makes it possible to organize and format documents, similar to Microsoft Word.

“Hypertext” refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.

HTML is a Language, as it has code-words and syntax like any other language.

When working with HTML, we use simple code structures (tags and attributes) to mark up a website page. For example, we can create a paragraph by placing the enclosed text within a starting <p> and closing </p> tag.

<p>This is how you add a paragraph in HTML.</p>
<p>You can have more than one!</p>

Overall, HTML is a markup language that is really straightforward and easy to learn even for complete beginners in website building.

What does HTML look like?

Below is an example of a basic web page written in HTML, BootStrap and Php with a description of each section and its function.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Example page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 </head>
 <body>
  <h1>This is a heading</h1>
  <p>This is an <b>example</b> of a basic HTML page.</p>
 </body>
</html>

The DOCTYPE line describes what version of HTML the page was written in so that an Internet browser can interpret the text that follows.
The <html> opening tag lets the browser know that it is reading HTML code.
The <head> section contains information about the page, such as its title, meta tags, and where to locate the CSS file.
The <body> section contains everything that’s viewable on the browser. For example, all the text seen here is contained in the body tags.
The <h1> tag is the visible heading of the page.
The <p> tag is a paragraph of text. Most web pages (like this one) have several paragraph tags.
Contained in the paragraph is the <b> tag that bolds the word example in the paragraph.
Finally, the closing tags wrap each of the above tags.

What is HTML5?

HTML5 is the latest version of Hypertext Markup Language, the code that describes web pages. It’s actually three kinds of code: HTML, which provides the structure; Cascading Style Sheets (CSS), which takes care of presentation; and JavaScript, which makes things happen.

HTML5 has been designed to deliver almost everything you’d want to do online without requiring additional software such as browser plugins. It does everything from animation to apps, music to movies, and can also be used to build incredibly complicated applications that run in your browser.

What does HTML5 look like?

HTML5 code as shown below.

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Example page</title>
 </head>
 <body>
  <h1>This is a heading</h1>
  <p>This is an example of a basic HTML page.</p>
 </body>
</html>

How to use and implement HTML

Because HTML is completely text-based, an HTML file can be edited simply by opening it up in a program such as Notepad++, Vi or Emacs. Any text editor can be used to create or edit an HTML file and, so long as it is named with a .html file extension, any web browser – such as Chrome or Firefox – will be capable of displaying the file as a webpage.

For professional software developers, there are a variety of WYSIWYG editors to develop webpages. NetBeans, IntelliJ, Eclipse and Microsoft’s Visual Studio provide WYSIWYG editors as either plugins or as standard components, making it incredibly easy to use and implement HTML.

These WYSIWYG editors also provide HTML troubleshooting facilities, although modern web browsers often contain web developer plugins that will highlight problems with HTML pages, such as a missing closing tag or syntax that does not create well-formed HTML.

Chrome and Firefox both include HTML developer tools that allow for the immediate viewing of a webpage’s complete HTML file, along with the ability to edit HTML on the fly and immediately incorporate changes within the internet browser.

file extensions used with HTML

HTML files use either the .htm or .html file extension. Older versions of Windows (Windows 3.x) only allow three-letter file extensions, so they used .htm instead of .html. However, both file extensions have the same meaning, and either may be used today. That being said, we recommend sticking to one naming convention as certain web servers may prefer one extension over the other.

How are HTML, CSS, and JavaScript related?

While HTML is a powerful language, it isn’t enough to build a professional and fully responsive website. We can only use it to add text elements and create the structure of the content.However, HTML works extremely well with two other frontend languages: CSS (Cascading Style Sheets), and JavaScript. Together, they can achieve rich user experience and implement advanced functions.

CSS is responsible for stylings such as background, colors, layouts, spacing, and animations.
JavaScript lets you add dynamic functionality such as sliders, pop-ups, and photo galleries.

Summing-Up

HTML is the main markup language of the web. It runs natively in every browser and is maintained by the World Wide Web Consortium.

You can use it to create the content structure of websites and web applications. It’s the lowest level of frontend technologies, that serves as the basis for styling you can add with CSS and functionality you can implement using JavaScript.

Introduction to HTML