Did you know that when you format your text in WordPress you may be adding or changing the HTML in your page? Well I did not know this before watching the tutorial, Practical HTML for No-Coders, by Jen Kramer. When you use WordPress to make formatting changes, you’re actually interacting with the underlying HTML structure of your page. Some examples of text controls associated with HTML tags that I learned about in the tutorials include adding headings, creating links, and making lists.
Headings
Headings are crucial for structuring content, and WordPress makes it easy to add them. However, what you’re really using are heading tags like <h1>, <h2>, etc. An example of what it would look like in HTML before you press the button is, “Heading”, but after you press the button it looks like, “<h1>Heading</h1>”.
Links
In WordPress, you use the “Insert Link” button to incorporste your text with the proper tag. But in HTML hyperlinks are created using the <a> tag. An example of how this would look in HTML before you press the button is, “Click Here”, but after you press the button it looks like, “<a href=”https://vinsblog.com”>Click Here</a>”.
Lists
Another commonly used feature on websites are lists. In the WordPress text control there is a button to created bulleted or numbered lists, but in HTML the tags look like, <ul> for unordered lists and <ol> for ordered lists. An example of how this would look in HTML before you press the button is:
– First item
– Second item
But after you click the button it looks like:
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
Conclusion
While the visual editor my hide the code, understanding how WordPress changes the HTML behind the scenes can be very helpful when it comes to fine-tuning your page and troubleshooting issues. By having a basic idea of what’s going on in the code of your website can give you better control over the look and functionality of your site.