Key HTML Elements and Their Differences

While learning JavaScript, I discovered some interesting HTML tags. Here they are...

  • Block level element vs Inline element: A block-level element(container) always starts on a new line, and the browsers automatically add some space before and after the element. Ex: <div>, <p>. An inline element(container) does not start on a new line. This is an element inside a paragraph. Ex: <span>, <b>, <br>.

  • <b> vs <strong>: <b>(bold) is used when you want something to look bold. Ex: <p> This is a <b>word</b>.</p> <strong> is used when you really want to highlight and the text is strongly importance. Ex: <p>I am a<strong>Software Engineer</strong>. </p>

  • <i> vs <em>: <i> (italic) is used to make the text italicized, but it doesn’t mean it is special or really important. Ex: <p> This is a <i>style</i> </p> Emphasized text is used when you say something with extra emphasis or feelings. Ex: <p> This is <em>Beautiful</em>, isn’t it? </p>

  • GET vs POST: The GET method is used for non-sensitive data because that data is shown in the URL bar, and the length of the URL is limited. The POST method is used for sensitive data transmission because that data is appended to the body of the HTTP request. It has no size limitations.

  • Void elements or self-closing elements mean they do not require any separate closing tag. They do not have any child elements. Ex: <input>, <br>, <img>