HTML Basic

HTML is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this course will give you a basic understanding of HTML and its components.


Anatomy of an HTML Document


    <!DOCTYPE html>
    <html>
        <head>
            head elements - title, meta data, links
        </head>
        <body>
            body content elements - text, images etc
        </body>
    </html>

That wraps up the basics of individual HTML elements.

<!DOCTYPE html> - the doctype. It is required preamble. They don't do much, and are basically just needed to make sure your document behaves correctly.
<html></html> - the html element. This element wraps all the content on the entire page and is sometimes known as the root element.
<head></head> - the head element. This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations and more.
<body></body> - the body element. This contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks or whatever else.



What is an HTML element


        <p>My cat is grumpy</p>

An HTML element is defined by a start tag, some content, and an end tag. The main parts of our element are as follows:

opening tag - <p> This states where the element begins. Also called start tag. This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets.
closing tag - </p> This states the element ends. Also called end tag. This is the same as the opening tag, except that it includes a forward slash before the element name. Never skip the end tag
the content - This is the content of the element, which in this case, is just text.
the element - The opening tag, the closing tag and the content together comprise the element.



HTML attributes


        <a href="https://www.google.com/">Visit here</a>

HTML attributes provide additional information about HTML elements. Always specified in start tag and usually come in name/value pairs like: name="value"
href attribute - specifies the URL of the page the link goes to.



Nesting elements


        <p>My cat is <strong>very</strong> </p>

We can put elements inside other elements too — this is called nesting.
Make sure that your elements are properly nested



Empty elements


        <img src="images/firefox-icon.png"  >

HTML elements with no content are called empty elements.



HTML Comments


        <!-- write your comment here -->

        <!-- 
            write your comments here 
            multiple line
            -->

With comments you can place notifications and reminders in your HTML code. Comments are not displayed by the browser, but they can help document your HTML source code.