<table>
                    <tr>
                        <th></th>
                        <th scope="col">Column 1</th>
                        <th scope="col">Column 2</th>
                    </tr>
                    <tr>
                        <th scope="row">Row Header</th>
                        <td>Table Data</td>
                        <td>Table Data</td>
                    </tr>
                </table>
            

                <table>
                    <!-- Table Head -->
                    <thead>
                        <tr>
                            <th></th>
                            <th scope="col">Column 1</th>
                            <th scope="col">Column 2</th>
                        </tr>
                    </thead>

                    <!-- Table Body -->
                    <tbody>
                        <tr>
                            <th scope="row">Row Header</th>
                            <td>Table Data</td>
                            <td>Table Data</td>
                        </tr>
                    </tbody>

                    <!-- Table Footer -->
                    <tfoot>
                        <tr>
                            <th>Table Footer</th>
                            <td> </td>
                            <td> </td>
                        </tr>
                    </tfoot>
                </table>
            

• Section off long tables.
• thead only contain table headings.
• tbody contains all table data.
• tfoot usually contain sums, differences, and other data results.

                <!-- Column Span -->
                <td colspan="2">This column spans 2 columns</td>

                <!-- Row Span -->
                <td rowspan="2">This row spans 2 rows</td>
            

• Takes an integer (>= 1) to denote the number of columns/rows it spans across.

                <!-- Method 1: header tag -->
                <header>
                    <!-- Navigation or introductory content -->
                </header>

                <!-- Method 2: div tag with header id -->
                <div id="header>
                    <!-- Navigation or introductory content -->
                </div>
            

• Usually contains navigational links or introductory content.

                <footer>
                    <!-- footer content -->
                </footer>
            

Usually contains:
• Contact information
• Copyright information
• Terms of use
• Site Map
• Reference to page links

                <section>
                    <article>
                        <!-- body content -->
                    </article>
                </section>
            

Section:
• Used to split chapters, headings, topics, theme, etc.

Article:
• Contains the body of each section.

                <aside>
                    <!-- aside content -->
                </aside>
            

• Used to mark additional information that isn't required in order to understand the main content.

Example:
• Bibliographies
• Endnotes
• Comments
• Pull quotes
• Editorial sidebars

                <figure>
                    <img src="image-link">
                    <figcaption>Image Description</figcaption>
                </figure>
            

• figcaption - Adds an image description to the bottom of a figure.

                <audio controls>
                    <source src="audio-file-link/url" type="audio/mp3">
                </audio>
            

• controls: shows the audio controls on the browser such as play and mute.

                <video src="video-file-link/url" controls>
                    Video not supported
                </video>

                <!-- Attaching Gifs -->
                <embed src="gif-file-link/url"/>
            

• controls: shows the play/pause button, volume control and a fullscreen option on the browser.
• autoplay: automatically plays the video as soon as page is loaded.
• loop: loops/plays the video repeatedly.

3 ways of adding CSS to HTML: Inline Styles, Internal Stylesheet & External Stylesheet.

• border-width - e.g. 1px
• border-style - e.g. solid
• border-color - e.g. black

• Controls what happens to content that overflows outside of its box.

                element-name { }

                .class-name { }
                
                #id-name { }
                
                [attribute-name]{ }

                :Pseudo-class-name { }
            

• Element, Class
• !important - override any style no matter how specific it is.

                * { 
                    margin: 0;
                    padding: 0;
                }
            

• Selects all elements on the HTML page.
• Also resets the default css styles of web browsers.

What's the difference between display: none and visibility: hidden?
• display: none; - element is completely removed from web page.
• visibility: hidden; - element is not visible on web page, but there's space reserved for it.