Qiitaで使えるHTMLタグは？

HTMLタグのテーブル結合は使えなかった気がしたんですが、使えるようになってたので使えるタグを調べてみました。

```text:出力されるタグ
テーブル：TABLE,TR,TD,TH
リスト：UL,LI,OL,DL,DT,DD
開閉：DETAILS,SUMMARY
レイアウト：HR,P,BR,IMG,DIV
リンク：A
文字装飾：FONT,B,STRONG,STRIKE,I,EM,S,DEL,SUB,SUP,INS
文字説明：VAR,CODE,SAMP,KBD,PRE,BLOCKQUOTE
```

オプション属性のうちは以下はそのまま出力されて使えるようです。

```text:出力されるオプション属性
テーブル：COLSPAN(TH,TD時),ROWSPAN(TH,TD時)
IMG：ALT,WIDTH,HEIGHT,SRC
HREF(A時/内容はURL,MAILのみ),COLOR(FONT時),TITLE(IMG,A時)
```

## 出力されなくなったタグ・属性

Qiita Blog(公式)：[QiitaにおいてHTML要素の属性指定ができなくなりました(17/6/20)](http://blog.qiita.com/post/162037299989/disable-html-class)

```text:出力されなくなったタグ(2017/8/5現在)
文字装飾：TT
フォーム：INPUT
```

```text:出力されなくなったオプション属性(2017/8/5現在)
BORDER,ALIGN,NAME,TARGET,DATA-LANG
TYPE(INPUT時)
CLASS(DIV/A/BLOCKQUOTE時),ID(LI時)
```

#テーブル

##結合(ROWSPAN/COLSPAN)
```html
<TABLE>
<TR><TD ROWSPAN=2>縦結合</TD>
<TH COLSPAN=2 ALIGN=RIGHT>横結合</TH></TR>
<TR><TD BGCOLOR=GREEN>test</TD><TD>test</TD></TR>
</TABLE>
```
<TABLE>
<TR><TD ROWSPAN=2>縦結合</TD>
<TH COLSPAN=2 ALIGN=RIGHT>横結合</TH></TR>
<TR><TD BGCOLOR=GREEN>test</TD><TD>test</TD></TR>
</TABLE>

※ ALIGN,BGCOLORは無効

## 中央(数式)

<pre>
```math
\begin{array}{|c|c|c|}
\hline
title1 & title2 & title3 \\
\hline
1 & 2 & 3 \\ 
\hline
\end{array}
```
</pre>

```math
\begin{array}{|c|c|c|}
\hline
title1 & title2 & title3 \\
\hline
1 & 2 & 3 \\ 
\hline
\end{array}
```

[Qiitaの数式チートシート](http://qiita.com/PlanetMeron/items/63ac58898541cbe81ada)
[Easy Copy MathJax：表 Table](http://easy-copy-mathjax.xxxx7.com/#table)

#リスト

##リスト(UL/LI)
```html
 <UL><LI>aaa
aaa

<LI>bbb
bbb
</UL>
```

 <UL><LI>aaa
aaa

<LI>bbb
bbb
</UL>

※ULの前にスペースを入れると改行が反映される

```html:失敗例
<UL>
<LI>aaa
aaa

<LI>bbb
bbb
</UL>
```

<UL>
<LI>aaa
aaa

<LI>bbb
bbb
</UL>

※改行されない。。。

```html:&lt;BR&gt;を使う
<UL><LI>aaa<BR>aaa<BR>aaa</UL>
```

<UL><LI>aaa<BR>aaa<BR>aaa</UL>

##順序リスト(OL)
```html
<OL type="1">
<LI>aaa
<LI>bbb
</OL>

<OL type="a">
<LI>aaa
<LI>bbb
</OL>
```

<OL type="1">
<LI>aaa
<LI>bbb
</OL>

<OL type="a">
<LI>aaa
<LI>bbb
</OL>

※typeは無効

# 開閉

[Markdown記法 チートシート#details---折りたたみ](http://qiita.com/Qiita/items/c686397e4a0f4f11683d#details---折りたたみ)

```html
<DETAILS><SUMMARY>概要1行目
概要 2行目</SUMMARY>内容1行目
**内容2行目:太字**

4行目(空行があるとダメ)
</DETAILS>
```
<DETAILS><SUMMARY>概要1行目
概要 2行目</SUMMARY>内容1行目
**内容2行目:太字**

4行目(空行があるとダメ)
</DETAILS>

# レイアウト

## 水平線(HR)
```html
<DIV ALIGN=CENTER><HR COLOR=BLUE WIDTH=50%></DIV>
<HR ALIGN=CENTER COLOR=RED WIDTH=50%>
```
<DIV ALIGN=CENTER><HR COLOR=BLUE WIDTH=50%></DIV>
<HR ALIGN=CENTER COLOR=RED WIDTH=50%>

※ HRタグ中のSIZE,ALIGN,COLOR,WIDTHは無効

## DIV
```html
<DIV ALIGN=RIGHT NAME="name" CLASS="class" TITLE="title" ID="id">DIV属性</DIV>
```

<DIV ALIGN=RIGHT NAME="name" CLASS="class" TITLE="title" ID="id">DIV属性</DIV>

※ DIVタグ自体は出力される

```txt:出力されたHTML
<div class="">DIV属性</div>
```

※ ALIGN,NAME,CLASS,TITLE,IDは無効

## 位置(数式)
```html
<DIV ALIGN=CENTER>中央</DIV>
<CENTER>中央</CENTER>
$$中央(数式)$$
<DIV ALIGN=RIGHT>右寄せ</DIV>
```

<DIV ALIGN=CENTER>中央</DIV>
<CENTER>中央</CENTER>
$$中央(数式)$$
<DIV ALIGN=RIGHT>右寄せ</DIV>

※ ALIGN,CENTERタグは無効
[Qiitaの数式チートシート](http://qiita.com/PlanetMeron/items/63ac58898541cbe81ada)

#リンク(A)

##リンクスキーマ(A HREF)
```html
<a href="http://google.co.jp">http://google.co.jp</a>
<a href="https://google.co.jp">https://google.co.jp</a>
<a href="mailto:test@test.test">test@test.test</a>
```

<a href="http://google.co.jp">http://google.co.jp</a>
<a href="https://google.co.jp">https://google.co.jp</a>
<a href="mailto:test@test.test">test@test.test</a>

```html:失敗例
<a href="javascript:alert();">javascript:alert();</a>
<a href="data:application/octet-stream,aaa" download="1.txt">data:application/octet-stream,aaa</a>
```

<a href="javascript:alert();">javascript:alert();</a>
<a href="data:application/octet-stream,aaa" download="1.txt">data:application/octet-stream,aaa</a>

※http,https,mailto以外はダメっぽい

#装飾

##FONT(色)
```html
<FONT COLOR=red>赤</FONT><FONT COLOR=blue>青</FONT>
```
<FONT COLOR=red>赤</FONT><FONT COLOR=blue>青</FONT>

##背景色(数式)
```
白$\style{background-color:yellow;}{黄色}$$\style{background-color:pink;}{ピンク}$
```

白$\style{background-color:yellow;}{黄色}$$\style{background-color:pink;}{ピンク}$

##文字サイズ(数式)
```html
<FONT SIZE=1>小</FONT> <FONT SIZE=6>大</FONT>
$\tiny{小(数式)}$ $\huge{大(数式)}$
```

<FONT SIZE=1>小</FONT> <FONT SIZE=6>大</FONT>
$\tiny{小(数式)}$ $\huge{大(数式)}$

[Qiitaの数式チートシート](http://qiita.com/PlanetMeron/items/63ac58898541cbe81ada)
[Easy Copy MathJax：文字サイズ Letter size](http://easy-copy-mathjax.xxxx7.com/#letter-size)

##文字装飾
```html
<B>B:太字</B>, <STRONG>STRONG:太字</STRONG>
<I>I:イタリック</I>
<EM>EM:強調</EM>
<S>S:打ち消し線</S>, <STRIKE>STRIKE:打ち消し線</STRIKE>, <DEL>DEL(削除)</DEL>
<SUB>下付き</SUB><SUP>上付き</SUP>
<INS>アンダーバー</INS>
```

<B>B:太字</B>, <STRONG>STRONG:太字</STRONG>
<I>I:イタリック</I>
<EM>EM:強調</EM>
<S>S:打ち消し線</S>, <STRIKE>STRIKE:打ち消し線</STRIKE>, <DEL>DEL(削除)</DEL>
<SUB>下付き</SUB><SUP>上付き</SUP>
<INS>アンダーバー</INS>

## 文字説明

```html
<VAR>VAR(変数)</VAR>
<SAMP>SAMP(サンプル)</SAMP>
<CODE>CODE(ソースコード)</CODE>
<PRE>PRE(テキスト)</PRE>
<KBD>KBD(キーボード入力)</KBD>
```

<VAR>VAR(変数)</VAR>
<SAMP>SAMP(サンプル)</SAMP>
<CODE>CODE(ソースコード)</CODE>
<PRE>PRE(テキスト)</PRE>
<KBD>KBD(キーボード入力)</KBD>

## 引用(BLOCKQUOTE)

```html
<BLOCKQUOTE>BLOCKQUOTE(引用)</BLOCKQUOTE>
```

<BLOCKQUOTE>BLOCKQUOTE(引用)</BLOCKQUOTE>

## Twitter引用

[QiitaはTwitterのツイートを埋め込める](http://qiita.com/yyu/items/d7483b63f701ae1d1c50#comment-5ed99947370e052749f1)

```html
<BLOCKQUOTE CLASS="twitter-tweet"><A HREF="https://twitter.com/syu1404/status/893827641400107008">Twitter</A></BLOCKQUOTE> 
```

<BLOCKQUOTE CLASS="twitter-tweet"><A HREF="https://twitter.com/syu1404/status/893827641400107008">Twitter</A></BLOCKQUOTE> 

#コメント(&lt;!-- --&gt;)
```html
<!--あいうえお
かきくけこ-->
```

<!--あいうえお
かきくけこ-->

※出力自体されない。コメントが機能しているわけではなく無効なタグなのではじかれている感じ。

```html:失敗例
前一行開ける必要有り
<!--あいうえお-->

<!--あいうえお-->閉じ括弧の直後に書くのもだめ
```

前一行開ける必要有り
<!--あいうえお-->

<!--あいうえお-->閉じ括弧の直後に書くのもだめ

# 無効になったタグ

##TABLE(BORDER/WIDTH/HEIGHT)・無効
```html
<TABLE BORDER=5 WIDTH=300 HEIGHT=100><TR><TD>test</TD><TD>test</TD></TR></TABLE>
```
<TABLE BORDER=5 WIDTH=300 HEIGHT=100><TR><TD>test</TD><TD>test</TD></TR></TABLE>

※ BORDER,WIDTH,HEIGHTは無効

##TABLE(回り込み)・無効
```html
<TABLE ALIGN=LEFT><TR><TD>test</TD></TR></TABLE>
<TABLE ALIGN=RIGHT><TR><TD>test</TD></TR></TABLE>
まわりこみ<BR>まわりこみ<BR>まわりこみ<BR>まわりこみ
```
<TABLE ALIGN=LEFT><TR><TD>test</TD></TR></TABLE>
<TABLE ALIGN=RIGHT><TR><TD>test</TD></TR></TABLE>
まわりこみ<BR>まわりこみ<BR>まわりこみ<BR>まわりこみ

※ ALIGN,回り込み解除(br clear=left)は無効

##新規ウインドウでリンク(A TARGET)・無効
```html
<A HREF=http://www.google.co.jp TARGET=_blank>新しいウインドウで開く</A>
<A HREF=http://www.google.co.jp TARGET=_self>同じウインドウで開く</A>
```
<A HREF=http://www.google.co.jp TARGET=_blank>新しいウインドウで開く</A>
<A HREF=http://www.google.co.jp TARGET=_self>同じウインドウで開く</A>

※ どちらもtarget="_blank"で出力される

##ページ内リンク(A NAME)・無効
```html
<A NAME=ページ内リンク />ここにリンクを設定

<A HREF=#ページ内リンク>ページ内リンク</A>
```

<A NAME=ページ内リンク />ここにリンクを設定

<A HREF=#ページ内リンク>ページ内リンク</A>

※ NAMEは無効になりました(2017/8/5現在)

#タイトル(P TITLE)・無効
```html
<P TITLE=タイトル>ここにマウスカーソルを当てる</P>
```
<P TITLE=タイトル>ここにマウスカーソルを当てる</P>

※「タイトル」という文字がポップアップ表示される

# INPUT・無効

※FormやJavascriptは無効

##テキストボックス(INPUT TYPE=TEXT)
```html
<input type="text">
```

<input type="text">

※maxlengthは無効

##パスワード(INPUT TYPE=TEXT)
```html
<input type="password">
```

<input type="password">

##ボタン(INPUT TYPE=BUTTON)
```html
<input type="button" value="ボタン">
```

<input type="button" value="ボタン">

※valueは無効

##ファイル選択ボタン(INPUT TYPE=FILE)
```html
<input type="file" name="datafile">
```

<input type="file" name="datafile">

##画像ボタン(INPUT TYPE=IMAGE)
```html
<input type="image" SRC=https://qiita-image-store.s3.amazonaws.com/0/52320/10c118c1-ef93-7cd0-e5b6-62c6aa2e3b09.png alt="ボタン">
```

<input type="image" SRC=https://qiita-image-store.s3.amazonaws.com/0/52320/10c118c1-ef93-7cd0-e5b6-62c6aa2e3b09.png alt="ボタン">

※srcは無効

##チェックボックス(INPUT TYPE=CHECKBOX)
```html
<input type="checkbox">cc1 <input type="checkbox">cc2
```

<input type="checkbox">cc1 <input type="checkbox">cc2

##ラジオボタン(INPUT TYPE=RADIO)
```html
<input type="radio" name="rr">rr1 <input type="radio" name="rr">rr2
```
<input type="radio" name="rr">rr1 <input type="radio" name="rr">rr2

##非表示(INPUT TYPE=HIDDEN)
```html
<input type="hidden" name="非表示">
```

<input type="hidden" name="非表示">

※出力されて非表示になる

```html:出力ソース
<p><input type="hidden" name="非表示"></p>
```