HTML

Last Updated : 15 Feb, 2023

What is HTML ?

HTML stands for HyperText Markup Language. It is used to design web pages using the markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages and markup language defines the text document within the tag that define the structure of web pages.

HTML Tutorial

What is HTML used for ?

HTML is used to create the structure of web pages that are displayed on the World Wide Web (www). It contains Tags and Attributes that are used to design the web pages. Also, we can link multiple pages using Hyperlinks.

HTML Basic Format Page Structure

The basic structure of an HTML page is laid out 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 Basic Format

  • <DOCTYPE! html> A doctype or document type declaration is an instruction that tells the web browser about the markup language in which the current page is written. It is not an element or tag. The doctype declaration is not case-sensitive.

  • <html> This tag is used to define the root element of HTML document. This tag tells the browser that it is an HTML document. It is the second outer container element that contains all other elements within it.

  • <head> This tag is used to define the head portion of the HTML document that contains information related to the document. Elements within the head tag are not visible on the front-end of a webpage.

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

Example 1: This is the basic example of HTML that display the heading and paragraph content.

HTML

<!DOCTYPE html>
<html>

<!-- Head Section content -->
<head>

    <!-- Page title -->
    <title>Basic Web Page</title>
</head>

<!-- Body Section content -->
<body>

    <!-- Used to display heading content -->
    <h1>Welcome to GeeksforGeeks</h1>

    <!-- Used to display paragrapg content -->
    <p>A computer science portal for geeks</p>
</body>

</html>

Output:

HTML Basic Web Page Output

Example 2: This example describes how to create a simple form using HTML. To create a form, we will use <form> tag and inside form tag, we will use some input fields and label elements to display the form.

HTML

<!DOCTYPE html>
<html lang="en">

<!-- Head Section Content -->
<head>

    <!-- Page title -->
    <title>Basic form design using HTML</title>
</head>

<!-- Body Section Content -->
<body>

    <!-- Heading Content -->
    <h1>GeeksforGeeks</h1>

    <h3>Basic form design using HTML</h3>

    <!-- Creating a from --> 
    <form action="#">
        <fieldset>
            <legend>Personal Details</legend>

            <!-- Label and input field -->
            <p>
                <label>First name : <input name="firstName" /></label>
            </p>

            <p>
                <label>Last name : <input name="lastName" /></label>
            </p>

            <!-- Label and radio button field -->
            <p>
                Gender :
                <label><input type="radio" name="gender" 
                    value="male" /> Male</label>

                <label><input type="radio" name="gender" 
                    value="female" /> Female</label>
            </p>

            <p>
                <label>Email : <input type="email" 
                    name="email" /></label>
            </p>

            <p>
                <label>Date of Birth : <input type="date" 
                    name="birthDate"></label>
            </p>

            <!-- Label and textarea field -->
            <p>
                <label>Address :
                    <br />
                    <textarea name="address" cols="30" 
                        rows="3"></textarea>
                </label>
            </p>

            <!-- Creating a button -->
            <p>
                <button type="submit">Submit</button>
            </p>
        </fieldset>
    </form>
</body>

</html>

Output:

Basic form design

HTML Questions: Please go through this link to see the wide collection of question based examples. These examples are categorized based on the topics including hyperlinks, forms, tables, frames, and many more.

Learn more about HTML:

Complete References:

Quiz Set:

HTML Interview Questions

Recent Articles

If you like GeeksforGeeks and would like to contribute, you can also write an article and mail your article to review-team@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.


My Personal Notes arrow_drop_up

Share your thoughts in the comments

Similar Reads

Free HTML Course: Complete Roadmap to Learn HTML
HTML stands for HyperText Markup Language. It is used to design web pages using the markup language. HTML is the combination of Hypertext and Markup language.
3 min read
HTML | Advance - HTML Skeleton | Question 1
What is the correct syntax of doctype in HTML5? (A) &lt;!doctype html&gt; (B) &lt;doctype html!&gt; (C) &lt;doctype html&gt; (D) &lt;/doctype html&gt; Answer: (A)Explanation: The correct syntax of HTML5 doctype is &lt; !doctype html &gt;, doctype is the very first thing to write in HTML5. &lt; !doctype html &gt; or &lt; !DOCTYPE HTML &gt; both are
1 min read
HTML | DOM HTML Object
The HTML Object property in HTML DOM is used to represent or access the HTML &lt;html&gt; element with in the object. The &lt;html&gt; element is used to return the HTML document as an Element Object. Syntax: It is used to access a &lt;html&gt; element.var x = document.getElementsByTagName("HTML")[0]; It can also be used to access a &lt;html&gt; el
3 min read
HTML | &lt;html&gt; xmlns Attribute
The HTML &lt;html&gt; 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: &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; Attribute Values: https://www.geeksforgeeks.org/ It defines the namespace to use (for XHTML d
1 min read
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
2 min read
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
2 min read
HTML | Advance - HTML Skeleton | Question 5
Which of the following is used to read an HTML page and render it? (A)Web server (B)Web network (C)Web browser (D)Web matrix Answer: (C)Explanation: A web browser (commonly referred to as a browser) is a software application for retrieving, presenting and traversing information resources on the World Wide Web. A web server process, store and displa
1 min read
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
1 min read
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
3 min read
HTML | Advance - HTML Skeleton | Question 2
HTML tags are case insensitive. (A) True (B) False Answer: (A)Explanation: For HTML5, the HTML tags and attribute names are case-insensitive, which means that you can mix the cases. Quiz of this QuestionPlease comment below if you find anything wrong in the above post
1 min read