{"id":1495,"date":"2011-06-16T23:33:15","date_gmt":"2011-06-17T06:33:15","guid":{"rendered":"https:\/\/bryanhadaway.com\/?p=1495"},"modified":"2025-05-22T15:23:33","modified_gmt":"2025-05-22T22:23:33","slug":"super-basic-html-guide","status":"publish","type":"post","link":"https:\/\/webguy.io\/blog\/super-basic-html-guide\/","title":{"rendered":"Super Basic HTML Guide"},"content":{"rendered":"<p>I tend to forget the beginners with my writing. So I&#8217;m going to take it way back momentarily to the basics.<\/p>\n<h2>How to Create a Text Link<\/h2>\n<h3>Code<\/h3>\n<pre><code>&lt;a href=&quot;http:\/\/website.com\/&quot;&gt;Check This Site Out&lt;\/a&gt;<\/code><\/pre>\n<h3>Demo<\/h3>\n<p><a href=\"#\">Check This Site Out<\/a><\/p>\n<h2>How to Display an Image<\/h2>\n<h3>Code<\/h3>\n<pre><code>&lt;img src=&quot;http:\/\/website.com\/images\/kittens.jpg&quot; alt=&quot;Kittens&quot; \/&gt;<\/code><\/pre>\n<h3>Demo<\/h3>\n<p><img decoding=\"async\" height=\"209\" width=\"640\" loading=\"lazy\" src=\"https:\/\/webguy.io\/blog\/images\/posts\/kittens.jpg\" alt=\"Kittens\" \/><\/p>\n<h2>How to Create an Image Link (Combining What We Just Learned)<\/h2>\n<h3>Code<\/h3>\n<pre><code>&lt;a href=&quot;http:\/\/website.com\/&quot;&gt;&lt;img src=&quot;http:\/\/website.com\/images\/kittens.jpg&quot; alt=&quot;Kittens&quot; \/&gt;&lt;\/a&gt;<\/code><\/pre>\n<p><em>Note: You can also put text and images together in a link.<\/em><\/p>\n<h3>Demo<\/h3>\n<p><a href=\"#\"><img decoding=\"async\" height=\"209\" width=\"640\" loading=\"lazy\" src=\"https:\/\/webguy.io\/blog\/images\/posts\/kittens.jpg\" alt=\"Kittens\" \/><\/a><\/p>\n<h2>How to Make Text Bold<\/h2>\n<h3>Code<\/h3>\n<pre><code>I do believe the word is &lt;strong&gt;they're&lt;\/strong&gt;, not there or their.<\/code><\/pre>\n<h3>Demo<\/h3>\n<p>I do believe the word is <strong>they&#8217;re<\/strong>, not there or their.<\/p>\n<h2>How to Make Text Italic<\/h2>\n<h3>Code<\/h3>\n<pre><code>I do believe the word is &lt;em&gt;they're&lt;\/em&gt;, not there or their.<\/code><\/pre>\n<h3>Demo<\/h3>\n<p>I do believe the word is <em>they&#8217;re<\/em>, not there or their.<\/p>\n<h2>How to Create a Paragraph<\/h2>\n<h3>Code<\/h3>\n<pre><code>&lt;p&gt;Goodnight. Today was a beautiful day, wasn't it?&lt;\/p&gt;\r\n\r\n&lt;p&gt;Night. Today was a beautiful day.&lt;\/p&gt;<\/code><\/pre>\n<h3>Demo<\/h3>\n<p>Goodnight. Today was a beautiful day, wasn&#8217;t it?<\/p>\n<p>Night. Today was a beautiful day.<\/p>\n<h2>How to Break and Return<\/h2>\n<h3>Code<\/h3>\n<pre><code>I'm not really.&lt;br \/&gt;\r\nSure, if I know.&lt;br \/&gt;\r\nHow haikus work.<\/code><\/pre>\n<h3>Demo<\/h3>\n<p>I&#8217;m not really.<br \/>\nSure, if I know.<br \/>\nHow haikus work.<\/p>\n<h2>How to Use Header Hierarchy \/ Page Structure<\/h2>\n<h3>Code<\/h3>\n<pre><code>&lt;h1&gt;Domestic Animals (Title of Page)&lt;\/h1&gt;\r\nOn this page we'll discuss various domestic animals.\r\n\r\n&lt;h2&gt;Kittens (Main Sub-topic)&lt;\/h2&gt;\r\nKittens are good pets for indoors and outdoors.\r\n\r\n&lt;h3&gt;Brown Kittens (Sub-topic of Main Sub-topic)&lt;\/h3&gt;\r\nMany people like brown kittens.\r\n\r\n&lt;h2&gt;Puppies (Another Main Sub-topic)&lt;\/h2&gt;\r\nPuppies are better pets for outdoor play.\r\n\r\n&lt;h3&gt;Brown Puppies (Sub-topic of Another Main Sub-topic)&lt;\/h3&gt;\r\nMany people like brown puppies.<\/code><\/pre>\n<p><em>Note: You can use headers all the way to h6.<\/em><\/p>\n<h3>Demo<\/h3>\n<h1>Domestic Animals (Title of Page)<\/h1>\n<p>On this page we&#8217;ll discuss various domestic animals.<\/p>\n<h2>Kittens (Main Sub-topic)<\/h2>\n<p>Kittens are good pets for indoors and outdoors.<\/p>\n<h3>Brown Kittens (Sub-topic of Main Sub-topic)<\/h3>\n<p>Many people like brown kittens.<\/p>\n<h2>Puppies (Another Main Sub-topic)<\/h2>\n<p>Puppies are better pets for outdoor play.<\/p>\n<h3>Brown Puppies (Sub-topic of Another Main Sub-topic)<\/h3>\n<p>Many people like brown puppies.<\/p>\n<h2>How to Create Unordered Lists<\/h2>\n<h3>Code<\/h3>\n<pre><code>&lt;ul&gt;\r\n&lt;li&gt;Milk&lt;\/li&gt;\r\n&lt;li&gt;Eggs&lt;\/li&gt;\r\n&lt;li&gt;Cheese&lt;\/li&gt;\r\n&lt;\/ul&gt;<\/code><\/pre>\n<h3>Demo<\/h3>\n<ul>\n<li>Milk<\/li>\n<li>Eggs<\/li>\n<li>Cheese<\/li>\n<\/ul>\n<h2>How to Create Ordered Lists<\/h2>\n<h3>Code<\/h3>\n<pre><code>&lt;ol&gt;\r\n&lt;li&gt;Milk&lt;\/li&gt;\r\n&lt;li&gt;Eggs&lt;\/li&gt;\r\n&lt;li&gt;Cheese&lt;\/li&gt;\r\n&lt;\/ol&gt;<\/code><\/pre>\n<h3>Demo<\/h3>\n<ol>\n<li>Milk<\/li>\n<li>Eggs<\/li>\n<li>Cheese<\/li>\n<\/ol>\n<h2>How to Create Sub-lists (List Inside of a List Item)<\/h2>\n<h3>Code<\/h3>\n<pre><code>&lt;ul&gt;\r\n&lt;li&gt;Breakfast Stuff\r\n&lt;ol&gt;\r\n&lt;li&gt;Milk&lt;\/li&gt;\r\n&lt;li&gt;Eggs&lt;\/li&gt;\r\n&lt;li&gt;Cheese&lt;\/li&gt;\r\n&lt;\/ol&gt;\r\n&lt;\/li&gt;\r\n&lt;li&gt;Lunch Stuff&lt;\/li&gt;\r\n&lt;li&gt;Dinner Stuff&lt;\/li&gt;\r\n&lt;\/ul&gt;<\/code><\/pre>\n<h3>Demo<\/h3>\n<ul>\n<li>Breakfast Stuff\n<ol>\n<li>Milk<\/li>\n<li>Eggs<\/li>\n<li>Cheese<\/li>\n<\/ol>\n<\/li>\n<li>Lunch Stuff<\/li>\n<li>Dinner Stuff<\/li>\n<\/ul>\n<h2>How to Use Divs (Should Be Used 9 out of 10 Times Over Tables)<\/h2>\n<h3>Code<\/h3>\n<pre><code>&lt;div&gt;Anything can be put inside of a div! However, it won't do much, but sit there and wait to be styled with CSS. Divs are a web designer's best friend and are useless until you learn CSS...&lt;\/div&gt;<\/code><\/pre>\n<h3>Demo<\/h3>\n<div>Anything can be put inside of a div! However, it won&#8217;t do much, but sit there and wait to be styled with CSS. Divs are a web designer&#8217;s best friend and are useless until you learn CSS&#8230;<\/div>\n<p>You&#8217;re always welcome to post HTML and CSS questions for me in the <a href=\"https:\/\/webguy.io\/blog\/forum\/web-tech-answers\/\">Web + Tech Answers forum<\/a>.<\/p>\n<p>Also, here are some highly respected places to learn online:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3schools.com\/html\/\">Learn HTML<\/a><\/li>\n<li><a href=\"https:\/\/www.w3schools.com\/css\/\">Learn CSS<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>I tend to forget the beginners with my writing. So I&#8217;m going to take it way back momentarily to the basics. How to Create a Text Link Code &lt;a href=&quot;http:\/\/website.com\/&quot;&gt;Check This Site Out&lt;\/a&gt; Demo Check This Site Out How to Display an Image Code &lt;img src=&quot;http:\/\/website.com\/images\/kittens.jpg&quot; alt=&quot;Kittens&quot; \/&gt; Demo How to Create an Image Link <a href=\"https:\/\/webguy.io\/blog\/super-basic-html-guide\/\" class=\"more-link\">&#8230;<span class=\"screen-reader-text\">  Super Basic HTML Guide<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39,5],"tags":[239,281,206],"class_list":["post-1495","post","type-post","status-publish","format-standard","hentry","category-code","category-web-design","tag-code","tag-html","tag-web-design"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/posts\/1495","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/comments?post=1495"}],"version-history":[{"count":0,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/posts\/1495\/revisions"}],"wp:attachment":[{"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/media?parent=1495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/categories?post=1495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/tags?post=1495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}