html

What is HTML

An HTML (hypertext markup language) document forms the structural foundation of a web page by providing the content layer. HyperText may be any text that can be displayed on the screen and contains links to other text. Web sites, for example, have countless documents linked to each other through hyperlinks.

The Markup Language provides meaning to the text in a document by describing the structure and format of that text. Moreover, the formatting and structuring of the text of an HTML document is assisted by tags.

If you want to build your own website, web application, or know how to edit other websites and apps, you need to understand what HTML is? To serve the above-stated purpose, this post provides rich content to get the basics of HTML.

HTML elements

HTML documents consist of elements, and an element in HTML consists of the following objects:

<start-tag> text <end-tag>

The <start-tag> and <end-tag> define the property of the text inside these tags. For instance, the text(linuxhint) written in between tags <h1> and </h1> will be considered as heading 1.

A screenshot of a computer Description automatically generated with medium confidence

For paragraphs, one can use tags <p> and </p>. However, it is observed that several HTML elements do not have the ending tags (or do not contain any text inside), like <br>, and are referred to as empty elements.

Few commonly used HTML elements are described here that serve various functionality to build a HTML page:

  • Text Heading: The tags <h1>, <h2>, <h3> … <h6> are used for text headings of various sizes.
  • Section/Division: A section or a division is defined by using <div> tag. These divisions are also referred to as containers and a single container may contain multiple containers.
  • Paragraph: Any text written between <p> and </p> will be considered as a paragraph.
  • link: To embed a link in an HTML document, anchor tags(<a> </a>) are used.
  • listing items: The <li> </li> tag is practiced to list down the items. Moreover, the <ol> and <ul> tags are used to arrange the items in an ordered and unordered list respectively.
  • Image: For insertion of an image, the <img> tag is used.

HTML attributes

The functionality of HTML elements can be extended by using attributes. The attributes are defined in the start tag and direct the HTML element to perform the specific property on the content of that tag. For instance, an anchor tag in HTML contains an attribute href which creates a link to the content written inside that tag. Let’s give it a try:

The following anchor tag(<a> </a>) contains the text “linuxhint” and the href attribute will create the link of index.html on that text.

Graphical user interface, text, application Description automatically generated

Additionally, you can specify several styling properties of an element using the attributes. The HTML’s style attribute can be used to specify colors, font style, and font size of an element. The users can limit the dimensions of an image in <img> </img> element by using the width and height attributes. The class attribute of an element allows you to use the property of a CSS class.

HTML editors

The HTML editor plays a vital role in developing an HTML document. Although the basics of HTML documents strongly rely on the elements. However, these elements are structured using an editor. This section lists down various most used HTML editors:

Visual Studio Code

Visual Studio Code provides an extensive range of features for editing and redefining source code of web-based/cloud-based applications. It is developed by Microsoft and has open-source accessibility therefore it has Linux support as well.

Graphical user interface, text, application, email Description automatically generated

WYSIWYG Web Builder

The WYSIWYG stands for What You See Is What You Get, and as the name directs, it shows the output on the run-time editing. This tool does support the latest version of HTML5 and some previous releases as well.

Graphical user interface, application, Word Description automatically generated

Sublime Text

Using this tool, you can create an HTML document with a ready-made structure. Once you save any Sublime Text file using .html or .htm extension, you would get the whole structure of the page as shown in the image below:

Text Description automatically generated

Notepad++

Notepad++ is another HTML builder that enables you to construct a page using the HTML elements. If a Notepad++ file is saved with .htm or .html extension, it will guide you to use correct HTML elements.

Graphical user interface, application, Word Description automatically generated

Moreover, several other tools are also available like Syntax highlighter, Auto-Completion, Debugging, and Code validation.

How HTML documents are developed

The HTML document comprises of disciplined elements to get meaningful content. These elements are structured using an HTML editor. Here we are using Sublime Text 4 as an HTML editor:

You can follow the steps provided below to construct a simple HTML page:

Step 1: Open the Sublime Text editor and save the file using .html, .xhtml, .shtml or.htm extension.

Graphical user interface, text, application Description automatically generated

Step 2: Write <html> in the text editing pane and hit enter. The time you hit enter, a basic structure of HTML document will be created by default as shown below:

Text Description automatically generated

The above image represents the necessary elements of an HTML document. Moreover, various elements and their attributes beautify the interface of the page and fulfill the needs of a user.

Conclusion

HTML is a language that offers the formatting and structuring of text for a web page. This article provides an informative and comprehensive guide about HTML. You have come to know about the building blocks of HTML documents. In addition, we provided links to several editing tools that can help you build HTML pages.

About the author

Adnan Shabbir