Styles and Semantics Tags

Sytles and Semantics tags are used to set layout in a particular view in HTML Document.

  • <style> - The <style> tag is used to write style in HTML document. Style tag is defined within head tag. The <style> tag is specify how HTML document display in browser.
    • Usage:-
      • <html>
        <head>
        <style>
        h1 {color:red;}
        p {color:blue;}
        </style>

        </head>
        <body>
        <h1>Here heading is red color</h1>
        <p>And paragraph is blue susing style in document.</p>
        </body>
        </html>
  • <div> - The <div> tag is used as division or container for other HTML elements in document. The <div> is a block-element.
    • Usage:-
      • <!DOCTYPE html>
        <html>
        <body>
        <p>This is some text.</p>
        <div style="background-color:aqua">
         
        <h3>Welcome to Div tag</h3>
          <p>Paragraph inside div element</p>
        </div>
        <p>This is some text.</p>
        </body>
        </html>

  • <span> - The <span> tag is an inline-element which is used to group inline content or elements in a document.

    • Usage:-

      • <!DOCTYPE html>
        <html>
        <body>
        <p>Here text written in P tag will display in separate line but text written in span will display in same line.<p>
        <p>hello</p> <p>world</p> <p> <span>Lets go now</span> <span> with me</span> </p>
        </body>
        </html>

  • <header> - The <header> tag is used to define Heading part in a article or a section in HTML document. The <header> tag can be used several time in one document but you cannot use within <footer>, <address> or another <header> in a document.

    • Note:- It is a new HTML5 element.

    • Usage:-

      • <!DOCTYPE html>
        <html>
        <body>
        <header><nav role="navigation"><ul><li>Home</li><li>About</li></ul></nav></header>
        <article>
          <header>
           
        <h1>Heading inside header element</h1>
            <h3>Another heading inside header tag</h3>
            <p>This is paragraph inside header element.</p>
          </header>
          <p>Just chill and learn HTML....</p>
        </article>
        </body>
        </html>

  • <footer> - The footer element in HTML is used to define footer for a document or section. Generally footer contains copyright information, contact information, related links, sitemap, etc.

    • Note:- It is a new HTML5 element.

    • Usage:-

      • <!DOCTYPE html>
        <html>
        <body>
        <header><nav role="navigation"><ul><li>Home</li><li>About</li></ul></nav></header>
        <p><strong>Note:</strong> The footer tag is not supported in Internet Explorer 8 and earlier versions.</p>

        <footer>
          <p>Copyright@2019 Codenow. All right reserved.</p>
          <p>Contact information: <a href="mailto:contact@codenow.online">contact@codenow.online</a>.</p>
        </footer>

        </body>
        </html>

  • <main> - The <main> tag is used specify main content in a document. The <main> tag shoulb be onlye one in a document. It should defined first after body tag and not inside other tag or elements.

    • Note:- It is a new HTML5 element and not supported in Internet Explorer 11 and earlier versions.

    • Usage:-

      • <!DOCTYPE html>
        <html>
        <body>
        <main>
          <h1>Does All Web Browsers Supports main tag?</h1>
          <p>Yes. All browsers are support the main tag</p>
          <article>
           <p>some text here..</p>
          </article>
        </main>
        </body>
        </html>

  • <section> - The <section> is used to define a sections in HTML document.

    • Note:- It is a new HTML5 element. It is not supported in Internet Explorer 8 and older versions.

    • Usage:-

      • <!DOCTYPE html>
        <html>
        <body>
        <section>
         
        <h1>Section 1</h1>
        </section>
        <section>
         
        <h1>Section 2</h1>  
        </section>
        </body>
        </html>

  • <article> - The <article> tag is new in HTML5 and used to define as independent, self-contained container for other element in a document.

    • Usage:-

      • <!DOCTYPE html>
        <html>
        <body>
        <article>
          <h1>This is Heading in article tag</h1>
          <p>Go for more in HTML5</p>
        </article>
        </body>
        </html>

  • <aside> - The <aside> tag is used to define content aside from main content like sidebar content.

    • Usage:-

      • <!DOCTYPE html>
        <html>
        <body>
        <article>
        <p>My family and I visited The Epcot center this summer.</p>
        </article>
        <aside>
          <h4>Aside Content header</h4>
         <ul><li><a href="#">Aside content Link</a></li></ul>
        </aside>
        </body>
        </html>

  • <details> - The <details> tag is used when user need to view or hide that the additional details.

    • Note:- The details tag is not supported in Internet Explorer.

    • Usage:-

      • <!DOCTYPE html>
        <html>
        <body>
        <details>
         
        <summary>Learn HTML</summary>
          <p>Here you can learn from basic to advance HTML</p>
          <p>All content and graphics on this web site are the property of the webiste  Refrences Data.</p>
        </details>
        </body>
        </html>

  • <dialog> - The <dialog> tag used to create a dialog box or popup window on a web page.

    • Note:- The dialog tag is not supported in Edge/Internet Explorer.

    • Usage:-

      • <!Doctype html>
        <html>
           <head>
              <title>HTML dialog Tag</title>
           </head>
           <body>
            <div>This div content area</div>
              <dialog open>this will be shown in a dialog</dialog>
           </body>
        </html>

  • <summary> - The <summary> tag is used to define visible heading for <details> tag. This is clickable heading.

    • Usage:-

      • <!DOCTYPE html>
        <html>
        <body>
        <details>
          <summary>Clickable heading</summary>
            <p>Content that hidden and show when clicked on heading.</p>
        </details>
        </body>
        </html>

  • <data>- The <data> tag is used to define the content with a machine-readable and human-readable format. The data in value attribute of <data> tag are machine-readable.

    • Usage:-

      • <!DOCTYPE html>
        <html>
        <body>
        <p>Data Tag with machine-readable value:</p>
        <ul>
          <li><data value="21053">Banana</data></li>
          <li><data value="21054">Mango</data></li>
          <li><data value="21055">Apple</data></li>
        </ul>
        </body>
        </html>

More you may like to read