HTML Coding Basics

One of the most important skill sets you can bring to the table during a job interview these days is a bit of coding experience. Unless you’re applying for a web development job specifically, chances are you won’t be expected you to whip up websites from scratch; however, being able to tweak formatting on a blog or change the background color on your company’s website will give you an edge over someone with no HTML experience.

Even at 435 Digital, where we have a full-time web development team, our social media folks and even account managers find themselves using basic HTML on occasion.

If you’re starting with zip, zero, zilch coding knowledge, it can be intimidating – all those brackets and letters and symbols. And god forbid you be expected to fix a chunk of code after you’ve broken it! But with a basic cheat sheet and the right resources, if nothing else, you can fake it ’til you make it.

Below are examples of commonly used HTML code. Notice how most require an open AND close tag, which includes a forward slash. Anything you want styled needs to go in between the two.


A break will push text down
<br>to the next line wherever it is placed.


A paragraph break actually inserts a space

<p>between two lines of text.


<center>This will obviously center your text</center>


  • <li>List tags</li>
  • <li>will add</li>
  • <li>bullet points</li>
  • <li>for you</li>

<hr /> This will add physical lines, like the ones on this page.


<strong>Maybe you want to make something bold</strong>


<em>Or perhaps italics</em>


<h1>Or big, like a headline</h1>


<h2>OK, maybe a smaller headline</h2>


<h3>…even smaller</h3>


And it never hurts to add a pop of color, like this:

<p style=”font-color: #9933FF;”><span style=”color: #339966;”>And it never hurts to add a pop of color, like this:</span></p>

Note, the #9933FF is the “hexadecimal value” which will determines your color.


And to get this hyperlink effect, do this …

<a href=”URL goes here”>Link text will go here</a>


One of my favorite resources for all things HTML code is a website called W3Schools. If you ask Google how to make something bold or insert a clickable image onto your page, chances are W3Schools will top the search results. It’s free, super user-friendly and has tutorials for HTML, CSS, JavaScript, PHP and more. You can serach by alphabet or function, which is nice if you’re not quite sure what the heck you’re looking for. It also has an awesome “Color Picker” that provides hexadecimal values.

#000000
#9933FF
#33CCCC

Sometimes the easiest way to achieve your desired outcome is to copy/past code from other sources and plug in your own color codes, URLs, text, etc. WebMonkey actually has an entire section of their site dedicated to cut and paste code where you can find HTML templates – a basic page, a page with a right side navigation bar, etc. Notepad ++ is a downloadable program that allows you to create HTML documents and preview them in various browsers – great if you need to tinker but don’t want to risk breaking your live website.

The moral of the story is, don’t think you need a degree in computer science to do some basic code. Use the infinite resource that is the Internet, and don’t be afraid of a little trial and error.

Tags: ,

  • http://www.spudart.org/ Matt Maldre

    Amen! Everyone in the business world should know some basic coding. I’d love for all grade schools and high schools to start teaching coding to every student. It’s simply an everyday part of the world we live in now.