html expert

in Random Awesomeness

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

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

Example

 

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

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

Example

 

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

Another 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

 

<ul>

<li>Bullet 1</li>

<li>Bullet 2</li>

<li>Bullet 3</li>

</ul>

 

  • Bullet 1 item
  • Bullet 2 item
  • Bullet 3 item

Example: numbered or “ordered” list

 

<ol>

<li>Number 1 item</li>

<li>Number 2 item</li>

<li>Number 3 item</li>

</ol>

 

  1. Number 1 item
  2. Number 2 item
  3. Number 3 item

NOTE: The closing </li> is one of the only optional closing tags not required for the list items to still work. However, a force of habit reminds me to keep all my tags closed, so I use the </li> to close off my list items.

Hack #4: Formatting <strong>, <em> and <u> tags

Now, 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.

Examples

 

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

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

  1. href = destination URL the visitor will be taken to after clicking on the link
  2. title = tooltip popup that will show up if a visitor hovers over the link
  3. anchor text = what you want the link to say to your visitors

Some would argue only the href and anchor text are required to create a link. However, I always recommend including the title too, 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=”http://expertenough.com” title=”Expert Enough”>This is a link to Expert Enough</a>

 

This is a link to Expert Enough

Hack #6: Images <img> tag

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

Example

 

<img src=”http://expertenough.com/wp-content/uploads/2011/10/ee2.png” title=”Expert Enough logo” alt=”Expert Enough logo”>

 

Expert Enough logo

 

Additional Resources

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

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

img

***

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.

The Difference Between Experts Who Earn Millions, and The Rest of Us (Hint: It’s Not About What You Know)

For a limited time, get access to over 100 hours of video training, plus The Web’s most active entrepreneurial community, for just $1.

Turning your skills and expertise into a way to support yourself is more doable than you might think.

There’s this big misconception about expertise, that you have to be one of the world’s top experts before you can earn a living from what you know.

But expertise isn’t an absolute. You might only be a 3, on a scale of 1 to 10, but there are plenty of 1’s and 2’s out there who would pay for your knowledge and experience, right now.

The key is to find a unique corner of your topic, to start building a tribe of people who trust you as their expert, not the expert, and to be resourceful about filling in the gaps by leveraging other experts when necessary.

This is why we built Fizzle, to teach you how to support yourself independently doing what you love on The Web. Fizzle is half training library, half supportive community, and it’s full of people like you who are building their thing online.

You’ll find big name courses in Fizzle, from well known and successful online business builders. We’re talking about courses like Book Yourself Solid (Michael Port), Start a Blog that Matters (Corbett Barr), and Connect With Anyone (Scott Dinsmore). And new courses are added every month.

And right now, you can get access to everything Fizzle offers, including the course library, the community, the live coaching sessions and the behind-the-scenes Founder Stories, all for just $1 for your first month.

Learn more and join Fizzle today for just $1 »


Since applying more and more from Fizzle, I’ve started making as much (sometimes more/month) from my online business as I do from my full-time job with a fraction of the weekly hours. It’s exhilarating. I owe you guys so much.
Preston Lee, graphicdesignblender.com


P.S. — we hope you’ll check Fizzle out, but we know it isn’t for everyone. We’re a little, um, different from your typical “business” training. Watch the video on the home page to see what I’m talking about. If it isn’t your style, no hard feelings :)