HTML Tutorials

HTML - Project Overview

Sample Project Details in HTML

The "About My Favorite City" webpage will be built by the students. The page will have an organized design with the following elements:

  • <head> contains the metadata and page title.
  • a section heading bearing the name of the city.
  • a navigation bar that contains connections to the page's many parts.
  • The main information is divided into parts for entertaining facts, well-known locations, and a quick introduction.
  • A picture of the city.
  • a contact information footer.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About My Favorite City</title>
    <meta name="description" content="A simple HTML page about my favorite city, showcasing various HTML elements and structure.">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>New York City</h1>
        <nav>
            <ul>
                <li><a href="#introduction">Introduction</a></li>
                <li><a href="#places">Famous Places</a></li>
                <li><a href="#facts">Fun Facts</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="introduction">
            <h2>Introduction</h2>
            <p>New York City (NYC) is the most populous city in the United States. It is known for its significant impact on commerce, finance, media, art, and fashion.</p>
        </section>
        <section id="places">
            <h2>Famous Places</h2>
            <ul>
                <li>Statue of Liberty</li>
                <li>Central Park</li>
                <li>Empire State Building</li>
            </ul>
        </section>
        <section id="facts">
            <h2>Fun Facts</h2>
            <p>Did you know that the New York Public Library has over 50 million books and other items and is the second largest library system in the nation after the Library of Congress?</p>
        </section>
        <img src="new-york-city.jpg" alt="A view of New York City" width="500">
    </main>
    <footer>
        <p>Contact us: <a href="mailto:info@example.com">info@example.com</a></p>
    </footer>
</body>
</html>


Explanation of Code:

<!DOCTYPE html>: Indicates the HTML version and document type (in this case, HTML5).

<head> Section:

  • <meta charset="UTF-8">: Indicates the website's character encoding.
  • <title>: Modifies the title of the webpage shown in the browser tab.
  • <meta name="description">: Offers a succinct synopsis of the page, beneficial for search engine optimization.
  • <link>: Provides a URL for an external CSS style file (which isn't in this example, but can be added).

<header>:

  • includes the page's primary header (<h1>) and a navigation bar containing links that normally let visitors navigate to other parts of the page.

<main>:

  • includes several <section> elements, each devoted to a distinct content area such as an introduction, a list of well-known locations, or interesting information.
  • Every section consists of a header (<h2>) and content (lists or paragraphs).

<img>: Shows a picture of New York City, which is relevant to the content in this case.

<footer>: includes a mailto link for emails along with contact details.

This project improves learning and retention of HTML abilities by encouraging the actual use of semantic webpage organization in addition to introducing the fundamentals of HTML structure.

 

logo

HTML

Beginner 5 Hours

Sample Project Details in HTML

The "About My Favorite City" webpage will be built by the students. The page will have an organized design with the following elements:

  • <head> contains the metadata and page title.
  • a section heading bearing the name of the city.
  • a navigation bar that contains connections to the page's many parts.
  • The main information is divided into parts for entertaining facts, well-known locations, and a quick introduction.
  • A picture of the city.
  • a contact information footer.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About My Favorite City</title>
    <meta name="description" content="A simple HTML page about my favorite city, showcasing various HTML elements and structure.">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>New York City</h1>
        <nav>
            <ul>
                <li><a href="#introduction">Introduction</a></li>
                <li><a href="#places">Famous Places</a></li>
                <li><a href="#facts">Fun Facts</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="introduction">
            <h2>Introduction</h2>
            <p>New York City (NYC) is the most populous city in the United States. It is known for its significant impact on commerce, finance, media, art, and fashion.</p>
        </section>
        <section id="places">
            <h2>Famous Places</h2>
            <ul>
                <li>Statue of Liberty</li>
                <li>Central Park</li>
                <li>Empire State Building</li>
            </ul>
        </section>
        <section id="facts">
            <h2>Fun Facts</h2>
            <p>Did you know that the New York Public Library has over 50 million books and other items and is the second largest library system in the nation after the Library of Congress?</p>
        </section>
        <img src="new-york-city.jpg" alt="A view of New York City" width="500">
    </main>
    <footer>
        <p>Contact us: <a href="mailto:info@example.com">info@example.com</a></p>
    </footer>
</body>
</html>


Explanation of Code:

<!DOCTYPE html>: Indicates the HTML version and document type (in this case, HTML5).

<head> Section:

  • <meta charset="UTF-8">: Indicates the website's character encoding.
  • <title>: Modifies the title of the webpage shown in the browser tab.
  • <meta name="description">: Offers a succinct synopsis of the page, beneficial for search engine optimization.
  • <link>: Provides a URL for an external CSS style file (which isn't in this example, but can be added).

<header>:

  • includes the page's primary header (<h1>) and a navigation bar containing links that normally let visitors navigate to other parts of the page.

<main>:

  • includes several <section> elements, each devoted to a distinct content area such as an introduction, a list of well-known locations, or interesting information.
  • Every section consists of a header (<h2>) and content (lists or paragraphs).

<img>: Shows a picture of New York City, which is relevant to the content in this case.

<footer>: includes a mailto link for emails along with contact details.

This project improves learning and retention of HTML abilities by encouraging the actual use of semantic webpage organization in addition to introducing the fundamentals of HTML structure.

 

Related Tutorials

Frequently Asked Questions for HTML

  • HTML stands for HyperText Markup Language.
  • It is used to create the structure of web pages and web applications.
  • HTML defines elements such as headings, paragraphs, links, images, and other content.

  • Block-level elements (like <div>, <p>, <h1>) start on a new line and take full width.
  • Inline elements (like <span>, <a>, <strong>) stay within the flow of the text.
  • Understanding this helps with layout and styling.

  • A basic HTML page includes a <!DOCTYPE html> declaration, followed by <html>, <head>, and <body>.
  • The <head> section contains metadata like the title and links to stylesheets.
  • The <body> section contains all the visible content of the webpage.

  • The <meta> tag provides metadata such as page description, keywords, and author.
  • It helps browsers and search engines understand the content of the page.
  • One common use is specifying the character encoding: <meta charset="UTF-8">.

  • Forms collect user input using the <form> tag.
  • Inside a form, use <input>, <textarea>, <select>, and <button>.
  • The action attribute specifies where to send the form data.

  • The <label> tag defines a label for an input element.
  • It improves accessibility and allows users to click the label to focus the input.
    Example: <label for="email">Email:</label><input id="email">.

Comments in HTML are written between <!-- and -->.

Example:
<!-- This is a comment -->.
Comments are not displayed on the webpage and are used for documentation.

HTML entities are used to display reserved or special characters.

For example, &lt; displays < and &amp; displays &.
Use them to avoid confusion with actual HTML syntax.