Hack Your Way to Becoming an HTML Expert
This post is by Blair de Jong of The Bootstrapped Entrepreneur.
I recently read an article in Inc. magazine Leadership: CEOs Learn to Speak in Code, which shares the story of a CEO who learned how to code.
The CEO headed up a growing online business and thought of himself as a fairly tech savvy entrepreneur. But, when his business really took off, he couldn't understand why there were delays in development. He decided he needed to brush up on his coding skills, so he could better understand Web development and programming. He started with a few night courses before enrolling in a full-fledged developer course to really dig in and learn as much as he could.
This got me thinking about how many people I know who think they're tech savvy but probably have no clue how to write a basic web page on their own.
Maybe you're just like the CEO in the article, where you have developers working for you and you've told them "you code, I'll take care of everything this". Unfortunately, in today's digital business, that's not good enough anymore.
Any entrepreneur who's serious about building an online business should know a thing or two about how to write HTML.
But have no fear...
By the end of this post, you will be "Expert Enough" with 80-90% of all the HTML you'll ever need to create a web page or write a blog post.
What the Heck is HTML Anyway?HTML stands for HyperText Markup Language and is the main programming language used to program web page content to be displayed in a web browser. HTML uses tags we'll explore that have an opening and closing tag using the arrow <> brackets like this...
<opening tag>whatever goes between the tags</closing tag>
Keep this in mind as we move throughout the six most common tags used in HTML.
Hack #1: Headings <h1> through <h6> tagsHeadings are a great way to break up your content into logical chunks of common information. Think of headings like the outline to organize your web content, where you can use a cascading hierarchy to structure your content by topic and by level of importance.
You'll notice throughout this blog post I've used headings to break up each of the different HTML hacks discussed. Often when I sit down to write a blog post, I start with the headings first to organize my thoughts and lay out all the major topics or themes I want to cover.
Headings can have up to six levels and use the <h1> through <h6> tags.
<h1>This is the first H1 level heading<h1>
<h2>This is the first H2 level heading<h2>
<h3>This is the first H3 level heading<h3>
<h4>This is the first H4 level heading<h4>
<h5>This is the first H5 level heading<h5>
<h6>This is the first H6 level heading<h6>
This is the first H1 level heading
This is the second H2 level heading
This is the third H3 level heading
This is the fourth H4 level heading
This is the fifth H5 level heading
This is the sixth H6 level heading
Hack #2: Paragraphs <p> tagParagraphs use the <p> tag to break up your content into, well, paragraphs. Often, you will find a CMS (content management system) like WordPress will enter the <p> tag automatically for you. However, by entering the <p> tag, you can guarantee there's the obligatory whitespace line into between paragraphs. Whitespace is critical to keeping the reader's eyes flowing across the web page as they're reading your content.
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
This is the first paragraph.
This is the second paragraph.
This is the third paragraph.
Hack #3: Bullets and Numbering <ul>, <ol> and <li> tagsAnother way to organize content on the page is to use bulleted or numbered lists. Bullets and numbered lists give you the freedom to convey short, staccato bursts of information without always to have a complete sentence, yet still get your point across.
I'm a huge addict of bullets and numbering in my blog posts and emails, as this is often how my brain works.
Example: bulleted or "unordered" list
- Bullet 1 item
- Bullet 2 item
- Bullet 3 item
Example: numbered or "ordered" list
<li>Number 1 item</li>
<li>Number 2 item</li>
<li>Number 3 item</li>
- Number 1 item
- Number 2 item
- Number 3 item
Hack #4: Formatting <strong>, <em> and <u> tagsNow, to add that extra bit of pop to make certain pieces of your content stand out, you may want to bold, italicize or underline specific words or phrases.
<strong>This is a bold example</strong>
<em>This is an italics example</em>
<u>This is an underline example</u>
This is a bold example
This is an italics example
This is an underline example
Hack #5: Links <a href> tagLinks are what connects the Internet together. You probably clicked on a link to get to this post and will most likely click on a link leaving this post. Without getting into all the SEO (Search Engine Optimization) stuff, I'll show you the basics to creating a link.
There's three main components to creating a link using the <a> tag.
href= destination URL the visitor will be taken to after clicking on the link
title= tooltip popup that will show up if a visitor hovers over the link
- anchor text = what you want the link to say to your visitors
hrefand anchor text are required to create a link. However, I always recommend including the
titletoo, as this provides a better user experience and helps you provide additional information that may be too much to include in the anchor text.
Example<a href="/" title="Expert Enough">This is a link to Expert Enough</a>
Hack #6: Images <img> tagThe final HTML hack we'll look at is images using the <img> tag. Most people are visual thinkers and we've heard the expression "a picture speaks a thousand words". Using images through your website can add a ton of value to conveying your message.
<img src="https://expertenough.imgix.net/uploads/2011/10/ee2.png" title="Expert Enough logo" alt="Expert Enough logo">
Additional ResourcesFor the do-it-yourself types, the go to website I use is w3schools.com, where I can find just about anything I ever need to hack my HTML.
If learn better in an online classroom environment and willing to pay a small investment in learning, you can also check out these great resources.
FINAL WORDSAs you learn how to hack your way through HTML, I highly recommend using Google Chrome as your browser. Chrome offers a nifty little feature called "Inspect Element" that allows you to see what's going on behind the scenes on any given part of a web page.
Hover over the piece of content you're interested in.
Right click on it and choose Inspect Element.
You will see the HTML source code and syntax to generate that element on the page. To the right, you can also see the CSS (cascading style sheets) used to provide advanced formatting like fonts, logos, margins, padding, etc. CSS is a whole nother ball of wax for us to cover another day, so won't go into it here.
HTML is nothing to be scared about it. Go code!
What HTML hacks do use in your everyday life? What tools or resources do you recommend to learn HTML? Let us know in the comments below.
Subscribe to the Expert Enough newsletter.
Get our latest articles sent to your inbox weekly: