HTML - Structure of HTML Document

HTML <!DOCTYPE> Declaration:

  • <!DOCTYPE> declaration is an information to the browser about type of document to expect/to understand the version of HTML used in the document. And this <!DOCTYPE> is not an HTML tag.
  • This <!DOCTYPE> declaration is not case sensitive.
  • In HTML5, the declaration of <!DOCTYPE> is very simple.

<!DOCTYPE html>

<html>:
  • This <html></html> element defines the html document and encloses the document completely.
  • It acts as a container for all other HTML elements except <!DOCTYPE>.
  • A HTML document is separated into two sections inside the <html> tag.
    • Head
    • Body
<head>:
  • This <head></head> element act as a container for metadata and placed between <html> and <body> tag.
  • <head> section of HTML document comprises of following elements
    • <title>
    • <link>
    • <meta>
    • <script>
    • <style>
  • <title>: It defines text that is displayed as a title for page in the browser title bar.

    <title> HTML5 Course Example </title>
        
  • <link>: An element used to link any external file to the webpage, which includes icons, style sheets,. etc
 <link href="images/favicon.ico" rel="icon">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  • <meta>: It describes the metadata information about the web page which includes details like character set, page description, viewport setting, keywords., etc.
  • This metadata information will not be displayed on the page but is used by the browser and search engines.

     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
        

Attributes Description
1) Charset Specifies character set used to design the web page. UTF standard UTF-8:English-US
2) Keyword Specifies the keyword used by SEO to search the webpage and show the page as a search result
3) Description Defines the summary of the web page which is displayed in the search result
4) Http-equiv Specifies how the request is handled i.e, to reload or to be static on request.
  • <script>: This element is used to embed client-side and server-side scripts into the web page.
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  • <style>: This element is used to embed the styles (CSS) that make the presentation of the web page more attractive and interactive.
<body>:
  • The body element contains the context such as headings, paragraphs, images, hyperlinks, tables, lists, etc. to be displayed on the webpage.
  • This body tag has the following attributes which define the body section.
Attributes Description
Bg color Defines a background color for the webpage
Background Sets a background image for the webpage
Text Defines a color for text display in the body section
vlinks Defines a color for the visited links on the webpage
alinks Defines a color for the active links on the webpage
margin Defines the space between text or contents in the webpage with regard to the browser window.
  • HTML5 introduced several new elements for the body section to make it more user-friendly and SEO. Those new elements are
    Elements Description
    Aside Defines some content aside from the content it is placed in.
    Article Publishes independent content that is related to the website.
    Dialog Specifies an area from where users can interact.
    Figure Encapsulate an image along with a caption.
    figcaption Defines a caption bound to the image.
    Header Specifies the contents to be displayed at the top margin of the web page.
    Footer Specifies the contents to be displayed at the bottom margin of the web page.
    Menu Organizes the elements according to behavior and defines navigation within the page.
    Nav Defines the Navigation area within the menu.
    Div It is a container used to represent a large block of code.
    Span Defines the inline-block of code.
    • Now, we will see an example with all these elements and attributes.
    <!DOCTYPE html>
    <html lang="en">
        <head>
          <title>HTML5 Course Example</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" 
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
          </script>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
          </script>
          <style>
                header{
                    background-colorblack;
                    colorwhite;
                    text-aligncenter;
                }
                section{
                    height600px;
                }
                footer{
                    background-colorblack;
                    colorwhite;
                    text-aligncenter;
                }
                aside{
                    border-styledashed;
                    width200px;   
                    displayblock(none)
                }
                article{
                    border-styledouble;
                    width100px;
                }
          </style>
        </head>
        <body>
            <header>
                <menu>
                    <nav>
                        <span>Home</span>
                        <span>About Us</span>
                        <span>Contact Us</span>
                    </nav>
                </menu>
            </header>
            <section>
                <dialog open="">
                    <form>
                        Course Comments/Feedbacks:
                        <input type="text">
                        <button> Submit </button>
                    </form>
                </dialog>
                <figure>
                    <img src="images/html.png" width="100" height="100">
                    <figcaption>HTML5 Course</figcaption>
                </figure>
                <aside>
                    Sidebar/Advertisement Goes Here....
                </aside>
                <article>
                    Other Courses (Python, JavaScript)
                </article>
            </section>
            <footer>
                <div>&copy;copyrights 2021</div>
                <div>Course | HTML5 | CSS | JS | Python </div>
            </footer>
        </body>
    </html>

    • In the above example, I have used CSS styling, external scripts just to explain how this style element and script element is used.

    No comments:

    Post a Comment