Skip to content

Instantly share code, notes, and snippets.

@kingluddite

kingluddite/about.md

Last active February 10, 2024 13:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kingluddite/815213fc3adb78c9a2aa6f0a75cd8106 to your computer and use it in GitHub Desktop.
Save kingluddite/815213fc3adb78c9a2aa6f0a75cd8106 to your computer and use it in GitHub Desktop.
Download ZIP
HTML Boilerplate
Raw
about.md

Certainly! Here's an "About" HTML page for the deli using only semantic HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us - Corner Deli</title>
</head>
<body>
    <header>
        <h1>About Us</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="menu.html">Menu</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section>
            <h2>Our Story</h2>
            <p>Corner Deli has been a part of the community for over two decades. Founded in 1995 by John and Mary Smith, our deli has been serving delicious sandwiches, salads, and more, made with fresh, locally-sourced ingredients.</p>
        </section>
        
        <section>
            <h2>Our Mission</h2>
            <p>At Corner Deli, our mission is to provide our customers with wholesome, satisfying meals in a friendly and welcoming environment. We strive to support local farmers and businesses, while also reducing our environmental impact through sustainable practices.</p>
        </section>
        
        <section>
            <h2>Meet the Team</h2>
            <p>Our team is comprised of passionate individuals dedicated to delivering exceptional service and quality food to our customers. From our chefs crafting delicious dishes to our friendly staff serving with a smile, we are here to make your dining experience memorable.</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Corner Deli. All rights reserved.</p>
    </footer>
</body>
</html>

In this HTML code:

  • <header>: Contains the main heading of the page and navigation links.
  • <nav>: Defines a navigation section containing links to other pages.
  • <main>: Contains the main content of the page.
  • <section>: Divides the content into meaningful sections, such as "Our Story", "Our Mission", and "Meet the Team".
  • <h1>, <h2>: Represent headings to organize the content hierarchically.
  • <p>: Represents paragraphs of text.
  • <footer>: Contains copyright information.
Raw
contact.md

Here's an example of a contact HTML page with a form to take an order from the shop using semantic HTML. I'll include both block and inline elements to demonstrate the difference:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us - Corner Deli</title>
</head>
<body>
    <header>
        <h1>Contact Us</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="menu.html">Menu</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section>
            <h2>Place Your Order</h2>
            <form action="/submit-order" method="post">
                <label for="name">Your Name:</label>
                <input type="text" id="name" name="name" required>
                
                <label for="email">Your Email:</label>
                <input type="email" id="email" name="email" required>
                
                <label for="order">Your Order:</label>
                <textarea id="order" name="order" rows="4" required></textarea>
                
                <button type="submit">Submit Order</button>
            </form>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Corner Deli. All rights reserved.</p>
    </footer>
</body>
</html>

In this example:

  • Block Elements: <label>, <input>, <textarea>, and <button> elements are block-level elements. They start on a new line and take up the full width available by default.
  • Inline Elements: <a> elements inside the navigation menu are inline-level elements. They do not start on a new line and only occupy the necessary width for their content. Additionally, the <button> element in the form has been styled to be an inline-block element for demonstration purposes.

This example showcases both block and inline elements and demonstrates their behavior in terms of layout and spacing.

Raw
file-folder-naming-convention.md

Not having spaces in file names and using all lowercase file and folder names, as well as kebab case for separating words with dashes, are good naming conventions in HTML and web development for several reasons:

  1. URL Friendliness: Web servers and web browsers interpret spaces in URLs as special characters, which can lead to encoding issues and potentially break links. Using dashes instead of spaces ensures that URLs are readable, clean, and easily shareable.

  2. Consistency: Using all lowercase letters for file and folder names ensures consistency across different operating systems and file systems. File systems on some platforms, such as Linux, are case-sensitive, meaning that "MyFile.html" and "myfile.html" would be considered different files. By using all lowercase, you avoid confusion and potential issues when deploying to different environments.

  3. Ease of Typing: Typing file and folder names in all lowercase with dashes instead of spaces is generally easier and faster, especially when working with command-line interfaces or coding editors that do not have autocomplete features.

  4. Compatibility: Some web servers or hosting platforms may have restrictions on file names, such as disallowing spaces or requiring lowercase filenames. Adhering to these conventions ensures that your files and folders are compatible with a wide range of systems and services.

  5. SEO Benefits: Search engines may interpret URLs with spaces as less user-friendly and may not rank them as well. Using kebab case in URLs can potentially improve search engine optimization (SEO) by making URLs more readable and relevant to the content they represent.

  6. Readability and Maintainability: Using kebab case with all lowercase letters enhances the readability and maintainability of your codebase. It makes it easier for developers to understand file and folder names, reducing the risk of errors and confusion when navigating or modifying the code.

In summary, adopting these naming conventions promotes consistency, compatibility, readability, and SEO-friendliness in web development projects, ultimately contributing to better user experiences and smoother development workflows.

Raw
html-boilerplate.md 
<!DOCTYPE html> <!-- Specifies the document type and version of HTML -->
<html lang="en"> <!-- The root element of the HTML document, with the language attribute set to English -->
<head> <!-- Contains meta-information about the HTML document -->
    <meta charset="UTF-8"> <!-- Specifies the character encoding for the document as UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Sets the viewport properties for responsive design -->
    <title>Untitled Document</title> <!-- Specifies the title of the document -->
</head>
<body> <!-- Contains the content of the HTML document -->
    <!-- Content goes here -->
</body>
</html>

This boilerplate HTML code includes comments describing the purpose of each HTML element:

  1. <!DOCTYPE html>: Declares the document type and version of HTML being used.
  2. <html lang="en">: The root element of the HTML document. It contains all other HTML elements. The lang attribute specifies the language of the document, in this case, English.
  3. <head>: Contains meta-information about the HTML document, such as character encoding, viewport settings, and document title.
  4. <meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8, which supports most characters and languages.
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport properties for responsive design, ensuring the page is displayed properly on various devices with different screen sizes.
  6. <title>Untitled Document</title>: Specifies the title of the HTML document, which appears in the browser's title bar or tab.
  7. <body>: Contains the content of the HTML document, such as text, images, links, and other elements.
  8. <!-- Content goes here -->: This comment indicates where the actual content of the webpage should be inserted.
Raw
html-home-page-deli.md

Below is a simple HTML home page for a corner deli that utilizes semantic heading elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Corner Deli</title>
</head>
<body>
    <header>
        <h1>Welcome to Corner Deli</h1>
        <nav>
            <ul>
                <li><a href="#about">About Us</a></li>
                <li><a href="#menu">Menu</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <section id="about">
        <h2>About Us</h2>
        <p>Corner Deli has been serving fresh sandwiches, salads, and more to the local community since 1995. We take pride in using high-quality ingredients and providing excellent customer service.</p>
    </section>
    
    <section id="menu">
        <h2>Menu</h2>
        <h3>Sandwiches</h3>
        <ul>
            <li>Classic BLT</li>
            <li>Turkey Club</li>
            <li>Vegetarian Wrap</li>
        </ul>
        <h3>Salads</h3>
        <ul>
            <li>Garden Salad</li>
            <li>Caesar Salad</li>
            <li>Cobb Salad</li>
        </ul>
    </section>
    
    <section id="contact">
        <h2>Contact</h2>
        <p>Visit us at:</p>
        <address>
            123 Main Street<br>
            City, State 12345<br>
            Phone: 123-456-7890<br>
            Email: info@cornerdeli.com
        </address>
    </section>

    <footer>
        <p>&copy; 2024 Corner Deli. All rights reserved.</p>
    </footer>
</body>
</html>

In this HTML code:

  • <header>: Contains the main heading of the page along with navigation links.
  • <nav>: Defines a navigation section containing links to different sections of the page.
  • <section>: Divides the content into semantic sections such as "About Us", "Menu", and "Contact".
  • <h1>, <h2>, <h3>: Represent different levels of headings to organize the content hierarchically.
  • <ul> and <li>: Used to create lists for menu items.
  • <address>: Indicates contact information.
  • <footer>: Contains copyright information.
Raw
html-table.md

Certainly! Below is an example of a simple HTML table followed by a more complex table showcasing the open hours of the deli:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Corner Deli - Tables</title>
</head>
<body>
    <header>
        <h1>Welcome to Corner Deli</h1>
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#menu">Menu</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section>
            <h2>Simple HTML Table</h2>
            <table border="1">
                <tr>
                    <th>Name</th>
                    <th>Price</th>
                </tr>
                <tr>
                    <td>Classic BLT</td>
                    <td>$6.99</td>
                </tr>
                <tr>
                    <td>Turkey Club</td>
                    <td>$7.99</td>
                </tr>
            </table>
        </section>
        
        <section>
            <h2>Open Hours</h2>
            <table border="1">
                <tr>
                    <th>Day</th>
                    <th>Opening Time</th>
                    <th>Closing Time</th>
                </tr>
                <tr>
                    <td>Monday</td>
                    <td>8:00 AM</td>
                    <td>6:00 PM</td>
                </tr>
                <tr>
                    <td>Tuesday</td>
                    <td>8:00 AM</td>
                    <td>6:00 PM</td>
                </tr>
                <tr>
                    <td>Wednesday</td>
                    <td>8:00 AM</td>
                    <td>6:00 PM</td>
                </tr>
                <tr>
                    <td>Thursday</td>
                    <td>8:00 AM</td>
                    <td>8:00 PM</td>
                </tr>
                <tr>
                    <td>Friday</td>
                    <td>8:00 AM</td>
                    <td>8:00 PM</td>
                </tr>
                <tr>
                    <td>Saturday</td>
                    <td>9:00 AM</td>
                    <td>5:00 PM</td>
                </tr>
                <tr>
                    <td>Sunday</td>
                    <td>Closed</td>
                    <td>Closed</td>
                </tr>
            </table>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Corner Deli. All rights reserved.</p>
    </footer>
</body>
</html>

In this example:

  • The first table is a simple table displaying the name and price of sandwiches.
  • The second table is more complex, showcasing the open hours of the deli throughout the week, including different opening and closing times for each day. Additionally, it includes a row indicating the deli is closed on Sundays.
Raw
html-validator.md

An HTML validator is a tool used to check the syntax and structure of HTML code to ensure that it follows the rules and standards set by the HTML specification. These tools analyze HTML code for errors, inconsistencies, and deprecated elements, providing feedback on potential issues that could affect the rendering and functionality of web pages.

Here are some reasons why an HTML validator is a useful tool:

  1. Error Detection: Validators can identify syntax errors, missing tags, and other mistakes in the HTML code that might cause rendering issues or unexpected behavior in web browsers.

  2. Standard Compliance: HTML validators ensure that your code complies with the official HTML specifications (such as HTML5), helping you write clean, valid HTML that works consistently across different browsers and devices.

  3. Accessibility: Validators can detect accessibility issues such as missing alt attributes for images or improper use of ARIA roles, helping to improve the accessibility of your web content for users with disabilities.

  4. Cross-Browser Compatibility: By ensuring that your HTML code is valid, validators can help mitigate compatibility issues across different web browsers, ensuring a consistent experience for users.

  5. Improved SEO: Valid HTML code is often favored by search engines, as it indicates well-structured and semantically meaningful content. Using a validator can help improve your website's search engine optimization (SEO) by ensuring clean HTML markup.

  6. Code Quality: Validators encourage good coding practices by highlighting areas where your HTML code can be improved or optimized, leading to cleaner, more maintainable codebases.

Overall, HTML validators are essential tools for web developers and designers to ensure the quality, consistency, and compliance of their HTML code, ultimately leading to better-performing and more accessible websites.

Raw
inline-vs-block.md

Certainly! Below is the updated HTML page with an image using a placeholder image, and examples of <strong> and <span> tags:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Corner Deli - Inline vs Block Elements</title>
</head>
<body>
    <header>
        <h1>Welcome to Corner Deli</h1>
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#menu">Menu</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="about">
            <h2>About Us</h2>
            <p>Corner Deli has been serving fresh sandwiches, salads, and more to the local community since 1995.</p>
            <p>We take pride in providing <strong>excellent customer service</strong> and using high-quality ingredients sourced from local farmers.</p>
            <p>Here's a <span>snapshot</span> of our shop:</p>
            <img src="https://via.placeholder.com/300" alt="Corner Deli Interior">
        </section>
        
        <section id="menu">
            <h2>Menu</h2>
            <ul>
                <li>Sandwiches:</li>
                <ul>
                    <li>Classic BLT</li>
                    <li>Turkey Club</li>
                    <li>Veggie Delight</li>
                </ul>
                <li>Salads:</li>
                <ul>
                    <li>Garden Salad</li>
                    <li>Caesar Salad</li>
                    <li>Fruit Salad</li>
                </ul>
            </ul>
        </section>
        
        <section id="contact">
            <h2>Contact</h2>
            <p>Visit us at:</p>
            <address>
                123 Main Street<br>
                City, State 12345<br>
                Phone: 123-456-7890<br>
                Email: info@cornerdeli.com
            </address>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Corner Deli. All rights reserved.</p>
    </footer>
</body>
</html>

In this updated example:

  • <strong>: Used to emphasize important text ("excellent customer service").
  • <span>: Used to apply styling or provide a hook for JavaScript, without adding any semantic meaning.
  • <img>: Inserts an image into the page. In this case, a placeholder image is used with the src attribute pointing to "https://via.placeholder.com/300".
Raw
non-semantic-html.md

Here's the same HTML structure for a corner deli home page, but this time, using only <div> elements without semantically meaningful tags:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Corner Deli</title>
</head>
<body>
    <div class="header">
        <div class="heading">
            <h1>Welcome to Corner Deli</h1>
        </div>
        <div class="navigation">
            <ul>
                <li><a href="#about">About Us</a></li>
                <li><a href="#menu">Menu</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
    
    <div class="about-section" id="about">
        <div class="heading">
            <h2>About Us</h2>
        </div>
        <div class="content">
            <p>Corner Deli has been serving fresh sandwiches, salads, and more to the local community since 1995. We take pride in using high-quality ingredients and providing excellent customer service.</p>
        </div>
    </div>
    
    <div class="menu-section" id="menu">
        <div class="heading">
            <h2>Menu</h2>
        </div>
        <div class="content">
            <div class="menu-category">
                <h3>Sandwiches</h3>
                <ul>
                    <li>Classic BLT</li>
                    <li>Turkey Club</li>
                    <li>Vegetarian Wrap</li>
                </ul>
            </div>
            <div class="menu-category">
                <h3>Salads</h3>
                <ul>
                    <li>Garden Salad</li>
                    <li>Caesar Salad</li>
                    <li>Cobb Salad</li>
                </ul>
            </div>
        </div>
    </div>
    
    <div class="contact-section" id="contact">
        <div class="heading">
            <h2>Contact</h2>
        </div>
        <div class="content">
            <p>Visit us at:</p>
            <div class="contact-info">
                <p>123 Main Street</p>
                <p>City, State 12345</p>
                <p>Phone: 123-456-7890</p>
                <p>Email: info@cornerdeli.com</p>
            </div>
        </div>
    </div>

    <div class="footer">
        <p>&copy; 2024 Corner Deli. All rights reserved.</p>
    </div>
</body>
</html>

In this HTML code:

  • <div> elements are used for structuring the layout and dividing the content into sections.
  • Class attributes are utilized to apply CSS styles or JavaScript functionality to specific elements.
  • Semantic meaning is not conveyed by the tags themselves; instead, it relies on classes for styling and organization.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment