More than 5 years have passed since last update.

Qiitaで使えるHTMLタグは？

Last updated at 2018-01-19Posted at 2014-11-15

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

※改行されない。。。

を使う

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

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

Twitter

#コメント()

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

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

失敗例

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

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

前一行開ける必要有り

閉じ括弧の直後に書くのもだめ

無効になったタグ

##TABLE(BORDER/WIDTH/HEIGHT)・無効

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

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

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

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up