basics.html

<!-- HTML - Hypertext Markup Language 
ctrl + / - to put in a comment -->

<!---- ! + tab BOILER PLATE -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Basics</title>
</head>

<body>
    <!-- Contents of the webpage goes here  -->
    <!-- Text formatting  -->
    <!-- Headings -->
    <h1 id="top"> This is heading 1</h1> 
    <!-- most important, don't use other header without the h1 -->
    <!-- usually we only use 1 h1 per page. for the banner or title  -->
    <h2> This is heading 2</h2>
    <h3> This is heading 3</h3>
    <h4> This is heading 4</h4>
    <h5> This is heading 5</h5>
    <h6> This is heading 6</h6>
    <p>This is my sentence. <br/>
    This is my 2nd sentence. <br/>
    This is my 3rd sentence. <br/>
    This is my paragraph.<br/>  
</p>
    <!-- forward slash indicates that it is a 
    self closing tag, it will function without it but 
    it helps the codes  become clearer -->
    <hr/>
    <!-- horizontal line, to separate 2 topics -->
<p>This is a different topic</p> <br/>

<!-- Stylings in HTML -->
<p>This is an <strong>important</strong> text</p>
<p>This is an <em>emphasized</em> text.</p>   
<p>This text is <u>underlined</u></p>
<p>This text is <s>invalid</s></p>
<p>H<sub>2</sub>O is the chemical formula for water</p>
<p>2<sup>2</sup>=4</p>

<hr/>
<!-- List -->
<!-- ordered list -->
<ol>
    <li>apple</li>
    <li>banana</li>
    <li>strawberry</li>
</ol>
<!-- unordered list -->
<ul>
<li>computer</li>
<li>laptop</li>
<li>smartphone</li>
</ul>
<!-- Definition / Description List -->
<dl>
    <!-- definition term (dt) -->
    <dt><em><strong>HTML</strong></em></dt>
    <!-- definition description -->
    <dd>Hypertext Markup Language</dd>
</dl>
<hr/>
<!-- Links and Anchors -->
<!-- target - to open new tab if they click the link -->
<a href="https://google.com" target="_blank">Visit Google</a>
<a href="#top">Back to top</a>
<!-- class -->


</body>
</html>