HTML / Basic / Semantic
HTML / Style / CSS

About 10068 letters

About 50 minutes

#Comprehensive Example

Primers Programming Companion

    
    

        
        

            Icon
            Primers Programming Companion
        

        
        
Welcome to Primers - Your Programming Learning Partner

    


    
    

    
    

        

            

                

                    HyperText Markup Language (HTML) is the standard markup language for creating web pages.
                    With HTML you can create your own website. HTML is easy to learn - you'll enjoy it!
                

            

            

                

                    
                        

                            Tag
                            Description
                            Example
                        

                    
                    
                        

                            <h1> to <h6>
                            Defines HTML headings
                            <h1>Main heading</h1> <h2>Subheading</h2>
                        

                        

                            <p>
                            Defines a paragraph
                            <p>This is a paragraph.</p>
                        

                        

                            <a>
                            Defines a hyperlink
                            <a href="https://example.com">Example link</a>
                        

                        

                            <img>
                            Defines an image
                            <img src="image.jpg" alt="Description">
                        

                        

                            <ul>, <ol>, <li>
                            Defines unordered lists, ordered lists and list items
                            
                                <ul>

                                  <li>Item 1</li>

                                  <li>Item 2</li>

                                </ul>
                            		
                        

                        

                            <div>
                            Defines a division or section
                            <div>Content block</div>
                        

                        

                            <span>
                            Defines an inline element
                            <span>Inline content</span>
                        

                        

                            <table>, <tr>, <td>, <th>
                            Defines tables, rows, cells and header cells
                            
                                <table>

                                  <tr>

                                    <th>Header</th>

                                    <td>Data</td>

                                  </tr>

                                </table>
                            		
                        

                    
                

            

        

    

    
    
    

    
    



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Primers Programming Companion</title>
</head>
<body>
    <!-- Header -->
    <header>
        <!-- Main title -->
        <h1>
            <img src="https://xplanc.org/primers/icon.svg" alt="Icon" width="32px" height="32px">
            Primers Programming Companion
        </h1>
        <!-- Subtitle -->
        <h2>Welcome to Primers - Your Programming Learning Partner</h2>
    </header>

    <!-- Navigation -->
    <nav>
        Navigation
        <a href="/primers/document/en/02.Python">Python Tutorial</a>
        <a href="/primers/document/en/03.HTML">HTML Tutorial</a>
    </nav>

    <!-- Main content -->
    <main>
        <article>
            <section>
                <p>
                    <strong>HyperText Markup Language (HTML)</strong> is the standard markup language for creating web pages.
                    With HTML you can create your own website. HTML is easy to learn - you'll enjoy it!
                </p>
            </section>
            <section>
                <table border="1">
                    <thead>
                        <tr>
                            <th>Tag</th>
                            <th>Description</th>
                            <th>Example</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>&lt;h1&gt; to &lt;h6&gt;</td>
                            <td>Defines HTML headings</td>
                            <td>&lt;h1&gt;Main heading&lt;/h1&gt; &lt;h2&gt;Subheading&lt;/h2&gt;</td>
                        </tr>
                        <tr>
                            <td>&lt;p&gt;</td>
                            <td>Defines a paragraph</td>
                            <td>&lt;p&gt;This is a paragraph.&lt;/p&gt;</td>
                        </tr>
                        <tr>
                            <td>&lt;a&gt;</td>
                            <td>Defines a hyperlink</td>
                            <td>&lt;a href="https://example.com"&gt;Example link&lt;/a&gt;</td>
                        </tr>
                        <tr>
                            <td>&lt;img&gt;</td>
                            <td>Defines an image</td>
                            <td>&lt;img src="image.jpg" alt="Description"&gt;</td>
                        </tr>
                        <tr>
                            <td>&lt;ul&gt;, &lt;ol&gt;, &lt;li&gt;</td>
                            <td>Defines unordered lists, ordered lists and list items</td>
                            <td>
                                &lt;ul&gt;<br>
                                &nbsp;&nbsp;&lt;li&gt;Item 1&lt;/li&gt;<br>
                                &nbsp;&nbsp;&lt;li&gt;Item 2&lt;/li&gt;<br>
                                &lt;/ul&gt;
                            </td>
                        </tr>
                        <tr>
                            <td>&lt;div&gt;</td>
                            <td>Defines a division or section</td>
                            <td>&lt;div&gt;Content block&lt;/div&gt;</td>
                        </tr>
                        <tr>
                            <td>&lt;span&gt;</td>
                            <td>Defines an inline element</td>
                            <td>&lt;span&gt;Inline content&lt;/span&gt;</td>
                        </tr>
                        <tr>
                            <td>&lt;table&gt;, &lt;tr&gt;, &lt;td&gt;, &lt;th&gt;</td>
                            <td>Defines tables, rows, cells and header cells</td>
                            <td>
                                &lt;table&gt;<br>
                                &nbsp;&nbsp;&lt;tr&gt;<br>
                                &nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Header&lt;/th&gt;<br>
                                &nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Data&lt;/td&gt;<br>
                                &nbsp;&nbsp;&lt;/tr&gt;<br>
                                &lt;/table&gt;
                            </td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </article>
    </main>
    
    <!-- Sidebar -->
    <aside>
        <ul>
            <li>
                <a href="/primers/document/en/03.HTML/01.Basics/00.Document%20Structure.md">Document Structure</a>
            </li>
            <li>
                <a href="/primers/document/en/03.HTML/01.Basics/01.Elements%20and%20Attributes.md">Elements and Attributes</a>
            </li>
            <li>
                <a href="/primers/document/en/03.HTML/01.Basics/02.Comments.md">Comments</a>
            </li>
        </ul>
    </aside>

    <!-- Footer -->
    <footer>
        <address>
            Author: Plan C<br>
            Email: <a href="mailto:////hubenchang0515@gmail.com">hubenchang0515@gmail.com</a>
        </address>
    </footer>
</body>
</html>

Created in 5/16/2025

Updated in 6/6/2025

HTML / Basic / Semantic
HTML / Style / CSS