Loading...


Go Back

Next page
Go Back Course Outline

Html5 Full Course


Basic Structure of an HTML5 Document

This is a basic structure of an HTML5 document with examples of meta tags, title, and link tags.

DOCTYPE Declaration: The DOCTYPE declaration ensures that the page is rendered using the correct HTML version.

                                <!DOCTYPE html>
                            

HTML Structure: The HTML document consists of the following main tags:

                                <html lang="en">
                                    <head>
                                        <meta charset="UTF-8">
                                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                        <title>My HTML5 Page</title>
                                    </head>
                                    <body>
                                        <h1>Welcome to My Webpage</h1>
                                        <p>This is a simple webpage using HTML5.</p>
                                    </body>
                                </html>
                            


Meta Tags

Character Encoding: It defines the character encoding of the document. UTF-8 supports most languages.

                                <meta charset="UTF-8">
                            

Viewport Settings: The viewport meta tag is essential for making the website responsive on mobile devices.

                                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            

Meta Description: The meta description provides a brief description of the webpage for search engines.

                                <meta name="description" content="A brief description of the webpage for search engines.">
                            

Title and Link Tags

Title Tag: The title tag sets the title of the webpage, displayed in the browser tab.

                                <title>My HTML5 Page</title>
                            

Linking External CSS: The link tag is used to link an external CSS file to the HTML document.

                                <link rel="stylesheet" href="styles.css">
                            

Linking External JavaScript: The script tag is used to link external JavaScript files to the HTML document.

                                <script src="script.js"></script>
                            


HTML Comments

HTML Comment Syntax: HTML comments are used for writing notes inside the code.

                                <!-- This is a comment -->
                            

Example of Commenting Out Code: You can use comments to explain sections of your code or temporarily disable it.

                                <!-- The following section handles the main navigation of the website -->
                                <nav>
                                    <ul>
                                        <li><a href="/">Home</a></li>
                                        <li><a href="/about">About Us</a></li>
                                    </ul>
                                </nav>
                            

Why Use Comments?

  • Document your code for better understanding.
  • Disable certain sections of the code temporarily.
  • Explain complex logic to make it more readable for others (or yourself).
Go Back

Next page