HTML Program Examples with Output [Writing Your First HTML Page]
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.
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.
- Create a new file with an extension
.htmlin 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. - 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.
Comments
Aniket
I want some HTML programs for class 7 based on javascript, forms and frames.
Aniruddha Chaudhari
Hi Aniket,
Please mention your clear requirement or you can seek help from our Facebook community members.
Vaidehi
Super. Python is very practical and thanks for putting this example.
Aniruddha Chaudhari
You’re welcome, Vaidehi!
Aniket
Hmm good
Kalyan Kumar
Can you share?
Sumit Pant
I need html programs & codings for class 10
Aniruddha Chaudhari
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?
Abhishek
I want 20 HTML programs of computer class 10 for profect.
Akarsh Bhatt
so do i
Martin
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.
Aniruddha Chaudhari
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.
Jaslin Tam
Please give me at least 20 HTML programs with their output for class 10.
Aniruddha Chaudhari
Sure Jaslin. Will update this tutorial by adding more of such examples.
Punyaslok
I want a example program with output for class 10 HTML .
Methan
I need to know how to write the output of the program given. PLS FAST!
divya
hey, could you write code to create a simple website with 5 pages using HTML and CSS?
Aniruddha Chaudhari
Your requirement is not so clear. You can create the webpages using simple HTML tags mentioned in this tutorial.
Roshan
I need five HTML program in Au sheet and output also.
fathima
l want an HTML source code for creating a webpage for school.
Anamika
Sir, I want 15 programs of HTML for my school project, please provide me.
Daren L
Hi
I want 100 HTML programs for my project.
Vaatsi
Sir, please send HTML 20 program with output.
Mansi Singh
I also want.
Osama Ghandour Geris Mansour
Of Course I can help and write codes in HTML, CSS, PHP, C, C++,JavaScript and Python
Kerwarjal
I need some simple examples of HTML in basic terms.