HTML Introduction - GeeksforGeeks

HTML Introduction

Last Updated : 20 May, 2024

HTML, or HyperText Markup Language, is the standard markup language used to create web pages. It’s a combination of Hypertext, which defines the link between web pages, and Markup language, which is used to define the text document within tags to structure web pages. This language is used to annotate text so that machines can understand and manipulate it accordingly. HTML is human-readable and uses tags to define what manipulation has to be done on the text. This guide will help you understand the workings of HTML and explain it with examples.

Table of Content

What is HTML?
Features of HTML
HTML Elements and Tags
HTML Page Structure
Web Browsers
Why learn HTML?
Advantages of HTML
Disadvantages of HTML

What is HTML?

HTML stands for HyperText Markup Language and it is used to create webpages. It uses HTML tags and attributes to describe the structure and formatting of a web page.

HTML consists of various elements, that are responsible for telling search engines how to display page content. For example, headings, lists, images, links, and more.

HTML Example

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>First HTML Code</title>
  </head>
  <body>
    <h2>Welcome To GFG</h2>
    <p>Hello Geeks</p>
  </body>
</html>

Features of HTML

It is easy to learn and easy to use.
It is platform-independent.
Images, videos, and audio can be added to a web page.
Hypertext can be added to the text.
It is a markup language.

HTML Elements and Tags

HTML uses predefined tags and elements that instruct the browser on how to display the content. HTML elements include an opening tag, some content, and a closing tag. It’s important to remember to include closing tags. If omitted, the browser applies the effect of the opening tag until the end of the page.

This section will dive into the basic structure of an HTML page, which includes essential building-block elements like doctype declaration, HTML, head, title, and body elements.

opening and closing tag HTML

HTML Page Structure

The basic structure of an HTML page is shown below. It contains the essential building-block elements (i.e. doctype declaration, HTML, head, title, and body elements) upon which all web pages are created.

HTML page structure

<!DOCTYPE html> – This is the document type declaration (not technically a tag). It declares a document as being an HTML document. The doctype declaration is not case-sensitive.
<html> – This is called the HTML root element. All other elements are contained within it.
<head> – The head tag contains the “behind the scenes” elements for a webpage. Elements within the head aren’t visible on the front end of a webpage. HTML elements used inside the <head> element include:
<style> – This HTML tag allows us to insert styling into our web pages and make them appealing to look at with the help of CSS.
<title> – The title is what is displayed on the top of your browser when you visit a website and contains the title of the webpage that you are viewing.
<base> – It specifies the base URL for all relative URL’s in a document.
<noscript> – Defines a section of HTML that is inserted when the scripting has been turned off in the user’s browser.
<script> – This tag is used to add functionality to the website with the help of JavaScript.
<meta> – This tag encloses the metadata of the website that must be loaded every time the website is visited. For eg:- the metadata charset allows you to use the standard UTF-8 encoding on your website. This in turn allows the users to view your webpage in the language of their choice. It is a self-closing tag.
<link> – The ‘link’ tag is used to tie together HTML, CSS, and JavaScript. It is self-closing.
<body> – The body tag is used to enclose all the visible content of a webpage. In other words, the body content is what the browser will show on the front end.

An HTML document can be created using an HTML text editor. Save the text file using the “.html” or “.htm” extension. Once saved as an HTML document, the file can be opened as a webpage in the browser.

Note: Basic/built-in text editors are Notepad (Windows) and TextEdit (MacOS). Other advanced text editors include Sublime Text, Visual Studio Code, Froala, etc.

Example

This example illustrates the basic structure of HTML code.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <!--The above meta characteristics make a website 
        compatible with different devices. -->
    <title>Demo Web Page</title>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <p>A computer science portal for geeks</p>
</body>

</html>

Output:

HTML output

Web Browsers

Unlike other programming languages, HTML does not show output on the compiler.

Web browsers show the results of an HTML code. It reads HTML files and determines how to show content with the help of HTML tags.

Any web browser (Google, Safari, Mozilla Firefox, etc) can be used to open a . HTML file and view the results.

Why learn HTML?

It is a simple markup language. Its implementation is easy.
It is used to create a website.
Helps in developing fundamentals about web programming.
Boost professional career.

HTML History

HTML is a markup language used by the browser to manipulate text, images, and other content, in order to display it in the required format. HTML was created by Tim Berners-Lee in 1991. The first-ever version of HTML was HTML 1.0, but the first standard version was HTML 2.0, published in 1995.

Currently, we are using HTML5, which is the latest and most recent version of HTML.

HTML History

Advantages of HTML

HTML is used to build websites.
It is supported by all browsers.
It can be integrated with other languages like CSS, JavaScript, etc.

Disadvantages of HTML

HTML can only create static web pages. For dynamic web pages, other languages have to be used.
A large amount of code has to be written to create a simple web page.
The security feature is not good.

Conclusion

In conclusion, mastering HTML is a fundamental step in your web development journey. This guide serves as a comprehensive resource for understanding HTML, from the basics to more advanced topics. Remember, HTML is more than just a markup language – it’s a powerful tool for creating engaging, accessible, and SEO-friendly websites.

To learn more about HTML, visit the HTML Tutorial Page.

Master The Art of Web Development with Full Stack Web Development

Frequently Asked Questions about HTML Introduction

What are the basics of HTML?

HTML basics include understanding the syntax, elements/tags, attributes, structure and formatting of HTML file.

What are the 5 uses of HTML?

5 key uses of HTML are:

Creating web page.
Integrating CSS and JavaScript
Accessing web content
Semantic markup
Cross-platform compatibility

What is HTML syntax?

HTML syntax means the set of rules and regulation that defines how HTML code is structured and written.

What is the main concept of HTML?

HTML is a global markup language for web. You can create any a webpage using HTML and any browser can open that HTML file.

him0000

Improve

Previous Article

HTML Tutorial

HTML Editors

Similar Reads

Introduction to HTML CSS | Learn to Design your First Website in Just 1 Week

This is an introduction course to HTML and CSS which will help you learn all about the basics of HTML and CSS needed to begin with Web Development. Course Overview In this course we will teach you the basics of HTML and CSS along with building a project which will be a single page website. That is by following this course you will also get the chan

Introduction to HTML

HTML stands for Hypertext Markup Language. It is the most basic language, and simple to learn and modify. It is a combination of both hypertext and markup language. It contains the elements that can change/develop a web page's look and the displayed contents. Or we can say that HTML creates or defines the structure of web pages. We can create websi

HTML | DOM HTML Object

The HTML Object property in HTML DOM is used to represent or access the HTML <html> element with in the object. The <html> element is used to return the HTML document as an Element Object. Syntax: It is used to access a <html> element.var x = document.getElementsByTagName("HTML")[0]; It can also be used to access a <html> el

HTML | <html> xmlns Attribute

The HTML <html> xmlns Attribute is used to specify the xml namespace for a document. Important Note: This attribute is mainly required in XHTML, not valid in HTML 4.01, and optional in HTML 5. Syntax: <html xmlns="http://www.w3.org/1999/xhtml"> Attribute Values: https://www.geeksforgeeks.org/ It defines the namespace to use (for XHTML d

Inline HTML Helper - HTML Helpers in ASP.NET MVC

HTML Helpers are methods that returns HTML strings. These are used in the view. In simple terms, these are C# methods that are used to return HTML. Using HTML helpers you can render a text box, an area, image tag, etc. In MVC we have many built-in HTML helpers and we can create custom helpers too. Using HTML helpers a view can show model properties

How to return HTML or build HTML using JavaScript ?

JavaScript is very powerful and with it, we can build dynamic web content and add many features to a web application. With HTML, we create the structure of the web page and the same thing can also be done with JavaScript. There are a few JavaScript methods called as createElement(), appendChild() with which we can add nodes to the DOM tree on the f

How to convert html.slim to html.erb ?

Introduction to slim and erb: Slim files and tools are used to make the code more light and will help to use it instead of the particular code. erb is also used to do the similar but if you want to make the changes in the code then the user should be familiar with slim/erb respectively. If you have to convert an HTML Document into html.slim file th

How to include HTML code snippets in HTML ?

In this article, we will learn how to include HTML snippets in HTML code. We will include the HTML code snippet of "gfg.html" into "index.html". To achieve this task, we are going to write a JavaScript function in "index.html" which traverses the collection of all HTML elements in "gfg.html" and searches for elements with specific attributes. It cr

How to display HTML tags as plain text in HTML ?

In this article, we will learn how to display HTML tags as plain text in HTML. We can replace the plain text by using < with &lt; or &60; and > with &gt; or &62; on each HTML tag. HTML Entities:Sign DescriptionEntity nameEntity number<Less than(start of HTML element)&lt;<>Greater than(end of HTML element)

What is the difference between <html lang="en'> and <html lang="en-US'> ?

The lang attribute specifies which language is used to write the content of a web page. It is used to set the language for the whole text of the web page. The <html lang="en"> specifies the language of the document as English, while <html lang="en-US"> narrows it down to English as used in the United States. Table of Content <html la

Article Tags :