Frontend is what the visitors of your website see.
Backend is, what you see, if you are logged in and e.g. edit your posts or pages.
A shortcode is usually a term in squared brackets and behaves like a text module. Many plugins use shortcodes, to insert e.g. a contact form or a slider into your content without the need to write complicated HTML. E.g., the shortcode [contact-form-7 id="1234" title="Contact form 1"] would add the contact form with the ID 1234 and a title “Contact form 1” into your post or page.
…automatically is replaced with the correct HTML means, that with the underlying logic WordPress the shortcode will get replaced with some HTML-Tags in the HTML document.
To make it less theoretically, let’s imagine you edit a long post with a summary and you want to allow your website visitors to skip the long text and directly jump to the summary:
You can start by adding some new text, e.g. “Directly go to the summary”. Next you mark that text and add a link with a click on the chain icon. As link target you enter #summary.
Now you need an anchor tag, which marks the position of that summary as target for that previously added link. Normally you would need to switch to the text edit mode and add something like <a id="summary">Summary</a>, but to make it easier, you can just click into the text to set the cursor at the desired position and then click the anchor symbol and enter as name for the anchor summary. If you now click “OK”, the plugin will insert some text in squared brackets –?that is the shortcode. WordPress will know, that when displaying the post in the browser, it has to replace that shortcode with the right HTML. It will “automatically replace [the shortcode] with the correct HTML in the frontend”.
As a result the website visitor sees the text “Directly go to the summary” and the browser will scroll with a smooth transition (not jump abruptly) to the summary.
Does this answer your question?
