HTML
Content
This article is the first in a series of posts looking at the coding languages that form a WordPress site.
It features a quick overview of how HTML works on your site.
Find the second article on CSS here. See the third on PHP here. And view the fourth on Javascript here.
In general, when coding a site for WordPress, you should prioritize them in this order. First, accomplish anything you can with HTML, the subject of this article. Then with CSS, then PHP, then Javascript. Doing so will minimize the size of your webpages, speed up loading, and help your SEO and user experience.
What is HTML?
Put simply, HTML provides your site's meaning and structure. CSS provides its aesthetics. PHP and Javascript provide interactivity and functionality. They are the frontend languages used in WordPress. In other words, they control what is seen in the browser.
Tim Berners-Lee developed HTML from 1990-1991. He also invented the world wide web.
HyperText Markup Language
HTML is the World Wide Web's core markup language. Originally, HTML was a language for semantically describing scientific documents. However, it evolved over the years to describe a variety of document types and even applications.
As mentioned above, it works with technologies such as Cascading Style Sheets (CSS) and scripting languages such as PHP and JavaScript. Browsers request HTML documents from a web server or local storage on your computer via URLs and render them into web pages.
Again, HTML describes the structure of a web page via semantics. A site's semantics are essential to search engines. It tells them what your page/post is about and the information it contains.
HTLM5
What is HTML5?
HTML5 is widely used as a buzzword to refer to modern web technologies. It's the latest evolution of the standard that defines HTML and represents two different concepts. It is a new version of HTML, with new elements, attributes, and behaviors, and an expanded set of technologies that allow the building of more diverse and powerful websites and applications.
HTML builds the structure of your site's content with tagged elements. Most have opening < > and closing < /> tags. They tell browsers how to display your site's information. Core ones used in WordPress include:
- Headings from largest to smallest - <h1></h1> to <h6></h6>
- Paragraphs - <p></p>
- Ordered (numbered) and Unordered (bullet points) Lists - <ol></ol> <ul></ul>
- List Items <li></l>
- Images - <img></img>
- Line Breaks - <br />
- Several types of internal and external Links - <a></a>
- Emphasis (italics) - <em></em>
- Importance (bold) - <strong></strong>
- Button - <button></button>
- Form - <form></form>
- Label (form field labels) - <label></label>
- Input (form fields) - <input>
- Table - <table></table>
- Table Row - <tr></tr>
- Table Header - <th></th>
- Table Data - <td></td>
Other HTML markup includes special elements such as <body> <header> <footer> <article> <section> <div> <span> <aside> <audio> <canvas> <datalist> <details> <embed> <nav> <output> <video> and many others. The Mozilla link below is a good resource for reviewing them.
Some elements like <div> and <span> are non-semantic. Semantic elements like <article> and <aside> clearly describe their meanings to the browser. It is best to use semantic elements over non-semantic ones whenever possible.
Attributes provide additional information about an element. An example is href for links hosted on a server. <a href="https//:mobileatom.net">Mobile Atom Code</a> links the text Mobile Atom Code to the URL https//:mobileatom.net.
WordPress's classic editor converts your WYSIWYG content into HTML for the main content area. Some of the blocks in WordPress's modern Gutenberg editor are in effect HTML blocks. There is also a custom HTML block. PHP programming outputs the HTML for the WordPress header, footer, sidebar, and main content area, aka the loop.
Wrapping Up
I hope you have enjoyed this quick look at WordPress's simplest but most important coding language. Find out more about HTML with the reference resources below.
HTML Resources
- HTML Coding Standard - https://html.spec.whatwg.org/multipage/
- Mozilla Developer Network HTML Page - https://developer.mozilla.org/en-US/docs/Web/HTML
- Introduction to HTML (How Tos by Element) - https://www.w3schools.com/html/html_intro.asp
- HTML Validator - https://validator.w3.org/
- A Fun App for Learning HTML and other languages - http://getmimo.com/
- HTML6: What is it and when is it arriving? - https://www.creativebloq.com/features/html6
- Can I Use? - HTML5 - https://caniuse.com/#cats=HTML5
- LAMP, the WordPress Software Stack - https://en.wikipedia.org/wiki/LAMP_(software_bundle)