Home > front end >  what is the difference between <p> and text nodes?
what is the difference between <p> and text nodes?

Time:11-17

i'm learning HTML, and it is not clear yet to me what is the difference in using a text node or a <p> element.

more precisely, what are the advantages and disavantages of using a <p> element? what about text nodes?

CodePudding user response:

There are a few reasons not to use "naked" content in your markup:

  1. The primary purpose of HTML is to semantically wrap the content it contains-- paragraph content should be wrapped in a <p>, address information should be wrapped in <address>, etc. When you do this, it is a clue to various technologies that read HTML as to how the information it is reading should be interpreted. Such technologies include search engines (to understand what is on your page) and screen readers (to read content in a manner that makes sense to users who might not be able to see the screen).
  2. When you don't wrap your content in markup, you have no meaningful way to target and style it with CSS
  3. When you don't wrap your content in markup, you have no easy way to access it with JavaScript for manipulation

Basically, the whole intent of HTML is to semantically wrap content, and doing so also enables other functionality in the browser. There's really no reason not to do so-- so, wrap your content appropriately!

CodePudding user response:

A text node is just a piece of text.

A p element is an element (with all the usual features of an element such as being able to apply CSS to it and select it with JavaScript) with sensible default CSS for paragraphs (such as creating new lines before and after it) and the particular semantics that define it as being a paragraph (which are used by a variety of tools like search engines and screen readers).

If you were to type:

<p>Hello, world</p>

You would create a paragraph containing a text node.

  • Related