HTML Program Examples with Output [Writing Your First HTML Page]

Shape Image One
HTML Program Examples with Output [Writing Your First HTML Page]

HTML Program Examples with Output [Writing Your First HTML Page]

learn basic HTML tags

Do you want to learn HTML programming?

This is the first tutorial on HTML programming. If you want to learn HTML, you are in the right place.

In this tutorial, you will learn all the basics you require to write and run your first HTML code. I will also explain different HTML program examples with output.

Table of Contents

What is HTML?

HyperText Markup Language is popularly known as HTML. It is the language that the web browser understands. Every web developer should learn this language and it is the basic language to start with.

Every web page you see on the internet is written in the HTML language. Even the page you are reading now uses HTML.

So now it might be clear to you, that running HTML code you don’t require installing any software. You can execute the HTML file in any of your internet browsers.

HTML is the common language that is understood by all web browsers today.

Different Types of Tags in HTML

In HTML, everything is written using tags and elements. It is a markup language that means it is used to mark the content in the web document.

An HTML document provides structural and semantic information of a webpage to the browser.

HTML contains a set of tags and elements that together form markup content. An element defines the purpose of a tag.

Start and end tags are used at the beginning and ending of an element.

For example:

<p> This is a paragraph </p>

The above is an example of the complete element from starting <p> tag, the content ‘This is a paragraph’ to the ending tag </p>.

1. Root element tag

The HTML element represents the root of any HTML document thus, <html> is the root element. The root element is present in all the documents and codes. The root element always contains a <head> and a <body> element.

<head> element is like a container that contains the information about the document and how it must be perceived by the browser or search engines.

It includes meta, titles, style, link, script, NoScript, and base. How to include these tags in the head? – we will see that in the latter part of the HTML tutorial.

Title Tag:

<title> element is one mandatory element within the <head> element. This title is displayed as the page title in the browser tab and also the search engines identify the page with the help of this title. So, each HTML document should compulsorily have a <title> tag.

Example:

<head>
    <title>This is a page title </title>
</head>

3. Body element tag

All the content that is visible in a browser is contained within the <body> element. Each HTML document has a <body> element under which all the content is written using different tags.

There can be only one <body> element in a document.

Example:

<body>
    <h1>This is a heading</h1>
</body>

Read more basic HTML tags you require to create a web page.

What is Empty HTML element?

You might have wondered seeing some of the HTML tags do not have an ending tag.

Empty elements are those elements that have no content and can be used without a closing tag.

An example of such an element is <br> that is a break tag, it defines a break between lines. Empty HTML elements can be closed within the opening tag such as <br />.

Except for the empty elements, the rest all the elements needs a closing tag.

HTML Program Examples with Output using all the Basic Tags:

A cumulative example of all the elements we have described above is below.

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>

    <body>
        <h1>Homepage Headline</h1>
        <p>This is before the break tag<br />
        and this after the break tag.</p>
    </body>

</html>

Note: DOCTYPE is used to identify the type of document as an HTML file.

Don’t bother about the tags inside the body tag. I will tell you about these tags in the next tutorial in detail (link given below the post).

How to Execute an HTML Program File?

There are two ways you can do that.

  1. Create a new file with an extension .html in Notepad (Windows) or Vim (Linux) or any of the text editors. Copy the above code and save it in the file. Open the file in any of the internet browsers.
  2. Copy the above code and run it in the online HTML code editor.

By executing HTML code, you can visualize and understand each of the HTML basic tags, in a better way.

If you are looking for a job? Visit Jooble.

Conclusion

In this HTML program examples with output, we have learned about the basic HTML elements and their uses. HTML elements define the structure of the web pages and contain a number of HTML tags.

HTML is a very simple language. And it is widely used to write web pages. HTML was developed in various versions and HTML5 is the latest version.

Naina Makhija

Naina Makhija

She is a content writer at CSEstack and was previously a copywriter TCS. She has completed her Masters in Computer Application and has good technical knowledge. She paints, reads and tries out new DIYs. When she is not doing all those, She is either cooking new cuisines or traveling to new destinations.

30 Comments

  3. hello, thanks for your wonderful opening up or step you have giving a new beginner. but I want to learn how to design web environment.

    Reply

    1. Web designing is really a very broad topic and it comes with lots of options. Here are things have to learn to web development.

      1) Frontend (HTML, CSS and JavaScript)
      2) Backend (PHP, Python, NodeJS)
      3) Database management (DBMS, SQL)

      If you are not new and want to learn web development, learn Django. It is a Python framework for website development.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *