In Brief - About HTML Elements With Example !

HTML elements are historically categorized as either block-level elements or inline-level elements.

Block Level Elements

Block level elements means these tags are occupy whole space if Infront of block element have available enough space but they start from new line. Example:

<div>
   <p>paragraph tag is ablock level element.  <p>  It's getting whole space infront of whitespace <p/> and another line will start from next line.<p/>
<div/>

example link: block & Inline

All Block Level Tags:

The following is a complete list of all HTML "block-level" elements (although "block-level" is not technically defined for elements that are new in HTML5).

• <address>: Contact information. If you write address between in tag then you must use the address element tag because this provide us semantic meaning. address
• <article>: Article content. Use this article html element for writing article. article
• <aside>: Aside content. In web content if you want to provide some additional related information then you use this tag. This tag will appear content in side of the main content. aside
• <blockquote>: Long ("block") quotation. Write any long quote if you wat to highlight your quote then you must use this element tag. A blockquote also indent automatically if you write inside this tag and in this tag we can use <cite> tag for showing author's book name etc. blockquote
• <details>: Disclosure widget. When write inside the details tag the content goes to hide and only show the triangle and heading is visible via summary tag, when clic the detail widget they show the full content. detail
• <dialog>: Dialog box. dialog
• <dl>: Description list. Provide content description list. dl
• <dt>: Description list term. dt
• <dd>: Describes a term in a description list. dd
• <div>: Document division. It's provide a container for wrapping another element inside the div tag. this div tag a generic container means this is not affected by css when we styling throw css. Div is block type element div
• <fieldset>: Field set label. It's set the boundary of another content or around form content. fieldset
• <figcaption>: Figure caption. We use figcation tag for giving caption or legend describing the rest of the contents of it's parent <figure> element. figcaption
• <figure>: Groups media content with a caption (see<figcaption>). We write own caption using figcaption element. figure
• <footer>: Section or page footer. Footer element provide information related web page as like we write in footer section address, company information, author information, social links etc. It's a semantic html element whose provide the information means anybody shaw this tag ok this a footer ok i understand, so we always write semantic type html element. footer
• <form>: Input form. In form can do two things, one is get data and second is post data by method attribute. In form element we take user information and store in database using post method. form
• <p>: Paragraph. p
• <pre>: Preformatted text. It's giving result as it is you write html file any content between the tag. It,s also showing the white space which is in the html file. pre
• <section>: Section of a web page. section
• <table>: Table. table
• <ul>: Unordered list. ul
• <hr>: Horizontal rule (dividing line). hr
• <li>: List item. li
• <main>: Contains the central content unique to this document. this is the main part of the website means center of the web page we write all information about web page here. main
• <nav>: Contains navigation links. This is the nav html element .In this section we provide the links related to the website. It's always put top of the website. nav
• <ol>: Ordered list. Order list gives a order of list means this is the 1st ,this is the 2nd etc.Catagorize by the number or using a,b,c,d etc. ol
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Heading levels 1-6. It's element have more important role in our website because this is giving the heading name. h1 to h6 means in descending order means first big heading then next little small the previous heading. It's goes on h1 to h6. h1
• <header>: Section or page header. After nav element we write the header element and here we provide the main things related to website. header
• <hgroup>: Groups header information. hgroup

Inline Elements

Inline level elements means these tags are only acquire own space, means if another inline content written then they not goes to start next line, they start from there where's space is available they are not going to start next line. Example:

<div>
   paragraph <strong> tag is a block <strong/> level element.  <span> It's getting whole space in front of whitespace <span/> and another line will start from next line.
<div/>

example link: block & Inline

All Inline Level Tags:

• <a>: Anchor tag is a inline tag and its provide to href attribute whose take away another page. If attribute target use with value of blank then link goes to open another tab. anchor

• <img>: Image tag have more attribute whose gives us more functionality to control our content img. attribute srcset and sizes make image responsive without using the css. We use attribute usemap,ismap this provide a particular place in image when we click those place ismap give the position and usemap carry to another page according to giving the url in map element. image

• <iframe>: Iframe is using to the embeding another website video to our website. iframe

• <video>: Video html element is like that img element but these attribute are different like that autoplay, muted, controls, poster etc. These attribute to add more functionality in video. video

• <audio> (if it has visible controls): Audio element provide to same as upper in video element we have dicribed. audio

• <cite>: We use cite element for showing special means any quote is given by author. For use giving about content related information whose says by these quote. cite

• <map>: In image we high light the some space using the area element and these map element have name attribute those are link the image attribute usemapand we write the same value inside the usemap and name attribute, so these are together work and showing result via map element. Map element do work of bridge between img and area element. map

• <mark>: We use this element for marking purpose or high lighting.

• <sub>:

• <sup>:

• <strong>: Writing bold content.

• <del>: Showing Delete line Between the text or content.

• <bdo>: Writnig from left to right or right to left.

• <small>: Writing small content.

• <span>: Giving some additional features in css.

• <abbr>: Purpose of abbr element is in paragraph we can high light those important things whose gives us some extra knowledge using title with abbr element.

<p>Using <abbr>HTML</abbr> is fun and easy!</p>

<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big time.</p>

• We useabbr element with dfn definition element.

  <p>
  <dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> </dfn> is a
  markup language used to create the semantics and structure of a web page.
  </p>
  

• <b>: This b bold element tag is use for to make text bold.

<p>
    consectetur adipisicing<b>Asperiores</b> , expedita 
</b>

• <button>: Button is used for submitting something as like whole form data to server.

<button name="button">Press me</button>

• <i>: Make some text in Italic form.

• <embed>: we embed other source video and audio in our web page, then we use the embed HTML element.

<embed
  type="video/quicktime"
  src="movie.mov"
  width="640"
  height="480"
  title="Title of my video" />

• <input>: This element is use for the form element to take user's data. Input element havetype attribute and these type attribute have many value like:- text , email, number, password, radio, checkbox, color, date etc.

  <label for="fname">FirstName:</label>
    <input type="text" id="fname" name="first name" />
    <br />
    <label for="lname">LastName:</label>
    <input type="text" id="lname" name="last name" />

• <picture>: Picture element provide wrapping many source element and image element, we write both element together when one of these not supporting then picture element render the other element value.

<picture>
      <source
        media="(min-width:600px)"
        srcset="
          https://images.unsplash.com/photo-1667386081787-39e3b0a1124f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDE5fHFQWXNEenZKT1ljfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=60
        "
      />
      <img
        srcset="
          https://images.unsplash.com/photo-1667420420282-ad2653e2b20b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDE2fHFQWXNEenZKT1ljfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=60 400w
        "
      />
    </picture>

• <textarea>: Writing description or address etc.

<label for="add">Address:</label><br />
    <textarea name="address" id="add" cols="30" rows="10"></textarea>

• <em>: This is the emphasize tag . This tag is convert text to italic form. It's a semantic html element.

 <p>
  Obcaecati, a repellat. Nostrum magnam ad
      <em>voluptate expedita quam pariatur distinctio</em> velit sed maiores expedita dolore esse.
    </p>

• <svg>: Full form of svg is Scalable Vector Graphics. We use svg element for to create 2d vector based graphics.

 <svg width="100" height="100" style="border: 2px solid red">
      <circle
        cx="50"
        cy="50"
        r="45"
        fill="yellow"
        stroke="red"
        stroke-width="5"
      />
    </svg>

Thanks for reading my article . Please give your valuable feedback to me . We will meat in next blog. Thank you...