html - Difference result for a heading within p and div tag -

i trying make paragraph email address. cannot make style it.

.mail {      margin: .7rem 0;      padding: .3em .8em;      border: 1px solid #ddd;      transition: .2s;      color: #aaa;  }        .mail a:hover {          background-color: #ddd;      }          .mail a:hover {          color: #333;      }

<p class="mail"><h3><a href="mailto:chenghuayang.com@gmail.com">chenghuayang.com@gmail.com</a></h3></p>    <hr>  <div class="mail"><h3><a href="mailto:chenghuayang.com@gmail.com">chenghuayang.com@gmail.com</a></h3></div>

jsbin here.

i've never realised there's more difference between p , div other semantic meaning or properties margin or line-height.

okay, i'll use div instead of p tag. here questions in mind:

1. what call difference, , why work this?
2. are there other examples of behaviour? (i hope wouldn't miss else this.)

this occurring because h3 element cannot belong inside p element. end tag of p element can omitted if followed elements:

tag omission

the start tag mandatory. end tag may omitted if <p> element followed <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul> or <p> element, or if there no more content in parent element , parent element not <a> element.

(https://developer.mozilla.org/en/docs/web/html/element/p)

effectively, p tags closing before h3 tags opened this:

<p class="mail"><h3><a href="mailto:chenghuayang.com@gmail.com">chenghuayang.com@gmail.com</a></h3></p> 

actually becomes this:

<p class="mail"></p> <h3><a href="mailto:chenghuayang.com@gmail.com">chenghuayang.com@gmail.com</a></h3> 

as result .mail a rule no longer applies a tag causes un-styled.

to fix, remove p tags , add mail class h3:

.mail {    margin: .7rem 0;    padding: .3em .8em;    border: 1px solid #ddd;    transition: .2s;    color: #aaa;  }  .mail a:hover {    background-color: #ddd;  }  .mail a:hover {    color: #333;  }

<h3 class="mail"><a href="mailto:chenghuayang.com@gmail.com">chenghuayang.com@gmail.com</a></h3>  <hr>  <div class="mail">    <h3><a href="mailto:chenghuayang.com@gmail.com">chenghuayang.com@gmail.com</a></h3>  </div>

there other tags end tag optional (shown below), however, rules when automatically closed differ:

</html> </head> </body> </p> </dt> </dd> </li> </option> </thead> </th> </tbody> </tr> </td> </tfoot> </colgroup> 

(html: include, or exclude, optional closing tags?)

for example, li autoclose if new li opened:

tag omission

the end tag can omitted if list item followed <li> element, or if there no more content in parent element.

(https://developer.mozilla.org/en/docs/web/html/element/li)

while tds close automatically if followed th or td:

tag omission

the start tag mandatory. end tag may omitted, if followed <th> or <td> element or if there no more data in parent element.

(https://developer.mozilla.org/en/docs/web/html/element/td)

a useful list of elements , whether need closed can found on w3c site: http://www.w3.org/tr/rec-html40/index/elements.html