Getting started with HTML

Getting started with HTML
Nikhil
Published on 2021-06-30 16:14:29

Getting started with HTML Basic tags and get started first demo page

A different version of HTML and date of release

Version Specification Release Date
1.0 N/A 1994-01-01
2.0 RFC 1866 1995-11-24
3.2 W3C: HTML 3.2 Specification 1997-01-14
4.0 W3C: HTML 4.0 Specification 1998-04-24
4.01 W3C: HTML 4.01 Specification 1999-12-24
5 WHATWG: HTML Living Standard 2014-10-28
5.1 W3C: HTML 5.1 Specification 2016-11-01

 

Introduction of HTML 


HTML (Hypertext Markup Language) uses a markup system composed of elements that represent specific content. Markup means that with HTML you declare what is presented to a viewer, not how it is presented. Visual representations are defined by Cascading Style Sheets (CSS) and realized by browsers. Still existing elements that
allow for such, like e.g. font, "are entirely obsolete, and must not be used by authors.

HTML is sometimes called a programming language but it has no logic, so is a markup language. HTML tags provide semantic meaning and machine-readability to the content on the page. An element usually consists of an opening tag (<element_name>), a closing tag (</element_name>), which contain the element's name surrounded by angle brackets, and the content in between: <element_name>...content...</element_name>

There are some HTML elements that don't have a closing tag or any content. These are called void elements. Void elements include <img>, <meta>, <link> and <input>. Element names can be thought of as descriptive keywords for the content they contain, such as video, audio, table, footer.

An HTML page may consist of potentially hundreds of elements which are then read by a web browser, interpreted, and rendered into human-readable or audible content on the screen. For this document it is important to note the difference between elements and tags:

Elements: video, audio, table, footer
Tags: <video>, <audio>, <table>, <footer>, </html>

HTML Element insight


Let's break down a tag... The <p> tag represents a common paragraph. Elements commonly have an opening tag and a closing tag. The opening tag contains the element's name in angle brackets (<p>). The closing tag is identical to the opening tag with the addition of a forward slash (/) between the opening bracket and the element's name (</p>). Content can then go between these two tags:

<p>This is a simple paragraph.</p>.

 

Creating a simple page using HTML


The following HTML example creates a simple "Hello World" web page.
HTML files can be created using any text editor. The files must be saved with a .html or .htm[2] extension in order to be recognized as HTML files. Once created, this file can be opened in any web browser.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello!</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is a simple paragraph.</p>
</body>
</html>

 

HTML Simple page break down


These are the tags used in the example:

Tag Description
<!DOCTYPE> This tag defines the document type and HTML version in the browser.
<html> This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>...</head> and document body which is represented by <body>...</body> tags.
<head> This tag represents the document's header which can keep other HTML tags like <title>, <link> etc.
<title> The <title> tag is used inside the <head> tag to mention the document title.
<body> This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc.
<h1> This tag represents the heading.

The <!DOCTYPE> Declaration


The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. The current version of HTML is 5 and it makes use of the following declaration:

<!DOCTYPE html>

There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. We will see more details on this while discussing <!DOCTYPE...> tag along with other HTML tags.

ATutorialHub Related Guide

HTML Tutorials Comments (8)

Leave a Comment

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

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website