﻿<!DOCTYPE html>
<!-- It is good practice to specify the language of the page. You use the lang attribute -->
<!-- See language codes here: https://www.w3schools.com/tags/ref_language_codes.asp -->
<html>
<head>
    <!-- The <head> contains descriptive information about the HTML document -->
    <!-- The user DOES NOT SEE this information on the page -->

    <!-- The <meta> tags are used to define metadata (descriptive information about the page) within an HTML document-->
    <meta charset="utf-8" />
    
    <!-- The <title> tag is REQUIRED and is the HTML document's title -->
    <title></title>
</head>
<body>
    <!-- The body contains nested markup elements that define the structure of the page content. -->
    <!-- The body is the visible part of the document -->
    <!-- The user SEES ALL the content in this section -->
    

    <!-- The <hr /> element (Horizontal Rule) is used to create a horizontal line -->
    

    <h1>Headings</h1>
    <!-- There are 6 heading levels in HTML. You use the <h1> ... <h6> tags to create headings -->
    

    <hr />
    <h1>Paragraphs and Line Breaks</h1>
    <!-- The <p> tag is used to create a paragraphs in HTML. A blank line will be added before and after the paragraph -->
    <!-- The <br /> tag is used to create a line break. The content after the <br> tag will display on a new line but without starting a new paragraph (no blank line added) -->
    

    <hr />
    <h1>Hyperlinks (HTML Links)</h1>
    <!-- The <a> tag is used to create a link. You can create links to other pages, websites and sections on the same page -->
    <!-- This tag requires a href attribute used to specify the link's destination -->

    

    <!-- If you want a link to open in a different tab when it is clicked, add a target="_blank" attribute (do this for links to a page on a different website). -->
    


    <hr />
    <h1>Images</h1>
    <!-- The <img> tag is used to add an image to a page -->
    <!-- You MUST specify two attributes
            src - specifies the location of the image to display (path and file name)
            alt - specifies alternative replacement text to display for accessibility or in case the specified image is not available
    -->
    <!-- You should also specify the display size of an image. This will improve performance and make the web page to load more efficiently and quickly. Image display size attributes are:
            width: the display width of the image
            height: the display height of the image
        NOTE: There is a better way to do this using CSS!!!
    -->
    

    <hr />
    <h1>Lists</h1>
    <!-- There are two main types of lists in HTML
            Unorder Lists <ul> - bullet list
            Ordered List <ol> - numbered list
        The list items are created using nested (child) <li> tags
    -->

    
	 <hr />
	<h1>Block Level vs. Inline Elements</h1>
	<!--
		Inline: displayed on the same line where the previous element stopped unless too large to fit remaining space on line.
			E.g. <a>, <img>, <span> etc.
		Block-Level: displayed on a new line. A new line will be inserted before and after it.
			E.g. <div>, <p>, <ul>, <ol>, <li>, etc.

		Inline examples
		<a></a>
		<img src="https://www.uwtsd.ac.uk/media/uwtsd-website/styles-and-assets/images/logos/uwtsd-logo-black.png" alt="UWTSD" />
		<span></span>

		Block Level Examples
		<div>Hello world</div>
		<ul><li>Hello</li><li>Bye</li></ul>
	-->
	<h2>Inine Elements &lt;a&gt;, &lt;span&gt;, and &ltimg/&gt;</h2>
	<!-- Notice how the link, img and span are all displayed inline (starts where last content stops) -->

    

	<h2>Block Level Elements &lt;div&gt;, &lt;ul&gt;</h2>
	<!-- Notice how new lines are inserted before the inserted div and ul block level elements -->
    


	<!-- A link to content on the same page -->
</body>
</html>