HTML 5 tutorial html-tools.net

What is HTML?

HTML (HyperText Markup Language) is the standard language used to create web pages. HTML elements are represented by tags, which are used to structure the content on a webpage.

Basic Structure of an HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Web Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>Welcome to my first web page built with HTML5.</p>
</body>
</html>

Copy to Clipboard and try this html live

<!DOCTYPE html>: Declares that this is an HTML5 document.
<html>: The root element that contains all HTML content.
<head>: Contains meta-information about the document (e.g., character encoding, title).
<title>: Sets the title of the page (shown on the browser tab).
<body>: Contains the visible content of the web page.

Common HTML Tags

Headings Headings are used to define sections in a web page. HTML provides six levels of headings, from <h1> to <h6>, with <h1> being the most important.

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Another Subheading</h3>

Copy to Clipboard and try this html live

Paragraphs Use <p> tags to create paragraphs.

<p>This is a paragraph of text. HTML paragraphs are automatically separated by some space.</p>

Copy to Clipboard and try this html live

Links Links are created using the <a> tag. The href attribute specifies the destination URL.

<a href="https://www.example.com">Click here to visit Example.com</a>

Copy to Clipboard and try this html live

Images Use the <img> tag to embed images. The src attribute defines the image source, and the alt attribute provides alternative text.

<img src="image.jpg" alt="Description of the image">

Copy to Clipboard and try this html live

Lists There are two types of lists in HTML: ordered lists (<ol>) and unordered lists (<ul>).

Unordered list:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Copy to Clipboard and try this html live

Ordered list:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Tables Tables are defined using the <table> tag. Rows are created with <tr>, and table headers and cells are created with <th> and <td>, respectively.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
  </tr>
</table>

Copy to Clipboard and try this html live

Forms Forms allow user input. Use the <form> tag to create forms, with input fields like text boxes, radio buttons, checkboxes, and submit buttons.

<form action="submit_form.php" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br><br>
  <label for="age">Age:</label>
  <input type="number" id="age" name="age">
  <br><br>
  <input type="submit" value="Submit">
</form>

Copy to Clipboard and try this html live

Semantic HTML Elements

HTML5 introduces new semantic tags that provide more meaning to your web page structure.

<header>: Defines the header section of a document.
<nav>: Represents a navigation section with links.
<section>: Represents a section of content.
<article>: Represents an independent piece of content (like an article).
<footer>: Defines the footer section of a document.

Example:

<header>
  <h1>Welcome to My Website</h1>
  <nav>
    <a href="#home">Home</a> |
    <a href="#about">About</a> |
    <a href="#contact">Contact</a>
  </nav>
</header>

<section>
  <article>
    <h2>Article Title</h2>
    <p>This is the content of the article.</p>
  </article>
</section>

<footer>
  <p>&copy; 2024 My Website</p>
</footer>

Copy to Clipboard and try this html live

Example:

Below is a fully functional HTML example that incorporates common HTML tags as well as all the main HTML5 semantic tags like <header>, <nav>, <article>, <section>, <aside>, and <footer>.

Important note: The CSS section <style> we’ll be studying further in the following tutorial. CSS Styles tutorial.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample HTML5 Page</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      line-height: 1.6;
    }
    header, footer {
      background-color: #333;
      color: white;
      padding: 1em;
      text-align: center;
    }
    nav a {
      margin: 0 15px;
      color: white;
      text-decoration: none;
    }
    section {
      display: flex;
      padding: 20px;
    }
    article {
      flex: 3;
      padding-right: 20px;
    }
    aside {
      flex: 1;
      background-color: #f4f4f4;
      padding: 20px;
      margin-left: 20px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
    }
    th {
      background-color: #333;
      color: white;
    }
  </style>
</head>
<body>

  <!-- Header Section -->
  <header>
    <h1>My Awesome Website</h1>
    <nav>
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#services">Services</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <!-- Main Content Section -->
  <section>
    
    <!-- Main Article Content -->
    <article>
      <h2>Welcome to My Website</h2>
      <p>This is a sample webpage demonstrating various common HTML tags and HTML5 semantic elements. Explore the different sections, articles, and learn how a webpage is structured.</p>
      
      <h3>Image Example</h3>
      <p>Here’s an example of an image:</p>
      <img src="https://via.placeholder.com/400" alt="Sample Image" style="width:100%;">

      <h3>List Examples</h3>
      <p>Here’s an unordered list:</p>
      <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
      </ul>

      <p>And an ordered list:</p>
      <ol>
        <li>Step one</li>
        <li>Step two</li>
        <li>Step three</li>
      </ol>

      <h3>Table Example</h3>
      <p>Below is an example of a table:</p>
      <table>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Occupation</th>
        </tr>
        <tr>
          <td>Alice</td>
          <td>28</td>
          <td>Engineer</td>
        </tr>
        <tr>
          <td>Bob</td>
          <td>32</td>
          <td>Designer</td>
        </tr>
        <tr>
          <td>Charlie</td>
          <td>24</td>
          <td>Developer</td>
        </tr>
      </table>

      <h3>Form Example</h3>
      <p>Here is an example form:</p>
      <form action="#" method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br><br>
        <input type="submit" value="Submit">
      </form>
    </article>
    
    <!-- Aside Content -->
    <aside>
      <h3>About the Author</h3>
      <p>Hello! I’m John Doe, a web developer passionate about creating beautiful and functional websites.</p>

      <h3>Useful Links</h3>
      <ul>
        <li><a href="https://www.w3schools.com">W3Schools</a></li>
        <li><a href="https://developer.mozilla.org">MDN Web Docs</a></li>
      </ul>
    </aside>

  </section>

  <!-- Footer Section -->
  <footer>
    <p>&copy; 2024 My Awesome Website</p>
    <p><a href="#privacy" style="color: white;">Privacy Policy</a></p>
  </footer>

</body>
</html>

Copy to Clipboard and try this html live

Explanation:

Header (<header>): Contains the title of the website and navigation links.
Navigation (<nav>): Includes navigation links to different sections of the website.
Section (<section>): Contains the main content and is divided into two parts: the article and the aside.
Article (<article>): Represents the primary content (text, images, lists, tables, and forms).
Aside (<aside>): Contains supplementary content, such as the “About the Author” and “Useful Links” sections.
Footer (<footer>): Contains copyright information and additional links.

This example uses most of the common HTML tags, such as headings (<h1> to <h3>), paragraphs (<p>), images (<img>), links (<a>), lists (<ul>, <ol>), tables (<table>), and forms (<form>), and combines them with semantic HTML5 tags like <header>, <nav>, <section>, <article>, <aside>, and <footer>.

Conclusion

This tutorial introduced the basic structure of an HTML document and common HTML tags such as headings, paragraphs, links, images, lists, tables, and forms. HTML5 also provides semantic elements to give meaning to your content. Practice writing simple web pages using these tags to improve your skills.