Basic HTML for WordPress Users

HTML isn’t as confusing as it might seem. In fact, even if you had never seen any HTML code before, you can probably figure out what many tags mean just from the context in which they’re used. For the most part, creating your site on the UARK WordPress network requires zero coding knowledge. That’s because our standard theme, Divi, has a drag and drop builder that makes customizing your site super simple. However, from time to time, it’s helpful to understand some basic html. Personally, I sometimes flip from the “visual” tab to “text” tab within the text module in order to check that my code is in order, and sometimes you might want to style a widget using html. This blog post shares some basic html coding that you might find helpful.

Bold

You can make text appear bold by wrapping your text in the <strong> tags. You can also use <b>, but search engines prefer the use on the <strong> tag.

Italics

You can make text appear in italics by wrapping your text in the <em> tags. <Em> stands for emphasis. 

Underline

You can underline by wrapping in the <u> tag, however, this is less common, as underlining denotes a hyperlink. If you underline text that is not a hyperlink, you could confuse users. 

Headings

Headings divide your content into sections. They should be used in a hierarchical order, and Google prefers that they be nested. For example, <h2> should only be used under <h1> not under <h3>. 

Image

While inserting an image via the media library may be the default way to add images, it’s also easy to add them via html.  You need the url of the image that you want (adding it to media library will create a url for you to use) and preface it with .single <img src> source tag.

Unlike the other tags we’ve looked at, this one does not require a closing tag. Quotation marks are used to make the code readable, but they are not necessary for the code to work. The “alt” text is used for accessibility, such as screen readers, as well as for search engine indexing. Be sure to add alt text, either through html or in the appropriate section in the media library.  

Links

Links are designated with the <a> (anchor) tag and <href> tag (hypertext reference or url). Include any text you want to be visible after the opening tag. Close the link with an </a>

Or, to link an image instead of text, you can nest the image tag. 

You can customize your link further by adding attributes, such as:

• rel — indicates a relationship for the link and its target, such as “noreferrer” to prevent referal traffic back to your site.
• target — indicates where to open the link, on a blank tab or in the same window.

Strikethrough Text

Use <del> around text you want to strike through. 

Lists

Lists help users browse your content in digestible sections. They are helpful in breaking up text and creating white space.

There are two basic types of lists, ordered lists that are numbered and unordered lists that use bullets or symbols. Ordered lists use the <ol> tag and unordered lists use the <ul> tag. Each item on the list should be wrapped in <li>.

Block Quotes

To create a blockquote, surround the citation with the <blockquote> closing and opening tages. It will appear with styling that indicates that it is a quote.

Paragraphs

Paragraphs are wrapped in a <p> tag. If you want blocks of text to appear in separate paragraphs, be sure to wrap them separately. 

Lines and Line Breaks

<Hr> inserts a line into the page. It needs no closing tag.

The <br/> tag is a line break. It is also self closing and therefore needs no closing tag.

In conclusion

I hope that this brief introduction to html tags was helpful to you. Let us know in the comments below what html you use most often!

Source: https://www.elegantthemes.com/blog/wordpress/basic-html-codes-every-wordpress-user-needs-to-know