{"id":3489,"date":"2005-09-11T13:09:03","date_gmt":"2005-09-11T20:09:03","guid":{"rendered":"http:\/\/michaelhans.com\/eclecticism\/2005\/09\/11\/basic-html-tag-cheatsheet\/"},"modified":"2019-12-18T15:02:23","modified_gmt":"2019-12-18T23:02:23","slug":"basic-html-tag-cheatsheet","status":"publish","type":"post","link":"https:\/\/michaelhans.com\/eclecticism\/2005\/09\/11\/basic-html-tag-cheatsheet\/","title":{"rendered":"Basic HTML tag cheatsheet"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:7774,&quot;href&quot;:&quot;http:\\\/\\\/www.example.com&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20260310000103\\\/https:\\\/\\\/example.com\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-03-10 01:03:13&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-04-07 00:21:30&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-14 23:41:13&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-14 23:41:13&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p>After a friend asked me a few questions about the basic HTML tags while trying to clear up some confusion, I went Googling for some sort of cheat sheet listing just the most basic tags. I couldn&#8217;t find one &#8212; just came up with a lot of full-blown tutorials or cheat sheets listing every tag in the book &#8212; so I tossed this together. Hopefully it helps.<\/p>\n<p>I&#8217;m only looking at the tags most likely to be used in your standard, basic weblog post, so there won&#8217;t be much in the way of structural stuff here, just presentational.<\/p>\n<p><!--more--><\/p>\n<hr \/>\n<ul>\n<li><strong>Paragraphs<\/strong>: Require and opening <em>and<\/em> closing tag.\n<p><code>&lt;p&gt;This is a paragraph.&lt;\/p&gt;<\/code><\/p>\n<\/li>\n<li>\n<p><strong>Bold<\/strong>: Requires an opening and closing tag. Can be written in two ways.<\/p>\n<p><code>&lt;b&gt;<\/code><b>This is bold text.<\/b><code>&lt;\/b&gt;<\/code><br \/>\n<code>&lt;strong&gt;<\/code><strong>This is &#8216;strong&#8217; text.<\/strong><code>&lt;\/strong&gt;<\/code><\/p>\n<p>Both will display exactly the same way in most browsers.<\/p>\n<\/li>\n<li>\n<p><strong>Italic<\/strong>: Requires an opening and closing tag. Can be written two ways.<\/p>\n<p><code>&lt;i&gt;<\/code><i>This is italicized text.<\/i><code>&lt;\/i&gt;<\/code><br \/>\n<code>&lt;em&gt;<\/code><em>This is &#8217;emphasized&#8217; text.<\/em><code>&lt;\/em&gt;<\/code><\/p>\n<p>Both will display exactly the same way in most browsers.<\/p>\n<\/li>\n<li>\n<p><strong>Underline<\/strong>: Requires an opening and closing tag. This is technically a <em>deprecated<\/em> tag and not officially a part of modern HTML, but is still recognized and rendered by most browsers.<\/p>\n<p><code>&lt;u&gt;<\/code><u>This is underlined text.<\/u><code>&lt;\/u&gt;<\/code><\/p>\n<\/li>\n<li>\n<p><strong>Strikethrough<\/strong>: Requires an opening and closing tag. This is technically a <em>deprecated<\/em> tag and not officially a part of modern HTML, but is still recognized and rendered by most browsers.<\/p>\n<p><code>&lt;strike&gt;<\/code><strike>This text is struck through.<\/strike><code>&lt;\/strike&gt;<\/code><\/p>\n<\/li>\n<li>\n<p><strong>Block Quote<\/strong>: Requires an opening and closing tag. Should not be used <em>inside<\/em> a paragraph, but paragraphs can be used inside a block quote. Used for quoting sections of text from other pages.<\/p>\n<p><code>&lt;blockquote&gt;<\/code><br \/>\n<code>&lt;p&gt;This is text that was originally on another website and is being quoted here.&lt;\/p&gt;<\/code><br \/>\n<code>&lt;\/blockquote&gt;<\/code><\/p>\n<\/li>\n<li>\n<p><strong>Link<\/strong>: Requires an opening and closing tag. The link tag takes at least one argument: the destination address.<\/p>\n<p><code>&lt;a href=\"http:\/\/www.example.com\/\"&gt;<\/code><a href=\"http:\/\/www.example.com\/\">This text is linked.<\/a><code>&lt;\/a&gt;<\/code><\/p>\n<p>In the above example: <code>a<\/code> defines this as a link tag (technically an &#8216;anchor&#8217;); <code>href<\/code> defines the type of link (there are others that we&#8217;re not worrying about); <code>=\"http:\/\/www.example.com\/\"<\/code> is the target address (URL).<\/p>\n<p>For added clarity, a second argument can be added to the link. Adding the <code>title<\/code> argument will create a tooltip-style popup text when you hover over the link.<\/p>\n<p><code>&lt;a href=\"http:\/\/www.example.com\/\" title=\"An example link\"&gt;<\/code><a href=\"http:\/\/www.example.com\/\" title=\"An example link\">This text is linked and titled.<\/a><code>&lt;\/a&gt;<\/code><\/p>\n<\/li>\n<li>\n<p><strong>Image<\/strong>: Image tags have no closing tag. The image tag takes at least one argument: the location of the image file.<\/p>\n<p><code>&lt;img src=\"http:\/\/www.example.com\/imagefile.jpg\" \/&gt;<\/code><\/p>\n<p>In the above example: <code>img<\/code> defines this as an image tag; <code>src<\/code> defines the source of the image; <code>=\"http:\/\/www.example.com\/imagefile.jpg\"<\/code> is the address of the image file, and <code>\/&amp;gt;<\/code> closes the tag (as there is no closing <code>&lt;\/img&gt;<\/code> tag).<\/p>\n<p>There are a number of other arguments that can be added to <code>img<\/code> tags. While none are strictly <em>required<\/em>, the most important addition is the <code>alt<\/code> argument. This defines text that will appear if, for any reason, the image does not load.<\/p>\n<p><code>&lt;img src=\"http:\/\/www.example.com\/imagefile.jpg\" alt=\"A sample image\" \/&gt;<\/code><\/p>\n<p>Other possible arguments include <code>width<\/code> and <code>height<\/code>, which define the size of the image in pixels; <code>title<\/code>, which defines pop-up tooltip text just as it does on link tags; and <code>align<\/code>, which will &#8220;float&#8221; the image to one side or the other of any text on the page.<\/p>\n<p><code>&lt;img src=\"http:\/\/www.example.com\/imagefile.jpg\" width=\"100\" height=\"50\" alt=\"A sample image\" align=\"right\" \/&gt;<\/code><\/p>\n<p>The above sample defines an image that is 100 pixels wide, 50 pixels tall, and will &#8220;float&#8221; to the right side of the page, wrapping text around to the left. If a reader hovers their cursor over the image the text &#8220;A sample image&#8221; will appear in a pop-up tooltip, and if for any reason the image does not load, the text &#8220;A sample image&#8221; will appear on the page where the image should be.<\/p>\n<\/li>\n<li>\n<p><strong>Lists<\/strong>: These get slightly more complex, though not terribly so. There are three types of lists: <em>ordered<\/em> lists, where each successive item is designated by an ascending number; <em>unordered<\/em> lists, where successive items use bullet points; and <em>definition<\/em> lists, intended for use in dictionary style term and definition pairs. In all three types, opening and closing tags are required for the lists <em>and<\/em> all list items.<\/p>\n<p>Both ordered and unordered lists use the same basic structure: an opening tag that defines the type of list, one or more list items, and a closing tag denoting the end of the list.<\/p>\n<p>An ordered list uses the <code>ol<\/code> tag. Here&#8217;s the source code on the left, and the final list on the right:<\/p>\n<table width=\"100%\" border=\"1\">\n<tr>\n<th width=\"50%\">Source code<\/th>\n<th width=\"50%\">Final output<\/th>\n<\/tr>\n<tr>\n<td>\n<pre>\n&lt;ol&gt;\n&lt;li&gt;Item number one.&lt;\/li&gt;\n&lt;li&gt;Item number two.&lt;\/li&gt;\n&lt;li&gt;Item number three.&lt;\/li&gt;\n&lt;\/ol&gt;\n<\/pre>\n<\/td>\n<td>\n<ol>\n<li>Item number one.<\/li>\n<li>Item number two.<\/li>\n<li>Item number three.<\/li>\n<\/ol>\n<\/td>\n<\/tr>\n<\/table>\n<p>An unordered list uses the <code>ul<\/code> tag.<\/p>\n<table width=\"100%\" border=\"1\">\n<tr>\n<th width=\"50%\">Source code<\/th>\n<th width=\"50%\">Final output<\/th>\n<\/tr>\n<tr>\n<td>\n<pre>\n&lt;ul&gt;\n&lt;li&gt;Item number one.&lt;\/li&gt;\n&lt;li&gt;Item number two.&lt;\/li&gt;\n&lt;li&gt;Item number three.&lt;\/li&gt;\n&lt;\/ul&gt;\n<\/pre>\n<\/td>\n<td>\n<ul>\n<li>Item number one.<\/li>\n<li>Item number two.<\/li>\n<li>Item number three.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/table>\n<p>Definition lists use the same basic structure, only rather than using paired <code>li<\/code> (list item) tags for each item, they use a set of tag pairs: <code>dt<\/code> (term) and <code>dd<\/code> (definition).<\/p>\n<table width=\"100%\" border=\"1\">\n<tr>\n<th width=\"50%\">Source code<\/th>\n<th width=\"50%\">Final output<\/th>\n<\/tr>\n<tr>\n<td>\n<pre>\n&lt;dl&gt;\n&lt;dt&gt;Term one&lt;\/dt&gt;\n&lt;dd&gt;The definition for term one.&lt;\/dd&gt;\n&lt;dt&gt;Term two&lt;\/dt&gt;\n&lt;dd&gt;The definition for term two.&lt;\/dd&gt;\n&lt;dt&gt;Term three&lt;\/dt&gt;\n&lt;dd&gt;The definition for term three.&lt;\/dd&gt;\n&lt;\/dl&gt;\n<\/pre>\n<\/td>\n<td>\n<dl>\n<dt>Term one<\/dt>\n<dd>The definition for term one.<\/dd>\n<dt>Term two<\/dt>\n<dd>The definition for term two.<\/dd>\n<dt>Term three<\/dt>\n<dd>The definition for term three.<\/dd>\n<\/dl>\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<\/ul>\n<hr \/>\n<p>And I think that about covers the basics. Of course, let me know if anything&#8217;s not explained well, or if other tags could use a little explanation.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>After a friend asked me a few questions about the basic HTML tags while trying to clear up some confusion, I went Googling for some sort of cheat sheet listing just the most basic tags. I couldn&#8217;t find one &#8212; just came up with a lot of full-blown tutorials or cheat sheets listing every tag in the book &#8212; so I tossed this together. Hopefully it helps.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2040],"tags":[58,599],"class_list":["post-3489","post","type-post","status-publish","format-standard","hentry","category-blog","tag-internet","tag-weblogs"],"_links":{"self":[{"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/posts\/3489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/comments?post=3489"}],"version-history":[{"count":0,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/posts\/3489\/revisions"}],"wp:attachment":[{"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/media?parent=3489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/categories?post=3489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/tags?post=3489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}