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.
What is HTML?
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.
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.
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.
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 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)