Edited at

Qiitaで使えるHTMLタグは?

More than 1 year has passed since last update.

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


出力されるタグ

テーブル: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

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


出力されるオプション属性

テーブル: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)


出力されなくなったタグ(2017/8/5現在)

文字装飾:TT

フォーム:INPUT


出力されなくなったオプション属性(2017/8/5現在)

BORDER,ALIGN,NAME,TARGET,DATA-LANG

TYPE(INPUT時)
CLASS(DIV/A/BLOCKQUOTE時),ID(LI時)


テーブル


結合(ROWSPAN/COLSPAN)

<TABLE>

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

縦結合
横結合

test
test

※ ALIGN,BGCOLORは無効


中央(数式)


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

\begin{array}{|c|c|c|}

\hline
title1 & title2 & title3 \\
\hline
1 & 2 & 3 \\
\hline
\end{array}

Qiitaの数式チートシート

Easy Copy MathJax:表 Table


リスト


リスト(UL/LI)

 <UL><LI>aaa

aaa

<LI>bbb
bbb
</UL>


  • aaa

    aaa



  • bbb

    bbb


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


失敗例

<UL>

<LI>aaa
aaa

<LI>bbb
bbb
</UL>



  • aaa
    aaa


  • bbb
    bbb

※改行されない。。。


<BR>を使う

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


  • aaa
    aaa
    aaa


順序リスト(OL)

<OL type="1">

<LI>aaa
<LI>bbb
</OL>

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


  1. aaa

  2. bbb


  1. aaa

  2. bbb

※typeは無効


開閉

Markdown記法 チートシート#details---折りたたみ

<DETAILS><SUMMARY>概要1行目

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

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

概要1行目

概要 2行目内容1行目

内容2行目:太字

4行目(空行があるとダメ)


レイアウト


水平線(HR)

<DIV ALIGN=CENTER><HR COLOR=BLUE WIDTH=50%></DIV>

<HR ALIGN=CENTER COLOR=RED WIDTH=50%>



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


DIV

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

DIV属性

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


出力されたHTML

<div class="">DIV属性</div>


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


位置(数式)

<DIV ALIGN=CENTER>中央</DIV>

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

中央

中央

$$中央(数式)$$

右寄せ

※ ALIGN,CENTERタグは無効

Qiitaの数式チートシート


リンク(A)


リンクスキーマ(A HREF)

<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>

http://google.co.jp

https://google.co.jp

test@test.test


失敗例

<a href="javascript:alert();">javascript:alert();</a>

<a href="data:application/octet-stream,aaa" download="1.txt">data:application/octet-stream,aaa</a>

javascript:alert();

data:application/octet-stream,aaa

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


装飾


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;}{ピンク}$


文字サイズ(数式)

<FONT SIZE=1></FONT> <FONT SIZE=6></FONT>

$\tiny{小(数式)}$ $\huge{大(数式)}$

小 大

$\tiny{小(数式)}$ $\huge{大(数式)}$

Qiitaの数式チートシート

Easy Copy MathJax:文字サイズ Letter size


文字装飾

<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:太字, STRONG:太字

I:イタリック

EM:強調

S:打ち消し線, STRIKE:打ち消し線, DEL(削除)

下付き上付き

アンダーバー


文字説明

<VAR>VAR(変数)</VAR>

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

VAR(変数)

SAMP(サンプル)

CODE(ソースコード)

PRE(テキスト)


KBD(キーボード入力)


引用(BLOCKQUOTE)

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

BLOCKQUOTE(引用)


Twitter引用

QiitaはTwitterのツイートを埋め込める

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


コメント(<!-- -->)

<!--あいうえお

かきくけこ-->

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


失敗例

前一行開ける必要有り

<!--あいうえお-->

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


前一行開ける必要有り

<!--あいうえお-->

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


無効になったタグ


TABLE(BORDER/WIDTH/HEIGHT)・無効

<TABLE BORDER=5 WIDTH=300 HEIGHT=100><TR><TD>test</TD><TD>test</TD></TR></TABLE>

test
test

※ BORDER,WIDTH,HEIGHTは無効


TABLE(回り込み)・無効

<TABLE ALIGN=LEFT><TR><TD>test</TD></TR></TABLE>

<TABLE ALIGN=RIGHT><TR><TD>test</TD></TR></TABLE>
まわりこみ<BR>まわりこみ<BR>まわりこみ<BR>まわりこみ

test

test

まわりこみ
まわりこみ
まわりこみ
まわりこみ

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


新規ウインドウでリンク(A TARGET)・無効

<A HREF=http://www.google.co.jp TARGET=_blank>新しいウインドウで開く</A>

<A HREF=http://www.google.co.jp TARGET=_self>同じウインドウで開く</A>

新しいウインドウで開く

同じウインドウで開く

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


ページ内リンク(A NAME)・無効

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

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

ここにリンクを設定

ページ内リンク

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


タイトル(P TITLE)・無効

<P TITLE=タイトル>ここにマウスカーソルを当てる</P>

ここにマウスカーソルを当てる

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


INPUT・無効

※FormやJavascriptは無効


テキストボックス(INPUT TYPE=TEXT)

<input type="text">

※maxlengthは無効


パスワード(INPUT TYPE=TEXT)

<input type="password">


ボタン(INPUT TYPE=BUTTON)

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

※valueは無効


ファイル選択ボタン(INPUT TYPE=FILE)

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


画像ボタン(INPUT TYPE=IMAGE)

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

※srcは無効


チェックボックス(INPUT TYPE=CHECKBOX)

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

cc1 cc2


ラジオボタン(INPUT TYPE=RADIO)

<input type="radio" name="rr">rr1 <input type="radio" name="rr">rr2

rr1 rr2


非表示(INPUT TYPE=HIDDEN)

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

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


出力ソース

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