マークアップエンジニア・HTMLコーダー必見!　コーディングが非常にはかどり時間短縮・ストレス軽減にも繋がる手段を紹介します。

トップページ
Webサイト構築
制作のコツ
HTMLタグを辞書登録しておくとコーディングが非常にはかどる

HTMLタグを辞書登録しておくとコーディングが非常にはかどる

2014.4.17.Thu. 11:23

マークアップエンジニアによって手法は様々かと思いますが、僕は各種HTMLタグを辞書登録し、瞬時にHTMLタグを出力出来るようにしています。
利点は以下のような感じ。

特定のWebページ作成ツールに依らず、どんなテキストエディタでもマークアップが出来る
自分が必要と思う属性のみを採用出来たり、属性の記述順を自分好みに設定出来たりする
スペルミスを気にする必要がなくなり、その分時間短縮やストレス軽減に繋がる

マークアップエンジニアに限らず、HTMLを手打ちしているという人は、この手法を採用しない手はないかと(よっぽど特定のWebページ作成ツールに傾倒している場合はともかく)。
以下に、僕がデフォルトとしているHTML4.01 Strictにおいて有用なHTMLタグを掲載しておきますので、これをそのまま採用・あるいは自分なりにアレンジしたり等して、自分がやりやすいように辞書登録してみて下さい(*・ω・)ノ
「<ul>の直下には<li>しか配置しえない」等、親子関係が明確なものについては、親を出力しようとすると子も一緒に出力されるようにセットで用意しています。

※なお僕は動的コンテンツについては不得手なもので、以下のタグについては各属性の必要性・重要性等がよく分からないでいる為、紹介を差し控えさせて頂きます(´・ω・`)
<applet> <embed> <object> <param>

文書構成関連


<html lang="ja"></html>


<head></head>


<body></body>


<title></title>


<link rel="" rev="" href="" title="" type="" media="">


<meta http-equiv="" content="">


<meta name="" content="">

見出し


<h1></h1>


<h2></h2>


<h3></h3>


<h4></h4>


<h5></h5>


<h6></h6>

リンク関連


<a href=""></a>


<a href="" target="_blank"></a>


<map name=""><area shape="" coords="" href="" alt=""></map>


<area shape="" coords="" href="" alt="">

フォーム関連


<form action="" method="post"></form>


<form action="" method="get"></form>


<fieldset></fieldset>


<legend></legend>


<input type="text" name="" size="" value="">


<input type="password" name="" size="" value="">


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


<input type="checkbox" name="" value="">


<input type="checkbox" name="" value="" checked="checked">


<input type="radio" name="" value="">


<input type="radio" name="" value="" checked="checked">


<input type="hidden" name="" value="">


<input type="submit" value="">


<input type="reset" value="">


<input type="button" value="">


<input type="image" src="" alt="">


<textarea cols="" rows="" name=""></textarea>


<select name=""></select>


<optgroup label=""><option value=""></option></optgroup>


<option value=""></option>


<button type="submit"></button>


<button type="reset"></button>


<button type="button"></button>


<label for=""></label>

テーブル関連


<table summary=""><tr></tr></table>


<caption></caption>


<thead></thead>


<tbody></tbody>


<tfoot></tfoot>


<colgroup span=""></colgroup>


<colgroup><col span=""></colgroup>


<col span="">


<tr></tr>


<th scope="col"></th>


<th scope="row"></th>


<td></td>

リスト関連


<dl><dt></dt><dd></dd></dl>


<dt></dt>


<dd></dd>


<ol><li></li></ol>


<ul><li></li></ul>


<li></li>

CSS・JS


<style type="text/css"><!----></style>


<script type="text/javascript" src=""></script>


<script type="text/javascript"><!--//--></script>


<noscript></noscript>

強調


<strong></strong>


<em></em>

引用


<blockquote></blockquote>


<q></q>

削除・挿入


<del></del>


<del datetime="2000-12-31T23:59:00+09:00"></del>


<ins></ins>


<ins datetime="2000-12-31T23:59:00+09:00"></ins>

意味合い付加関連


<abbr title=""></abbr>


<acronym title=""></acronym>


<cite></cite>


<code></code>


<dfn></dfn>


<kbd></kbd>


<samp></samp>


<sub></sub>


<sup></sup>


<var></var>

その他の要素(ブロック)


<address></address>


<div></div>


<hr>


<p></p>


<pre></pre>

その他の要素(インライン及びインラインブロック)


<br>


<img src="" width="" height="" alt="">


<span></span>

コメントアウト


<!---->

XHTML用

俺はXHTML派だという人向けに、終了タグが存在しないタグに/>を付加したバージョンも用意しておきますヽ(・ω・*｜壁

文書構成関連


<link rel="" rev="" href="" title="" type="" media="" />


<meta http-equiv="" content="" />


<meta name="" content="" />

リンク関連


<map name=""><area shape="" coords="" href="" alt="" /></map>


<area shape="" coords="" href="" alt="" />

フォーム関連


<input type="text" name="" size="" value="" />


<input type="password" name="" size="" value="" />


<input type="file" name="" size="" />


<input type="checkbox" name="" value="" />


<input type="checkbox" name="" value="" checked="checked" />


<input type="radio" name="" value="" />


<input type="radio" name="" value="" checked="checked" />


<input type="hidden" name="" value="" />


<input type="submit" value="" />


<input type="reset" value="" />


<input type="button" value="" />


<input type="image" src="" alt="" />

テーブル関連


<colgroup><col span="" /></colgroup>


<col span="" />

その他の要素(ブロック)


<hr />

その他の要素(インライン及びインラインブロック)


<br />


<img src="" width="" height="" alt="" />

この記事が参考になった方は応援のアクセスをお願いします♪

ゲーム情報

マークアップエンジニア・HTMLコーダー必見! コーディングが非常にはかどり時間短縮・ストレス軽減にも繋がる手段を紹介します。