• Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard
CSEstack

What do you want to Learn Today?

  • Programming
    • Tutorial- C/C++
    • Tutorial- Django
    • Tutorial- Git
    • Tutorial- HTML & CSS
    • Tutorial- Java
    • Tutorial- MySQL
    • Tutorial- Python
    • Competitive Coding Challenges
  • CSE Subject
    • (CD) Compiler Design
    • (CN) Computer Network
    • (COA) Computer Organization & Architecture
    • (DBMS) Database Management System
    • (DS) Data Structure
    • (OS) Operating System
    • (ToA) Theory of Automata
    • (WT) Web Technology
  • Interview Questions
    • Interview Questions- Company Wise
    • Interview Questions- Coding Round
    • Interview Questions- Python
    • Interview Questions- REST API
    • Interview Questions- Web Scraping
    • Interview Questions- HR Round
    • Aptitude Preparation Guide
  • GATE 2022
  • Linux
  • Trend
    • Full Stack Development
    • Artificial Intelligence (AI)
    • BigData
    • Cloud Computing
    • Machine Learning (ML)
  • Write for Us
    • Submit Article
    • Submit Source Code or Program
    • Share Your Interview Experience
  • Tools
    • IDE
    • CV Builder
    • Other Tools …
  • Jobs

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

Naina Makhija/175746/26
CodeHTML & CSS

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?
  • Different Types Tages in HTML
    • Root Element Tag
    • Head Element Tag
    • Body Element Tag
  • What is Empty HTML Element?
  • HTML Program Example with Output
  • How to Execute an HTML Program File?

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.

2. Head element tag

<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.

Python Interview Questions eBook

HTML
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.

Your name can also be listed here. Got a tip? Submit it here to become an CSEstack author.

Comments

  • Reply
    Aniket
    December 30, 2018 at 10:11 pm

    I want some HTML programs for class 7 based on javascript, forms and frames.

    • Reply
      Aniruddha Chaudhari
      January 2, 2019 at 9:10 am

      Hi Aniket,

      Please mention your clear requirement or you can seek help from our Facebook community members.

      • Reply
        Vaidehi
        December 19, 2019 at 10:42 am

        Super. Python is very practical and thanks for putting this example.

        • Reply
          Aniruddha Chaudhari
          December 19, 2019 at 12:52 pm

          You’re welcome, Vaidehi!

      • Reply
        Aniket
        December 27, 2019 at 9:02 pm

        Hmm good

    • Reply
      Kalyan Kumar
      August 29, 2022 at 8:31 am

      Can you share?

  • Reply
    Sumit Pant
    January 28, 2019 at 9:05 pm

    I need html programs & codings for class 10

    • Reply
      Aniruddha Chaudhari
      January 28, 2019 at 10:46 pm

      Hi Sumit,

      I am not sure about class 10 students. How much HTML programming experience do they have? Are they beginners and started learning recently?

      • Reply
        Abhishek
        February 27, 2021 at 6:05 pm

        I want 20 HTML programs of computer class 10 for profect.

    • Reply
      Akarsh Bhatt
      November 27, 2019 at 8:37 pm

      so do i

  • Reply
    Martin
    May 28, 2019 at 10:24 am

    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
      Aniruddha Chaudhari
      May 28, 2019 at 8:05 pm

      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
    Jaslin Tam
    June 2, 2019 at 4:41 pm

    Please give me at least 20 HTML programs with their output for class 10.

    • Reply
      Aniruddha Chaudhari
      June 3, 2019 at 7:28 am

      Sure Jaslin. Will update this tutorial by adding more of such examples.

    • Reply
      Punyaslok
      August 26, 2019 at 7:35 pm

      I want a example program with output for class 10 HTML .

  • Reply
    Methan
    May 31, 2020 at 4:05 pm

    I need to know how to write the output of the program given. PLS FAST!

  • Reply
    divya
    September 12, 2020 at 1:22 pm

    hey, could you write code to create a simple website with 5 pages using HTML and CSS?

    • Reply
      Aniruddha Chaudhari
      September 16, 2020 at 8:48 pm

      Your requirement is not so clear. You can create the webpages using simple HTML tags mentioned in this tutorial.

    • Reply
      Roshan
      November 30, 2021 at 7:47 pm

      I need five HTML program in Au sheet and output also.

  • Reply
    fathima
    January 3, 2021 at 6:05 pm

    l want an HTML source code for creating a webpage for school.

  • Reply
    Anamika
    March 23, 2021 at 1:37 pm

    Sir, I want 15 programs of HTML for my school project, please provide me.

  • Reply
    Daren L
    September 30, 2021 at 9:17 pm

    Hi
    I want 100 HTML programs for my project.

  • Reply
    Vaatsi
    October 11, 2021 at 7:48 pm

    Sir, please send HTML 20 program with output.

  • Reply
    Mansi Singh
    October 11, 2021 at 8:52 pm

    I also want.

  • Reply
    Osama Ghandour Geris Mansour
    December 25, 2021 at 12:03 pm

    Of Course I can help and write codes in HTML, CSS, PHP, C, C++,JavaScript and Python

  • Reply
    Kerwarjal
    February 21, 2022 at 3:23 pm

    I need some simple examples of HTML in basic terms.

Leave a Reply Cancel reply

HTML CSS & JavaScript

  • HTML- First Program
  • HTML- Basic Tags
  • HTML- Adding CSS
  • HTML- Best Form Design Practices
  • HTML- Text Indent using CSS
  • HTML- Drop Cap using CSS
  • HTML- Add Favicon
  • HTML- Adding ToC on Website
  • HTML- Save Page as PDF
  • CSS- 17 Tips for Optimizing CSS
  • CSS- Adding Image Shadow
  • Show/Hide Password on Login Form
  • Pass Data to Another Web Page [JS]
  • Horizontal Scrolling on Mobile Web

HTML Editing Tools

  • HTML- Online Editor
  • HTML- Novi Builder

© 2022 – CSEstack.org. All Rights Reserved.

  • Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard