is it correct if
inside ? in HTML 5 doc

Question

I need the div to be inside a. But I not sure whether I am doing correct or not. Or actually there is another way to do it? I need my button to be skew, but it affect the text inside the button skew too. so I need div to make it not skew. I try span, but I can't make it. Any 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);
}

You might be asking the wrong question(s). I suggest describing what exactly you want to do and what you have tried. — BoltClock, Sep 02 '16 at 04:21
hi, thanks for reminding. but this is my question. i believed I already describe well too. — demoncoder, Sep 02 '16 at 09:11

score 1 · Accepted Answer · edited May 23 '17 at 12:08

I wouldn't recommend using a div inside an a tag.

Further You can, instead, use the span tag by using the following code in your CSS:

.txtt {
  display: inline-block;
}

For a further explanation on div inside an a tag, you can refer to this
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>

Mohd Abdul Mujib · Answer 2 · 2016-09-02T12:28:40.617

HTML5 allows block elements as children of anchor tag <a>.

...the a element is now transparent; that is, an instance of the a element is now allowed to also contain flow content (essentially, what was in previous versions referred to as “block” content)...

That's how you "common hyperlink" a whole bunch of elements, instead of going around linking one by one each.

Day to day example: say you have a set of elements which are composed of subelements. Now you want to treat these elements as objects in UI, and want them to link to respective URLs. What you do is wrap each one of the elements inside an anchor tag <a>.

Note: The child elements can not contain another <a> anchor tag.

score 0 · Answer 3 · answered Sep 02 '16 at 04:25

I have never seen div inside a tag. However, I do not think it is prohibited. Please correct me if so (I am interested to know also).

On the other hand, by default I believe div has display:block. Hence that can maybe an issue for your whole styling. The best is to use span inside a if needed.

is it correct if inside ? in HTML 5 doc

3 Answers3

Code Snippet

is it correct if
inside ? in HTML 5 doc