Skip to content
Tech | Business | Education | Awareness Articles
Menu
  • Home
  • Tech
  • Business
  • Education
  • Awareness
Menu

How to create a simple HTML page?

Posted on February 3, 2025

Creating a simple HTML page is the foundation of web development. HTML (HyperText Markup Language) is the standard markup language used to create web pages. It provides the basic structure for content on the World Wide Web. In this article, we will guide you through the steps to create a simple HTML page from scratch.

Getting Started with HTML:

To start creating a simple HTML page, you need a basic text editor such as Notepad on Windows or TextEdit on Mac. These text editors allow you to write and save plain text files, which is all you need for HTML coding.

HTML Document Structure:

An HTML document has a specific structure that includes the following components:

  • The declaration, which specifies the HTML version.
  • The element, which encloses the entire HTML document.
  • The element, which contains meta-information about the document.
  • The element, which sets the title of the document displayed in the browser tab.</li> <li>The <body> element, which contains the visible content of the document.</li> <p></l><br /> Here is an example of a simple HTML document structure:</p> <p>“`html<br /> <!DOCTYPE html><br /> <html><br /> <head><br /> <title>My First HTML Page

    Hello, World!

    This is a simple HTML page.



    “`

    Adding Content to Your HTML Page:

    HTML uses a variety of elements to structure content on a web page. Some common elements include:

    • Headings:

      to

      for different levels of headings.
    • Paragraphs:

      for text paragraphs.

    • Lists:
        ,

          , and

        1. for unordered and ordered lists.
        2. Links: for hyperlinks to other web pages.
        3. Images: for displaying images on the page.

        4. You can customize the appearance of your content using CSS (Cascading Style Sheets) for styling and layout, and JavaScript for interactivity.

          Creating a Simple HTML Page:

          Now, let’s create a simple HTML page that includes a heading, a paragraph, and a link:

          “`html



          Simple HTML Page

          Welcome to My Website

          This is a simple HTML page with some basic content.

          Click here to visit Example.com


          “`

          Saving and Viewing Your HTML Page:

          Once you have written the HTML code for your page, save the file with a .html extension (e.g., index.html). You can then open the file in a web browser to view your web page.

          To open the file in a browser, simply right-click on the HTML file and select ‘Open with’ and choose your preferred browser. Your HTML page will be displayed in the browser window, showing the content you have created.

          Basic HTML Tags:

          HTML tags are used to define different elements on a web page. Some basic HTML tags include:

          • : Defines the root element of an HTML page.
          • : Contains meta-information about the document.
          • : Sets the title of the document.</li> <li><body>: Contains the content of the document.</li> <li> <h1> to </p> <h6>: Defines headings of different levels.</li> <li> <p>: Defines a paragraph.</li> <li><a>: Creates a hyperlink.</li> <li><img>: Inserts an image.</li> <li> <ul>, </p> <ol>, </p> <li>: Creates lists.</li> <p></l><br /> By using these basic HTML tags, you can structure and format content on your web page effectively.</p> <p><strong>Conclusion:</strong></p> <p>Creating a simple HTML page is the first step in web development. By understanding the basic structure of an HTML document and using essential HTML tags, you can build a functional web page. With practice and experimentation, you can enhance your HTML skills and create more complex web pages with interactive features. Start building your own HTML pages today and unleash your creativity on the web!</p> </div><!-- .entry-content --> </article><!-- #post-1354 --> <div id="comments" class="fbox comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/education/how-to-create-a-simple-html-page/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://webdesigninghouse.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p> <p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='1354' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- #comments --> </main><!-- #main --> </div><!-- #primary --> <aside id="secondary" class="featured-sidebar widget-area"> <section id="block-2" class="fbox swidgets-wrap widget widget_block widget_search"><form role="search" method="get" action="https://webdesigninghouse.com/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search" ><label class="wp-block-search__label" for="wp-block-search__input-1" >Search</label><div class="wp-block-search__inside-wrapper " ><input class="wp-block-search__input" id="wp-block-search__input-1" placeholder="" value="" type="search" name="s" required /><button aria-label="Search" class="wp-block-search__button wp-element-button" type="submit" >Search</button></div></form></section><section id="block-3" class="fbox swidgets-wrap widget widget_block"><div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">Recent Posts</h2><ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://webdesigninghouse.com/sarkari-results/sarkari-jobs-details-check-how-to-apply/">Sarkari Jobs Details, Check how to apply ?</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://webdesigninghouse.com/sarkari-results/latest-sarkari-exam-results-check-all-details-here/">Latest Sarkari Exam Results – Check All Details Here</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://webdesigninghouse.com/sarkari-results/admit-cards-download-information/">Admit Cards & Download Information</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://webdesigninghouse.com/sarkari-results/sarkari-results-check-track-sarkari-results-for-jobs/">Sarkari Results, Check & Track Sarkari Results for Jobs ?</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://webdesigninghouse.com/education/indian-franchise-business-best-sectors-to-invest-in/">Indian Franchise Business: Best Sectors to Invest In</a></li> </ul></div></div></section><section id="block-6" class="fbox swidgets-wrap widget widget_block"><div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">Categories</h2><ul class="wp-block-categories-list wp-block-categories"> <li class="cat-item cat-item-5"><a href="https://webdesigninghouse.com/category/awareness/">Awareness</a> </li> <li class="cat-item cat-item-3"><a href="https://webdesigninghouse.com/category/business/">Business</a> </li> <li class="cat-item cat-item-4"><a href="https://webdesigninghouse.com/category/education/">Education</a> </li> <li class="cat-item cat-item-9"><a href="https://webdesigninghouse.com/category/sarkari-results/">Sarkari Results</a> </li> <li class="cat-item cat-item-2"><a href="https://webdesigninghouse.com/category/tech/">Tech</a> </li> <li class="cat-item cat-item-1"><a href="https://webdesigninghouse.com/category/uncategorized/">Uncategorized</a> </li> </ul></div></div></section></aside><!-- #secondary --> </div> </div> </div><!-- #content --> <div class="content-wrap"> <footer id="colophon" class="site-footer clearfix"> <div class="footer-column-wrapper"> <div class="footer-column-three footer-column-left"> <section id="block-7" class="fbox widget widget_block"> <div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained"> <p>Welcome to <strong>Web Designing House</strong>, your one-stop destination for the latest news, articles, and information about India’s thriving industry. We are dedicated to delivering the Role of Technology, games, film industry, and entertainment, ensuring our audience stays informed about the dynamic changes and innovations shaping the market.</p> <p>Email: support@webdesigninghouse.com</p> <p><a href="https://webdesigninghouse.com/terms-and-conditions/">Terms & Conditions</a></p> <ul class="wp-block-list"></ul> </div></div> </section> </div> <div class="footer-column-three footer-column-middle"> <section id="nav_menu-4" class="fbox widget widget_nav_menu"><div class="swidget"><h3 class="widget-title">About</h3></div><div class="menu-footer-menu-1-container"><ul id="menu-footer-menu-1" class="menu"><li id="menu-item-408" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-408"><a href="https://webdesigninghouse.com/">Home</a></li> <li id="menu-item-403" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-403"><a href="https://webdesigninghouse.com/category/awareness/">Awareness</a></li> <li id="menu-item-404" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-404"><a href="https://webdesigninghouse.com/category/business/">Business</a></li> <li id="menu-item-405" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-405"><a href="https://webdesigninghouse.com/category/education/">Education</a></li> <li id="menu-item-406" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-406"><a href="https://webdesigninghouse.com/category/tech/">Tech</a></li> </ul></div></section> </div> <div class="footer-column-three footer-column-right"> <section id="nav_menu-5" class="fbox widget widget_nav_menu"><div class="swidget"><h3 class="widget-title">Hot Blogs</h3></div><div class="menu-footer-menu-2-container"><ul id="menu-footer-menu-2" class="menu"><li id="menu-item-409" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-409"><a href="https://webdesigninghouse.com/business/which-is-the-best-ai-chatbot-available-today/">Which is the best AI chatbot available today?</a></li> <li id="menu-item-410" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-410"><a href="https://webdesigninghouse.com/business/how-does-open-ai-revolutionize-artificial-intelligence/">How does Open AI revolutionize artificial intelligence?</a></li> <li id="menu-item-411" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-411"><a href="https://webdesigninghouse.com/business/what-is-openai-and-what-products-do-they-offer/">What is OpenAI, and what products do they offer?</a></li> <li id="menu-item-412" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-412"><a href="https://webdesigninghouse.com/business/what-are-the-top-uses-of-ai-in-2025/">What are the top uses of AI in 2025?</a></li> <li id="menu-item-413" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-413"><a href="https://webdesigninghouse.com/business/what-is-chapgpt-and-how-is-it-different-from-chatgpt/">What is ChapGPT, and how is it different from ChatGPT?</a></li> </ul></div></section> </div> <div class="site-info"> ©2025 Tech | Business | Education | Awareness Articles <!-- Delete below lines to remove copyright from footer --> <!-- <span class="footer-info-right"> | Design: <a href="https://superbthemes.com/" rel="nofollow noopener">Newspaperly WordPress Theme</a> </span> --> <!-- Delete above lines to remove copyright from footer --> </div> </div> </footer><!-- #colophon --> </div> </div><!-- #page --> <div id="smobile-menu" class="mobile-only"></div> <div id="mobile-menu-overlay"></div> <script type="text/javascript" src="https://webdesigninghouse.com/wp-content/themes/newspaperly/js/navigation.js?ver=20170823" id="newspaperly-navigation-js"></script> <script type="text/javascript" src="https://webdesigninghouse.com/wp-content/themes/newspaperly/js/skip-link-focus-fix.js?ver=20170823" id="newspaperly-skip-link-focus-fix-js"></script> <script type="text/javascript" src="https://webdesigninghouse.com/wp-content/themes/newspaperly/js/jquery.flexslider.js?ver=20150423" id="newspaperly-flexslider-jquery-js"></script> <script type="text/javascript" src="https://webdesigninghouse.com/wp-content/themes/newspaperly/js/script.js?ver=20160720" id="newspaperly-script-js"></script> <script type="text/javascript" src="https://webdesigninghouse.com/wp-content/themes/newspaperly/js/accessibility.js?ver=20160720" id="newspaperly-accessibility-js"></script> <script type="text/javascript" src="https://webdesigninghouse.com/wp-includes/js/comment-reply.min.js?ver=6.7.2" id="comment-reply-js" async="async" data-wp-strategy="async"></script> </body> </html> <!-- Page cached by LiteSpeed Cache 7.1 on 2025-06-22 11:07:40 -->