Introduction

Overview

HTML stands for HyperText Markup Language. It is used on the front end and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.

Elements

HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear or act in a certain way. HTML elements are delineated by tags, written using angle brackets (< and >).

The anatomy of our element is:

The opening tag: This consists of the name of the element (in this example, p for paragraph), wrapped in opening and closing angle brackets. This opening tag marks where the element begins or starts to take effect. In this example, it precedes the start of the paragraph text.
The content: This is the content of the element. In this example, it is the paragraph text.
The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This marks where the element ends. Failing to include a closing tag is a common beginner error that can produce peculiar results.

Document structure

HTML documents include a document type declaration and the <html> root element. Nested in the <html> element are the document head and document body.

There are several features that should be considered essential for any and every web page. Browsers will still render content if these elements are missing but include them. Always.

`<!DOCTYPE html>`

The first thing in any HTML document is the preamble. For HTML, all you need is <!DOCTYPE html>. This may look like an HTML element, but it isn't. It's a special kind of node called "doctype". The doctype tells the browser to use standards mode. If omitted, browsers will use a different rendering mode known as quirks mode. Including the doctype helps prevent quirks mode.

`<html>`

The <html> element is the root element for an HTML document. It is the parent of the <head> and <body>, containing everything in the HTML document other than the doctype. If omitted it will be implied, but it is important to include it, as this is the element on which the language of the content of the document is declared.

`<head>`

Nested between the opening and closing <html> tags, we find the two children: <head> and <body>

Code Boilerplate

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>
    <p>Content goes here</p>
  </body>
</html>

Essential Tags

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="minimal-table.css">
    <title>Learning HTML</title>
</head>
<body>
    <h1>This is a Heading</h1>
    <h2>This is a Heading</h2>
    <h3>This is a Heading</h3>
    <h4>This is a Heading</h4>
    <h5>This is a Heading</h5>
    <h6>This is a Heading</h6>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, voluptatum maiores? Esse repellat, libero quae consequuntur nesciunt amet odit ratione quis, officia dolor nihil culpa veritatis facilis saepe molestiae quam.</p>

    <a href="http://google.com/">Take me there</a>
    <a href="forms.html">Learn Forms in HTML</a>
    <a href="#">Just a link</a>

    <p>Unordered List</p>
    <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
    </ul>
    
    <p>Ordered List</p>
    <ol>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
    </ol>
    
    <h4>Table Tags</h4>

        <table>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Money</th>
            </tr>
            <tr>
              <td>Alex</td>
              <td>21</td>
              <td>$1000</td>
            </tr>
            <tr>
              <td>Luigi</td>
              <td>42</td>
              <td>$800</td>
            </tr>
        </table>

    <hr>

    <h4>Buttons</h4>
    <button>Click</button>
    <button>Download</button>
    <button>Sign Up</button>

    <!-- Comments In HTML -->
    <!-- Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, quibusdam? -->


    <!-- text formatting -->
    <div>
        <p>Lorem ipsum dolor <strong>vjdf</strong> sit amet <br> consectetur, <strong><i>adipisicing</i></strong> elit. Explicabo, assumenda.</p>
    </div>

    <!-- Image Tag  -->
    <h4>Images</h4>
    <img src="https://media.istockphoto.com/photos/very-closeup-view-of-amazing-domestic-pet-in-mirror-round-fashion-is-picture-id1281804798?b=1&k=20&m=1281804798&s=170667a&w=0&h=HIWbeaP_cQSngCz7l9t3xwyE2eyzVgIy3K6xIqPhJQA=" alt="">
    <!-- <img src="https://picsum.photos/400/300?grayscale" alt=""> -->
    <img src="images/cameron.jpg" width="300px" alt="">
    <img src="https://picsum.photos/300?grayscale" alt="">
    <hr>


    <!-- Semantic Tags In Html  -->
    <h3>Semantic Tags In Html</h3>
    <hr>
    <section>
        <h4>Title of Section</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni cumque voluptates optio a soluta, fugit deleniti fuga recusandae ab.</p>
        <button>Click Me</button>
    </section>

    <hr>

    <nav>This is a nav tag</nav>
    <main>This is a main tag</main>
    <article>This is a article</article>
    <aside>Aside tag</aside>
    <header>This is a header</header>
    <footer>This is a footer</footer>
    <div>This is a div</div>
    <summary>This is a summary</summary>
    <details>This is details tag</details>

    <script></script>

    
</body>
</html>

Reference: Link.

NextSemantic HTML

Last updated 2 years ago