css - is it correct if <div> inside <a>? in HTML 5 doc -

i need div inside a. not sure whether doing correct or not. or there way it? need button skew, affect text inside button skew too. need div make not skew. try span, can't make it. advice? thank you.

jsfiddle here: https://jsfiddle.net/rae0724/syogbe7b/

<a class="btn" href="javascript:void(0)"><div class="txtt">button</div></a>  .btn {     font-size: 16px;     width: auto;     -webkit-box-sizing: content-box;     -moz-box-sizing: content-box;     box-sizing: content-box;     padding: 4px 20px;     border: none;     color: #fff;     -o-text-overflow: clip;     text-overflow: clip;     background: #000;     -webkit-transform: skewx(-20deg);     transform: skewx(-20deg);     text-align: center;     display: inline-block; }  .txtt {   -webkit-transform: skewx(20deg);   transform: skewx(20deg); } 

i wouldn't recommend using div inside a tag.

further can, instead, use span tag using following code in css:

.txtt {   display: inline-block; } 

for further explanation on div inside tag, can refer
so answer.

code snippet

.btn {    font-size: 16px;    width: auto;    -webkit-box-sizing: content-box;    -moz-box-sizing: content-box;    box-sizing: content-box;    padding: 4px 20px;    border: none;    color: #fff;    -o-text-overflow: clip;    text-overflow: clip;    background: #000;    -webkit-transform: skewx(-20deg);    transform: skewx(-20deg);    text-align: center;    display: inline-block;  }  .txtt {    display: inline-block;    -webkit-transform: skewx(20deg);    transform: skewx(20deg);  }

<a class="btn" href="javascript:void(0)"><span class="txtt">button</span></a>