Having a basic understanding of HTML is a must if you are blogging.
Hypertext Markup Language is what HTML stands for, in case you didn’t know. Your web browser uses this coding language to determine how to view a webpage.
These various element types are contained within HTML tags. They are made up of angle brackets that contain the abbreviation or name for each code.
Typically, tags begin with <> and end with.
The fifth major version of the HTML markup language, known as HTML5, is now in use on the World Wide Web.
It should come as no surprise that the business sector Uses HTML5 the most.
However, HTML will be useful for every dedicated blogger.
The entire code could appear to be a confused tangle of letters, symbols, and misspelled words if you’re unfamiliar with it.
The good news is that adding simple tags to your blog doesn’t require you to be an expert coder or a Genius.
Actually, you don’t need to comprehend a lot of coding to use HTML tags correctly.
But to improve the caliber of your blog entries and your blogging skills, you will need to grasp a few phrases and know how to employ a few tags.
I’ll go over nine HTML tags in this article that you ought to utilize for your upcoming blog post.
First, though, let me explain why it’s crucial that your blog entries have HTML elements.
Why HTML tags are necessary for your blog
Most of the best bloggers are proficient in HTML writing.
Why?
They are able to use their content for pretty much anything they want. You can also have the same freedom with these tags.
HTML is the solution, for instance, if you want an image to remain in the middle, on the right, or on the left of your post.
HTML is ideal if you want to easily create lists, add line breaks, or generate block quotes on your own.
It will load substantially faster if you change WordPress’ text editor from a visual to an HTML view.
To switch over, simply click the “HTML” or “Text” button. This is how the difference appears:
Writing in HTML requires you to never take your hands off the keyboard, making it much faster. Additionally, you will be in complete control of the way your information is organized and looks.
Any text editor can be used to write HTML. It’s not necessary for you to write only on WordPress.
But as you gain more coding experience, stay in mind that WordPress prohibits some HTML.
Certain HTML tags are restricted by WordPress.
WordPress is the most widely used content management system (CMS) available on the Internet.
As per BuiltWith, WordPress is used on 53% of all websites created using content management systems.
WordPress will convert incorrect code entered into the post content field to plain text with cryptic characters, as in this example:
If these characters appear, it indicates that there is a problem with the code you entered in WordPress.
It’s also crucial to remember that not every HTML tag can be used in a blog post on WordPress. It is not permitted to use codes such as embed, frame, iframe, form, input, object, and textarea.
But you may use a plugin like AddQuickTag to add buttons to the WordPress text editor.
You may use this tool to create custom tags that look like this:
This plugin will alter your life once you become a little more familiar with HTML tags.
Let’s start with lists to discuss the fundamental HTML tags you’ll need to build blog entries.
1. Making inventory/lists
You can use the <ul>, <ol>, and <li> tags to create lists.
This is how an HTML “unordered,” or bulleted list, would appear:
<ul><li>Sprouts</li>
<li>Carrots</li>
<li>Tomatoes</li>
<ul> Chicken</li>
This appears as
- Green beans
- Potatoes
- Tomatoes
- Chicken
A list that is arranged differently appears. This is how it will seem:
- Green beans
- Potatoes
- Tomatoes
- Chicken
If you would like to utilize numbers instead of bullet points, replace <ul> and </ul> with <ol> and </ol>. The outcome is a numbered list that resembles this one:
If you’re not careful when entering codes, it’s really easy to make a mistake. Make sure you close a tag before you open a new one.
Within other parent list items, nested lists can also be created.
When you need to list multiple categories of things or themes at once, this is really helpful.
In every blog, images are essential. However, are you familiar with using image tags to alter images?
2. Image tags:
Images enhance the visual attractiveness of your blog.
Though they are rarely handwritten, image tag codes are helpful for adjusting the size of photos you upload to your blogs.
When using WordPress, the majority of users choose to use the “Add Media” option rather than copying and pasting the image code.
Images in HTML pages are defined by the <img> tag. They could have the following appearances:
“https://neilpatel.com/wp-content/uploads/2015/11/neilad3.png” is the image src. alt=””> width=”350″ height=”350″>
That is the HTML tag from one of my blog posts that contains this image.
If you look at the page’s code, you can see how the image tag is structured.
Images in WordPress must have titles, but not alternate descriptions. It is advisable to include alt text for photos wherever feasible.
By adding more context to a picture’s caption, alternative text increases the likelihood that your image and blog post will show up in search engine results.
Regardless of the content management system you’re using, always include alt text when uploading and embedding photos into your blog posts.
You may always add alt text in the text editor afterwards if you forget to include it in the media library.
You can resize an image in the text editor if it’s too small or too large.
Simply remove the height and alter the width of an image if its width is 400 and its height is 700. The width you enter will determine how tall the object is.
I’ll then go over how to include links using HTML tags.
3. Links
It is imperative that you incorporate links into your blog entries since they improve your search engine rankings.
Links are frequently referred to as anchors in HTML.
This is an example of how a link’s code may appear:
During my ten years of blogging, I was able to improve my writing skills with the help of eight approaches. /”target=”_blank” rel=”noopener noreferrer”> Over a decade of everyday writing</a>
The link is described or titled in the title at the end of the tag, like in this example:
The hyperlink is created using the “a href” tag.
A link to a single word, phrase, or picture can be added.
This generates a URL that looks somewhat like this: 5 Smart SEO Formulas: Boost Your Ranking on Google. You are then redirected to another webpage by clicking that link.
In this instance
In this instance, clicking the link will direct you to a tutorial I prepared that can improve your blog writing skills in as little as one month.
The portion of the link that is visible is called the anchor text. It may take the form of a word, a phrase, or a picture.
<a href=”http://websitelink.com/” title=”Description of the Link”> is how a text link would appear.
<img src=”http://websitelink.com/image.gif” alt=”Ball” /> is the format of an image link. </a>
You may enhance your connection with a few other elements as well. For instance, the link should look like this if you want it to open in a new tab or window:
\a target=”_blank” href=”http://www.websitelink.com” title=”Opens in a new window or tab”> “Explanation of the Connection”</a>
Make sure the URL you typed begins with “http://” and that you haven’t omitted a quote mark if your link isn’t working. Additionally, use straight quotes rather than curly ones.
Another helpful type of tag is a horizontal line, which divides your text.
4. Lines that are horizontal
To divide up distinct content parts on your website, draw a line that goes across it using a horizontal line. This is how it appears:
The <hr /> tag can be used to indicate topic changes in your writing, to divide text into distinct pieces, or to prioritize a certain area over others.
The line is usually light gray in color and extends from the left to the right side of the page. The line width can be altered by adding the following to the subcommand:
<hr width=”40%”>
You can change the width of this normal horizontal line tag to any desired proportion by adding width=”%”. The acronym “Hr” denotes “Horizontal Reference.”
Remember that these lines are easily overdone. Utilize them only when absolutely necessary. It’s better to have less.
Another technique to structure your text for readability is to use blockquotes.
5. Quotes in blocks
It’s likely that you have already cited or mentioned someone in a blog article. I am aware that I have.
As you are aware, adding a quote requires citing your sources.
Adding quotations to an HTML blockquote like this is powerful.
Simply add a <blockquote> tag to complete the task.
It ought to appear like this:
<blockquote> “This is your quote.” The one who stated quote</blockquote>
This is how the code will appear:
Combining the two codes will allow you to add a link to a blockquote.
By referencing a source, blockquotes not only enhance your trustworthiness but also have a visually beautiful appearance.
There’s another HTML tag you should be aware of: heading tags.
6. Headings
Writing catchy headlines takes effort.
However, headers let your reader distinguish between various content sections.
They appear in every blog article I write. They aid in article organization and indicate to readers where to look for particular subjects.
This is the title of a blog post I wrote called “The Ultimate Guide to Writing Blog Posts That Rank in Google’s Top 10.”
Most websites allow you to use one of the following six heading tags: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
Headings get smaller as the numbers get bigger. An h2 heading is bigger than an h4 heading, for instance.
However, different WordPress themes may employ headings in different ways.
For the blog article title, you would normally use a heading the size of a h1. “Sub subheadings” are typically h3 or smaller, whereas subheadings typically consist of h2.
When using headings, consider hierarchy and make an effort to maintain consistency in your layout.
Don’t compose a blog post at random using h3 headers, for instance, if you’ve decided that your headings will be h2.
Additionally, never place links in headers. Amidst the crowd, they can easily be lost. Make sure you don’t add links to headers and subheadings—only links to sentences.
Let’s now discuss a few more crucial formatting tags.
7. Font Formatting
Text lines that are bolded, italics, or underlined are simple ways to highlight words or phrases.
The tags <strong> and <em> have become increasingly popular since the Semantic Web movement, but <b> and <i> were the original tags for bold and italic text.
Write the code <strong> “Your text here”</strong> to bold text.
The statement “Italicized text puts a great emphasis on certain words” is an example of italicized text.
However, I do not advise using bold and italics together.
Using the <u> code, you may also underline text like this. Similar to how bold or italicized language does, this can also convey emphasis or immediacy.
Use caution when using underlined text codes, though, as they can be mistaken for hyperlinks by readers.
Your blog could be easier to read if you don’t use line break tags. This is the reason.
8. Line Breaks
A single gap is created by line breaks between certain lines of text, like in this example:
You may use the <br/> tag to add line breaks. Writers frequently use these self-closing tags for address entry, recipe writing, and poetry.
This is an example of a line break code:
“This is an
line-break
Moreover, line breaks might improve the readability of your blog entries.
Which literary category did you find most enjoyable to read? I assume you like the first one better.
The additional whitespace is the reason for that. Make the most of it!
Although many people believe that whitespace is undesirable, it really helps to keep text readable by directing the reader’s eye to the next line.
Another easy technique to maintain consistency in your blog entries is to align items.
9. Align components
There’s nothing more annoying than attempting to align an image and failing miserably.
Synced object alignment makes your content appear a lot more polished and well-organized.
In my blog entries, I like to center specific photographs, like this one:
Simply use the tag <p align=”center”> before the image or line of text you wish to align, and then insert </p> after it to achieve the desired alignment.
The same holds true for left- or right-aligning text or an object.
If you ever find it difficult to align a line of text or an image, this tag is a wonderful one to have in mind. You can quickly and simply include it in the body of your blog post.
In Summary
You can’t always rely on content management systems (CMSs) to precisely customize your material if you have a blog or intend to start one.
You will save a ton of time if you employ these simple HTML tags. Although HTML5 is quite popular, using it doesn’t require you to be an expert coder or web developer.
If you use the HTML version of WordPress instead of the visual preview version, the text editor will load considerably more quickly.
Furthermore, you won’t ever need to take your hands off the computer if you know how to manually add HTML tags. That’s quite important if you’re currently writing nonstop.
To list various items, create lists using the <ul>, <ol>, and <li> tags. Both numbered and bulleted lists can be made.
By adding <img>, you can embed photos using image tags. Images can also be manually resized to fit your web page in terms of height and width.
Links are inserted into the body of your blog entries using link tags, also known as href tags. You can link to other stuff from them. To increase your internet presence, you must have those.
Horizontal lines can be inserted using the <hr /> tag. But keep in mind: don’t use these too frequently.
With <strong>, <em>, and <u>, you can format your typefaces to be bold, italic, or underlined. To maintain a professional appearance for the body of your writing, try using one at a time.
Adding line breaks to your blog entries with the <br/> element will make them easier to read.
Additionally, use the tag <p align=”left, center, or right”> to align items to show on the left, center, or right of your webpages.
With the help of these HTML tags, you’ll improve your blog article and possibly even save some time.