Intro to HTML: Must Know Tags for Beginners
If you’re not familiar with HTML, making even small tweaks to your website or custom MailChimp template can be a struggle. HTML is a complicated language and you won’t become an expert overnight – however, you can master a few basics that will make it easier to tweak templates, build web pages, and control your online presence.
This is by no means meant to be a comprehensive guide to HTML, but rather an introduction with some of the most basic tags you’ll need to customize your in-house marketing campaigns.
What is HTML?
Let’s start with the most basic question – “what is HTML?”
Hypertext markup language (HTML) is a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects. You use specific tags to customize each element of a web page.
Check it out for yourself: Open up a well-designed site in Chrome, right click, and select "Inspect Element." You’ll be able to get a look behind-the-scenes at how the site was coded.
HTML Elements
HTML elements are individual components of your webpage that are made up of a start tag <example> and an end tag </example >.
Here’s an example of what a simple HTML page might look like:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Sample heading</h1>
<p>A sample paragraph would go here.</p>
</body>
</html>
Note the <html> tag at the very top.
This element specifies the language the webpage or document is written in. Without this tag your computer won’t know how to process all the code that follows it. It’s important to realize that browsers do not display the HTML tags, but they use them to render the content of the page.
The Basics
<body>
The visible part of the HTML document is between <body> and </body>.
Your body tag is the first element content tag that you can open after you’ve opened your initial html tag.
<head>
This tag is one of the content elements that can be opened within your body tag. You can vary the size of your headings and subheadings by specifying whether you want <h1>, <h2>, <h3>, <h4>, <h5>, or <h6>.
<h1> defines the most important heading. <h6> defines the least important heading.
<p>
Used for formatting paragraphs of text. Just to be clear, the paragraph tag defaults to which ever style you already have assigned to your style sheet.
<a>
HTML links are defined with the <a> tag.
For example:
<a href="hueandtonecreative.com">You would put the text you want to be hyperlinked here. </a>
<img>
To incorporate an image into your page you’ll want to use an <img> tag -- the source file (src), alternative text (alt), width, and height can all be defined.
Example here:
<img src="hueandtonelogo.jpg" alt="hueandtonecreative.com" width="210" height="210">
Always remember to close your tags. Anytime you open a tag <example> you should close it after you’ve defined all your content </example>.
Style Elements
<style>
Your style tags help you specify which colors and fonts are used for your headings, paragraphs, etc.
Here’s a few examples:
You could format size like this:
<h1 style="font-size:300%;">This is a heading</h1>
Color like this:
<h1 style="color:blue">This is where the text you want stylized goes. </h1>
Or both like this:
<h1 style="color:blue;"font-size:300%">This is where the text you want stylized goes.</h1>
Formatting Elements
Formatting assist with the aesthetics of your webpage, kind of like the style elements we mentioned earlier. The main difference between the two is that your formatting elements deal with text effects.
<b>
Used to make specific text bold.
<i>
Used for italicizing text.
<marked>
Highlights text.
<small>
Makes specific text smaller.
Helpful Resources
Learning HTML isn’t the easiest task, so here are a few tools to help you become a pro in no time!
Treehouse is an online coding school specializing in front end web development, JavaScript, IOS, and Python. Learn from over 1,000 video tutorials, quizzes, and coding challenges. There’s a free trial for first time users.
Lynda is a digital learning library where you can learn skills for business, design, marketing, and web development.
HTML Dog offers free online tutorials in HTML, CSS, and JavaScript. There are specific tutorials for every level of learning: beginner, intermediate, and advanced.
One last note…
Becoming proficient in HTML takes time and consistent practice, so don’t get discouraged if it doesn’t come easy to you! Be patient and try to set obtainable goals for yourself.
Web and Graphic Design in Greensboro and beyond.
Clueless on how to build a website or create a logo? We’ve got you covered! Eye catching landing pages that help reel in leads to business cards that leave a lasting impression, Hue & Tone Creative is here for all of your marketing needs.