Hypertext Markup  «Prev  Next»

Lesson 7 Creating an HTML page
Objective Demonstrate HTML code to create a simple Web page.

Creating an HTML Page

View the code below to see an example of HTML 5 source code.
Amodernized version of your HTML file updated to comply with HTML5 standards, including semantic tags, metadata improvements, and structural enhancements. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Asteron Interactive Toys | About Us</title>
    <meta name="description" content="Learn about the rich history and innovative focus of Asteron Interactive Toys.">
    <meta name="keywords" content="Asteron, Interactive Toys, About Us, Company History">
</head>
<body>
    <header>
        <h1>Asteron Interactive Toys</h1>
    </header>
    <main>
        <section>
            <h2>Company History</h2>
            <p>
                The story of Asteron Interactive Toys is well known to every child and adult.
                From its start as a tiny Kansas toy shop building wooden rocketships in the 
                1940s to today's line of innovative products that make it a Fortune 500 company, 
                Asteron has captured the hearts and minds of millions. Its rise to fame in the 50s 
                with everyone's favorite, Asteron 2000 Space Explorer, tells the classic tale of a 
                successful American company, now an international phenomenon.
            </p>
        </section>
        <section>
            <h2>Asteron's Focus</h2>
            <p>
                Asteron's focus has changed through the years as well. "The Asteron Toy 
                Company" added "Interactive" when the company revamped its product line 
                in the late 60s with toys that encouraged children to play with each other, 
                not just with the toys.
            </p>
        </section>
    </main>
    <footer>
        <p>© 2025 Asteron Interactive Toys. All rights reserved.</p>
    </footer>
</body>
</html>

Key Updates:
  1. DOCTYPE: Updated to the modern `<!DOCTYPE html>`.
  2. Character Encoding: Added `` for proper character encoding.
  3. Responsive Design: Included `` for responsive behavior on mobile devices.
  4. Semantic Structure: Replaced `

    ` tags with `
    `, `
    `, `
    `, and `
    ` for better semantic meaning and accessibility.

  5. Improved Metadata: Refined the description and keywords for modern SEO practices.
  6. Accessibility: Used <h2> for subsections to maintain proper heading hierarchy under <h1>.

This version is fully compliant with HTML5 standards and follows best practices for modern web development.

HTML code displayed by a Browser

The screenshot below shows how a browser would display the same code.
HTML code fragment displayed in Microsoft MS Edge
HTML code fragment displayed in Microsoft MS Edge

  • Legacy Frames in HTML
    Frames are a legacy component of HTML 4 and should no longer be used.
    Jakob Nielsen, the author of several usability books, wrote an article in 1996 that criticized frames. Some key points mentioned in the article are:
    1. Frames prevent users from properly bookmarking pages. When a bookmarked frameset page is loaded, the previous mouse clicks of the user inside the frames do not matter. Only the outer URL is saved and users have to navigate to where they were manually.
    2. Frames present challenges for printing web pages. Printing all the frames at once is not suited to the different dimensions of paper (and users can get only the first pageful that way). Users generally have to right-click the frame they want and choose the appropriate context menu option.
    3. Users coming from search engines may not have access to navigational elements if they are located in another frame and they are directed to only that frame the search engine found the text in.

    Chances are good that if you see a column of text, graphics, or links that do not scroll when other portions of a page do, that site is using frames.
    The home page for the popular YahooYahoo Web site does not use frames. Frames are no longer used because of challenges that they create with useability. The most common markup language used for mobile web sites is HTML5 as of April 2019.
    There are 2 basic platforms used for mobile devices. They are
    1. iOS for Apple
    2. Android platform
    HTML5 is currently being implemented for the mobile web as well HTML5 applications. This standard ensures specific markup for your web site that works best on mobile devices. For instance, it does not allow HTML frames or nested tables, which perform poorly on mobile devices. Along with the DOCTYPE, be sure to declare the appropriate character encoding for the document (such as UTF-8). 

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">

To see other examples of HTML code, look at other Web pages. To see the code that created the page, follow the instructions for your particular browser shown in the table below. You can select view source from the browser to examine the HTML, CSS, and Javascript.

Browsers currently available:

There are many more web browsers available. These are the major options on the major platforms, and were chosen specifically from browsers that are actively developed or maintained and support modern web standards (HTML, CSS, JavaScript).
Major Browsers: Windows, Mac & Linux
  1. Features: Web · Email · RSS · Chat · Phishing Filter · Widgets · Sync · Turbo Mode
  2. Import: Bookmarks from Firefox, Safari, or generic HTML file; Mail from Outlook Express, Thunderbird, Apple Mail, Eudora, or generic mbox file.
    3. Apple Mail still exists as an email client. It comes pre-installed on Apple devices such as Macs, iPhones, and iPads, and allows users to send, receive, and manage their email. Apple continues to update and improve the Mail app with new features and security enhancements.

BitTorrent BitTorrent is not specifically offered as a service for Firefox browser. Instead, BitTorrent Web is a web-based torrent client that can be accessed from any browser, including Firefox. This allows users to download and stream torrents directly from their browser. Additionally, BitTorrent offers a desktop application, BitTorrent Classic, which provides more advanced features for torrent management. However, this application is not exclusive to Firefox and can be used with any browser. It's worth noting that BitTorrent Web has both free and paid versions, with the paid versions offering additional features such as ad-free experience, built-in antivirus scanning, and premium customer support .
  • Google Chrome:
    In 2008, Google stripped down the web browser to its essentials and rethought basic assumptions about what a browser should do. Focused on enhanced performance for web applications, Chrome stays out of your way and lets you focus on the web itself. Chrome uses the WebKit engine (like Safari) and is similar to the default web browser on the Android mobile phone platform.
    1. Features: Web · Private Browsing · Malware/Phishing Filter
    2. Import: Bookmarks, History and Passwords from MS Edge or Firefox.
    3. Download Chrome for Windows, Macintosh or Linux. Free.
  • Firefox:
    Mozilla Firefox has been the most successful alternative web browser since the “browser wars” ended. The flagship product of the Mozilla Foundation traces its lineage back to the original Netscape. Firefox was designed for simplicity, security, and extensibility, with hundreds of extensions available. The Mozilla Thunderbird mail & news client is a perfect companion. Both applications are open-source. A Firefox Products is available for Android.
    1. Features: Web · RSS headlines · Extensions for chat, customization, etc. · Malware/Phishing Filter
    2. Import: All settings from MS Edge, Opera, Mozilla, bookmarks from generic HTML file.
    3. Download Firefox for Windows, Macintosh or Linux. Free.
    4. Read the Firefox Beginner's Guide.
  • Safari:
    Apple stunned the world in 2003 when they announced this browser for Mac OS X. It became so popular with Mac users that Microsoft stopped developing IE for the Mac! Safari is designed for elegance and speed, and is now both the default browser on the Mac and the most popular Macintosh browser. Safari is also the primary web browser on the iPhone, iPod Touch and iPad.
    Get Safari
    1. Features: Web · Private Browsing · RSS
    2. Import: Bookmarks from any browser.
    3. Download Safari for Macintosh. Free.

SEMrush Software 7 SEMrush Banner 7