Coding Basics: HTML for beginners

Pssst. Want us to customize your theme for half the price?

Good morning! I know I post a good variety of content here, and have covered some pretty advanced topics that may be hard to follow. Today I want to take a step back and cover some very basic knowledge: HTML for beginners.

What is HTML?

HTML stands for HyperText Markup Language and is the primary language used to create web pages. HTML elements should be used to build the structure of a page, while the styling should be done by CSS (which we’ll discuss tomorrow)!

How to denote an HTML element

An `<` opening and closing `>` bracket surround all HTML commands.

Basic font styles

To change the appearance of our text, we can use HTML commands.

<b>Bold</b>
OR
<strong>Bold</strong>

Bold

<i>Italic</i>
OR
<em>Italic</em>

Italic

<u>Underline</u>

Underline

Basic paragraph tags

If we want to force a line break, or define a chunk of text as a paragraph (so that is can styled accordingly by our CSS), we need to add HTML tags.

<p>Paragraph</p>
OR
<br>Line Break (no end tag necessary)

Inserting images

Adding media from a URL is done using the image source tag:

<img src="IMG_URL">

Adding links

And to add a link we use an anchor tag, with a hypertext reference.

<a href="LINK_URL">VISIBLE_TEXT</a>

Where to use

These are just the basic elements that are allowed in most places and used most often. You can usually use these when you post in a forum, comment on a blog, or send an email. Since most blog platforms come with visual editors, it isn’t as important for us to know these my heart. If we are curious about them though, we can always create something in our Visual Editor and then switch over to our Text Editor and see what HTML code WordPress inserted for us.

Examples of HTML for beginners

A great place to know these basic elements, however, is if you’re trying to set up a widget area, as these do not have visual editors. Often I see plugins installed just to provide a specific widget function. One such widget is Jetpack’s Image widget. If you want to insert an image, you can easily do so by just pasting the URL into this widget. This may become a problem, however, if you have a sidebar styled in such a manner that each widget is somehow separated, and you want multiple images to be in the same widget. This is easy to do, however, by just using our image tag in a simple text widget! If we want that image to link somewhere, we can just wrap it in our anchor tags!

Similarly, you can use just use a text widget to insert your social media icons with just a little HTML.