HTML

  • Last Updated : 14 Apr, 2022

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

Online Course | Web Design for Beginners: A beginner-level course for the curious Geek inside you! Here you will be learning all that there is to know about Web designing from scratch!

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