How to Make a Simple HTML 5 Webpage?

HTML stands for hypertext markup language, and it is a web-based computer language used to create webpages. Any webpage's skeleton is made up of it.

In this article, we'll look at how to make a small webpage in notepad using HTML 5, the most recent version of the hypertext markup language.

However, before we begin, a fundamental understanding of HTML is required. The webpage will be built using the HTML 5 tags shown below.

<!-- Html tags and their uses --> 
<!Doctype html>    <!-- Declares the html document type -->
<html></html>      <!-- Starts and ends the html document -->

<head></head>      <!-- Holds all metadata about a page -->
<title></title>    <!-- Contains the title of the page -->
<body></body>      <!-- Holds the content of the page -->
<h1></h1>          <!-- Largest headline size-->
<p></p>            <!-- Used for paragraphing -->

<b></b>            <!-- Boldens a text -->
<ol></ol>          <!-- Creates an ordered-list -->

<li></li>          <!-- Creates a list -->

Step 1: Open the text editor (Notepad).

Locate and launch the notepad text editor from the start menu of your Windows operating system.

Step 2: Declare the HTML version of the document (Html 5).

On the first line of the notepad, type the version tag <!Doctype html>. The document type is declared by the!Doctype tag.

<!Doctype html>

Step 3: Add the html tag

On the second line of the notepad, type the html tag <html></html>. The html element is used to open and close a document in HTML. Before the <html> element, indent by four spaces(____).

<!Doctype html>
    
    <html>
    
    </html>

Step 4: Place the head tag in place.

Between the opening and closing html tags, type the head tag <head>/head>. The head tag holds all of the webpage's metadata.

Before the <head> tag, indent by four spaces ( ).

<!Doctype html>
    
    <html>
        <head>
        </head>
    
    </html>

Step 5: Add a title tag to the webpage and give it a name (My Webpage).

Between the opening and closing head tags, type the title tag <title></title>. The title tag determines the webpage's title, which is seen in the title bar.

My Webpage is the title of the webpage. Between the opening and closing title tags, type the name.

Before the "title>" tag, indent by four spaces ( ).

Before the title was included,

<!Doctype html>
    
    <html>
        <head>
            <title>
            </title>
        </head>
    </html>

After the insertion of the title

<!Doctype html>
    
    <html>
        <head>    
            
            <title>
                My Webpage
    
            </title>
        </head>    
    </html>

Step 6: Add a body element to the page and title it (Hello World!).

Between the opening and closing html tags, type the body tag <body></body>. And make sure the body tag is in line with the head tag.

The content of the webpage is included in the body element, which includes headings, paragraphs, tables, lists, and so on.

Between the opening and closing body tags, add the heading tag <h1></h1>. In HTML 5, H1 is the biggest heading tag and is used as a headline.

Hello World! is the title of the webpage. Between the opening and closing H1 tags, type the name. Before the <h1> tag, indent by four spaces (____).

<!Doctype html>
    
    <html>
        <head>    
            
            <title>
                My Webpage
            </title>
        </head>
        
        <body>
            
            <h1>
               
                Hello World!
            </h1>       
         
        </body>   
    
    </html>

Between the opening and closing body tags, type the paragraph tag <p></p>. Also, the paragraph tag should be aligned with the header tag.

Between the opening and closing paragraph tags, add the bold tag <b></b>.

List of my favourite web languages is the paragraph's thesis statement. Between the opening and closing bold tags, place the statement.

Before the <p> and <b> tags, indent by four spaces (____).

<!Doctype html>
    
    <html>
        <head>    
            
            <title>
                My Webpage
            </title>
        </head> 
        
        <body>
            <h1>
            
                Hello World!
            </h1>  
            
            <p>
                <b>
                   
                    List of my favorite web languages
               
                </b>
            </p>         
    
        </body>   
    
    </html>

The complete code, with comments

The tag  is used to denote a comment in HTML 5. Developers' notes are considered statements in the tag.

<!Doctype html>  <!-- Html 5 declaration tag -->
    
    <html>       <!-- Contains the head and the body tags -->
        <head>   <!-- Holds all metadata about the webpage --> 
            
            <title>  <!-- Contains the title of the webpage -->
                My Webpage <!-- This is the title of the webpage -->
            </title>
        </head> 
        
        <body>    <!-- Holds the content of the page -->
            <h1>  <!-- Largest heading tag -->
            
                Hello World! <!-- The heading of the webpage -->
            </h1>
            
            <p>
                <b>
                   
                   Lists of my favorite web languages
                </b>
            </p>  
            
            <ol>  <!-- Creates an ordered list -->
            
                <li> <!-- Holds the list item -->
            
                    Cascading style sheet <!-- The list item  -->
                </li>
            
                <li>
                   
                    JavaScript <!-- List item -->
                </li>
                <li>
                    PHP
            
                </li>
            
                <li>
            
                    Html 5
            
                </li>
          
            </ol>         
    
        </body>   
    
    </html>

The file should be saved as an HTML 5 document.

To make a website out of the file. If you name the file index.html, it will appear in your default web browser.

To see the freshly built HTML 5 webpage, launch it.