What is HTML?
HTML is the basic building blocks of WordPress, or any other website. When you view a website, the information seen is almost always coded using HTML on the back end.
Why should I learn HTML?
One purpose of this section is to give editors the ability to use widgets, since widgets are edited using HTML and lack the visual editor like pages do. Also, the Visual Editor creates HTML, and knowing how that HTML works will give you much greater control of your website. WordPress editors that have basic knowledge of HTML will be much more effective.
This guide:
This guide is not a comprehensive guide to HTML, but a simple guide to allow editors to be better equipped when running a site and making changes to their widgets. This guide only scratches the surface of HTML.
What-you-see-is-what-you-get
When editors create content for a website, they are using what is called a WYSIWYG (what you see is what you get). What the WYSIWYG does is give the user simple word processing tools, that is converted to HTML, so anyone is able to create content for their site. To see examples of this, after you make a change in the editor, change the tab from “Visual” to “Text” to see the corresponding changes made in HTML.
Simple HTML:
The following is mostly going to be a side-by-side comparison between the WYSIWYG that we are used to, and HTML. But before we get into that, here’s a few simple concepts that need to be covered first:
- All text in HTML is contained within tags, like <p>.
- Whenever there is an opened html tag, like <p>, there must also be a closing tag, like </p>.
- More important information:
- Heading 3 tag: Headings are used as titles for a section of text. Heading 3’s are more important than heading 4’s.
- Paragraph tags: Paragraph tags are the default text type. Paragraph tags are needed for widgets, but for pages, paragraph tags are added automatically and are hidden.
- Link tags: Text in link tags become a hyperlink, which leads to another location specified if clicked on. The web address is placed in the href attribute: href=”https://yahoo.com”.
- Heading 4 tag: Heading 4 is a heading tag that is for information less important than heading 3’s, or a sub-title to heading 3’s.
- Img tag:Img tags, or image tags, are what allows images to be displayed in a website. The above example is an img tag in its simplest form, with just source attribute to give an address to the image. Within the context of WordPress, the image source can be found after upload in the properties under link URL. Not that img do no have closing tags, and end with />.There are other attributes that can (and should) be used in image tags. There is the alt tag, which is discussed more in the image properties section of this guide. An example of an alt tag attribute: alt=”building image”.You can also set width and height, or a class. For example, classes are set automatically whenever you set an alignment in the image properties. Example of class: alignleft, alignright, and aligncenter. An example of an image with the width and height set, and an alignment class: <img src=”#” width =”400px” height=”300px” class=”alignleft” />.
- Unordered list: Creates lists with using bullets. The li tags have to be located within ul open and close tag.
- Ordered list: Creates lists with ordered numbers. The li open and close tags have to be located within ol open and close tags.
There is much more to HTML, but this is all that needs to be known in order to be able to edit widgets, or to give a greater understanding of HTML.