使用它们进行交互是否反对输入标记语义？

我一直在忙着使用CSS 制作交互式标签布局,而且有人告诉我这不是标签的预期语义含义.现在,我知道HTML5比以前的HTML版本更多地关注语义,所以我想知道,对于输入语义来说,它是类似于以下内容的东西:

Toggle tab

Look at this thing hide and show

CSS:

.toggletab, .togglelabel {border:1px solid #AAA;display:block;}
.toggleinput, .toggletab {display:none;}
.toggleinput:checked + .toggletab {display:block;}

(演示)

标准^{[1] [2]}都说同样的话:

该input元素表示类型化的数据字段中,通常用表单控件以允许用户编辑的数据.

所以对我而言,这似乎确实与输入标签应该用于什么(因为这与数据无关,而只是向用户显示某些事物).

然后当然我的后续问题是,如果确实不是根据标准应该使用什么输入标签,那么违背语义标准是不是很糟糕？