What is HTML? Basics Explained

What is HTML? Basics Explained

HTML is an abbreviation for HyperText Markup Language. It is a standard markup language for creating web pages. It allows the use of HTML elements to create and organise sections, paragraphs, and links (the building blocks of a web page).

  • HTML is the mortar that holds web pages together
  • The markup language that defines structure, content, and sometimes style
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content
  • Once you’ve mastered the fundamentals, HTML isn’t quite as tough as you may imagine

Example of a simple HTML Document:

<!DOCTYPE html>
<html>

<head>
  <title>Hello World!</title>
</head>

<body>
  <h1>Hello World!</h1>
  <p>This is a sample web page that shows that at the heart of 
web pages comes content and style!</p>
  <p>It really isn't all that difficult, and it can be pretty 
easy to use.</p>
</body>

</html>
  • The <!DOCTYPE html> declaration defines that this document is an HTML5 document
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta information about the HTML page
  • The <title> element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab)
  • The <body> element defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph

What Is HTML Used For?

HTML, or Hypertext Markup Language, is a programming language that is used to describe the structure of web pages. HTML allows you to create static pages with text, headings, tables, lists, graphics, and links, among other things.

What is an HTML Element?

An HTML element is made up of three essential parts:

Opening tags – are used to indicate the point at which an element becomes active. Angle brackets that open and close are wrapped around the tag. For instance, to make a paragraph, use the start tag <p>.
Content – this is the output that other users see.
Closing tag – which is identical to the opening tag, but it precedes the element name with a forward slash. To finish a paragraph, for instance, use </p>.

The combination of these three parts will create an HTML element:

<p>My first paragraph.</p>

Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

How to edit HTML

HTML is the most widely used language for developing webpages. The functionality is simple to understand and implement. The user’s requirements alter over time. As a result, the website must be updated on a regular basis. To do this, a developer must alter the HTML file to make the necessary changes.

Edit an HTML file Using the Text Editor

The primary and most basic method to edit a HTML file is by using a text editor. We can use a simple notepad which is available by default on well-known operating systems or a dedicated text editor for writing code.

  • Essentially code editors are just text files with an extension e.g. .html .css .js.
  • Code editors save you time and usually add closing tags automatically
  • At the heart HTML files are simply text files with an .htm or .html extension
  • While basic text editors can be used its often better to choose a more capable code editor Stay away from word processors for html authoring. Below are some examples of code editors. Some be free, trial or paid:
    • Atom
    • Brackets
    • Notepad++
    • Sublime Text
    • Vim
    • Visual Studio Code

Steps on How to Use a Text Editor

Step 1: Open a source code editor
Search for the suitable source code editor on your computer and open it. I like to use Visual Studio Code.
Step 2: Open the HTML file
After the text editor is opened. Go to the File menu and click on Open option:
A dialogue box will appear, select the HTML file you want to edit and click on Open:
Navigate to the location where the HTML file is saved, select it and click on Open:
Step 3: Edit the file
The current HTML code placed in the file will be displayed. Perform the necessary changes.
Step 4: Save the file
To save the file, Press CTRL+S to save the file or you can go to File menu and click on Save
You have learned to edit an HTML file using the text as well as a source code editor.

How Are HTML, CSS, and Javascript Related?

HTML is used to add text elements and build content structure. However, simply creating a professional and fully responsive website is insufficient. To construct the vast bulk of website content, HTML requires the assistance of Cascading Style Sheets (CSS) and JavaScript.

Conclusion

HTML is the primary markup language used on the internet. Each HTML page has a set of elements that together form the content structure of a web page or application.

HTML is a user-friendly language with a lot of support that is primarily used for static internet pages. HTML works best when combined with CSS for styling and JavaScript for functionality.

Further reading

If you’re new to web development, be sure to read HTML Basics | MDN article to learn more about what HTML is and how to use it.

See also

What is an HTML Element? How do you create one?
How to Create an HTML Boilerplate
How to Write HTML Comments

If you liked this article, then please share. You can also find me on Twitter for more updates.

Pin It on Pinterest