HTML Program Examples with Output [Writing Your First HTML Page]
This is the first tutorial of HTML programming. If you want to learn HTML, you are in the right place.
In this tutorial, you will learn all the basic you require to write and run your first HTML code. I will also explain different HTML program examples with output.
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 HTML language. Even the page you are reading now uses HTML.
So now it might be clear to you, 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 the web browsers today.
Tags in HTML:
In HTML, everything is written using tags and elements. It is a markup language that means it 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.
<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
HTML – Root element
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
<head> element is like a container that contains the information about the document that 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 later part of the HTML tutorial.
<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 titles. So, each HTML document should compulsorily have a
<head> <title>This is a page title </title> </head>
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.
<body> <h1>This is a heading</h1> </body>
What is Empty HTML element?
You might have wonder seeing some of the HTML tags does not have an ending tag.
Empty elements are those elements that have no content and can be used without a closing tag.
Example of such an element is <br> that is break tag, it defines a break between lines. Empty HTML elements can be closed within the opening tag such as
Except for the empty elements, 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>
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).
Executing HTML file
There are two ways you can do that.
- Create a new file with extension
.htmlin Notepad (Windows) or Vim (Linux) or any of the text editor. Copy the above code and save it in the file. Open the file in any of the internet browsers.
- Copy 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, more better way.
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.