html

HTML Basics

1 year ago
by Naima Aftab
If you want to build your first webpage and you are looking for a guide that will help you build your first basic HTML page then you have landed on the right place. The following tutorial will serve as a step-by-step guide to making HTML pages for beginners.

What is HTML?

HTML abbreviation of HyperText Markup Language is a web programming language that is used to display content in a web browser. It consists of a series of elements. These elements are used to display and structure your text content, images, and other objects on the web page such as forms, spreadsheets, video clips, sound clips, and other applications. Let’s first begin with a simple example.

<!DOCTYPE html>

<html>

  <head>

   <title>Page Title</title>

  </head>

  <body>


    <h1>This is a heading</h1>

    <p>This is a paragraph</p>


  </body>

</html>

The anatomy of the above example is as follows.

  • <!DOCTYPE html>is a declaration of an HTML document.
  • <html>It is known as the root element of the HTML and it encloses all the content.
  • <head>It is an element that encloses the type of content that is hidden from the user..
  • <title>As the name suggests, this element specifies the name of your HTML page.
  • <body>This element serves as a container for the content which appears on the webpage.
  • <h1>This element defines a heading.
  • <p>This element specifies a paragraph.

HTML Elements

In the above example you will come across different HTML elements. An HTML element is categorized by a starting tag, an ending tag and content that is placed between these tags. For instance, in the above example ‘<h1>This is a heading </h1>’ is an element. Here <h1>is the start tag, “This is a heading” is the content and </h1>is the closing tag.

An HTML page consists of nested elements. In the above example, there are five HTML elements which are <html>, <head>, <body>, <h1>and <p>.

HTML Tags

HTML Tags are used to start and end an HTML element. Tags begin with less than ‘<’ sign and end with a greater than ‘>’ sign.
For example: <p>

Do not forget to close a tag once it is started. In order to do so, use a forward slash in addition to the angled brackets. Here is how to do it </p>.

Important Note: Never mix HTML elements with HTML tags. These both are separate entities.

HTML Attributes

Attributes in HTML are used to add additional information regarding an HTML element. This additional information is added to the start tag.

<img src="dog.jpg" alt="Picture of a dog">

In this example, the src specifies the location and format of the image and the alt attribute provides a short description of the tag img.

HTML Headings

We have already discussed the HTML heading element above. Let’s dive into its details. These headings are defined by <h1>to <h6>tags and 1 to 6 represent the heading size. <h1>tag is used to specify the largest heading while <h6>tag is used to set out the smallest heading.

For example:

<h1>Welcome to my first HTML page </h1>

You can also provide various styles to your heading. For instance,

<h1 style="font-color:pink;">This a heading</h1>

HTML Paragraphs

The HTML paragraph element is specified by the <p>tag and is used to display content written in the form of paragraphs. Here is an example.

<p>

This is my first paragraph. I am learning HTML basics. I want to become a web developer someday and create amazing websites.

</p>

Now you must be thinking that there must be some editor that is used to create HTML pages. Here are some examples.

HTML Editors

Here some of the popular HTML editors are enlisted.

Notepad++

It is one of the most common editors that web programmers use to develop HTML pages. Below we present some pros and cons of notepad++.

Pros

  • It is a free, open-source HTML editor.
  • It is lightweight and fast.
  • It has a distraction-free interface.
  • It is flexible and comes with some convenient plug-ins.
  • It is supported by all operating systems.

Cons

  • It is built only for Windows operating systems.
  • It has limited options for code testing.

Sublime Text

Sublime text editor resembles Notepad++ but is much more advanced. Below we have mentioned some pros and cons of Sublime text.

Pros

  • It is available for Windows, Linux and Mac operating systems.
  • It has a colorful interface.
  • It is good for beginners.
  • The editor provides suggestions based on the existing code, while each suggestion has a link that contains further information about it.
  • It has a split-editing feature as well

Cons

  • Full features are available only after purchasing the software.
  • It cannot print documents or code.

Visual Studio Code

Visual Studio Code aka VS Code is one of the most trendy open-source code editors among the web developers provided by Microsoft. It provides an integrated development environment (IDE). Following are a few pros and cons of Visual Studio Code.

Pros:

  • It is compatible with Windows, Mac, and Linux.
  • It provides an auto-completion feature.
  • The interface is user-friendly.
  • It provides built-in debugging tools.
  • Users can add language extensions.

Cons

  • It is a heavy software system.
  • It is also a heavy-weight system that takes a lot of disk space.

Conclusion

HTML is a standard markup language that is a core requirement for building web pages. This tutorial provides beginners with a detailed step-by-step guide regarding the basics of HTML. It discusses HTML elements, tags, attributes, headings, paragraphs along with suitable examples. Moreover, this tutorial also guides the reader about different popular web editors and clearly mentions their advantages and disadvantages.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.

View all posts