over40dev/html-basics.html

## html-basics.html
<!DOCTYPE html>
<html lang="en">
<!-- See Kevin Powell (KP) [https://youtu.be/HJ0-fUJ-2F0] for definitions -->
<!-- <head> is our meta data (not visible on page) -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Basics</title>
</head>
<!-- <body> is our visible content -->
<body>
    <!-- <header> is a Semantic tag
    | KP: "Often used for the logo and navigation area on a page, but can also be used
        within other elements (such as an article), to denote the heading for that
        section of content" -->
    <header>
        This is my Header Section
        <nav>
        <!-- <nav> is a Semantic tag
        | KP: "Used for major navigational elements
            (not all links, or lists of links must be in a nav)"
        | KP: "If you have multiple nav elements, they should contain context for their
            purpose, with either an aria-label or aria-labelled-by. You can follow this link
            for more information [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role#labeling_landmarks]" -->

        </nav>
    </header>
    <!-- <main> is a Semantic tag
    | KP: "The main content of your page (only one per page)" -->
    <main>
        <!-- <section> is a Semantic tag
        | use 1 or more Sections
        | KP: "Section of content on your web page
        | vs Articles can stand of their own -->
        <section>
            <!-- KP: "Think of <h1> to <h6> like an Outline or Table of Contents" -->
            <h2>Some Recent Articles</h2>
            <!-- <div> is NOT a Semantic tag
            | KP: "A division (or box) - no semantic meaning.
            | These are used to organize your content, generally so you can style layouts with CSS"
            | KP: "use div when no Semantic tag makes sense
            | (generally better to use div than wrong Semantic tag)" -->
            <div class="container">
                <!-- <article> is a Semantic tag
                | KP: "A piece of content on your page that can stand on it's own" -->
                <article>
                    <h3>Lorem ipsum dolor sit amet.</h3>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus, sapiente?</p>
                    <a href="">Lorem ipsum dolor sit amet.</a>
                </article>
                <article>
                    <h3>Lorem ipsum dolor sit amet.</h3>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus, sapiente?</p>
                    <a href="">Lorem ipsum dolor sit amet.</a>
                </article>
                <article>
                    <h3>Lorem ipsum dolor sit amet.</h3>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus, sapiente?</p>
                    <a href="">Lorem ipsum dolor sit amet.</a>
                </article>
            </div>
        </section>

    </main>
    <!-- <footer> is a Semantic tag -->
    <!-- KP: "Like <header>, it is often used as the primary footer for an entire page, but you
        can have footers within other elements as well" -->
    <footer>This is my Footer Section</footer>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">
	<!-- See Kevin Powell (KP) [https://youtu.be/HJ0-fUJ-2F0] for definitions -->
	<!-- <head> is our meta data (not visible on page) -->
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>HTML Basics</title>
	</head>
	<!-- <body> is our visible content -->
	<body>
	<!-- <header> is a Semantic tag
	\| KP: "Often used for the logo and navigation area on a page, but can also be used
	within other elements (such as an article), to denote the heading for that
	section of content" -->
	<header>
	This is my Header Section
	<nav>
	<!-- <nav> is a Semantic tag
	\| KP: "Used for major navigational elements
	(not all links, or lists of links must be in a nav)"
	\| KP: "If you have multiple nav elements, they should contain context for their
	purpose, with either an aria-label or aria-labelled-by. You can follow this link
	for more information [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role#labeling_landmarks]" -->

	</nav>
	</header>
	<!-- <main> is a Semantic tag
	\| KP: "The main content of your page (only one per page)" -->
	<main>
	<!-- <section> is a Semantic tag
	\| use 1 or more Sections
	\| KP: "Section of content on your web page
	\| vs Articles can stand of their own -->
	<section>
	<!-- KP: "Think of <h1> to <h6> like an Outline or Table of Contents" -->
	<h2>Some Recent Articles</h2>
	<!-- <div> is NOT a Semantic tag
	\| KP: "A division (or box) - no semantic meaning.
	\| These are used to organize your content, generally so you can style layouts with CSS"
	\| KP: "use div when no Semantic tag makes sense
	\| (generally better to use div than wrong Semantic tag)" -->
	<div class="container">
	<!-- <article> is a Semantic tag
	\| KP: "A piece of content on your page that can stand on it's own" -->
	<article>
	<h3>Lorem ipsum dolor sit amet.</h3>
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus, sapiente?</p>
	<a href="">Lorem ipsum dolor sit amet.</a>
	</article>
	<article>
	<h3>Lorem ipsum dolor sit amet.</h3>
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus, sapiente?</p>
	<a href="">Lorem ipsum dolor sit amet.</a>
	</article>
	<article>
	<h3>Lorem ipsum dolor sit amet.</h3>
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus, sapiente?</p>
	<a href="">Lorem ipsum dolor sit amet.</a>
	</article>
	</div>
	</section>

	</main>
	<!-- <footer> is a Semantic tag -->
	<!-- KP: "Like <header>, it is often used as the primary footer for an entire page, but you
	can have footers within other elements as well" -->
	<footer>This is my Footer Section</footer>
	</body>

	</html>