HTML has been a integral part of coding for the web since its beginning. Although there are other languages<\/a> you could use, they\u2019re more complementary than direct replacements.<\/p>\n Although you can use many different languages to create websites, HTML is just about always involved. Even so, there are other languages that are just as important to foundational web design.<\/p>\n Cascading Style Sheets (CSS)<\/a> often goes hand in hand with HTML, to form a full-featured solution for creating websites. Earlier, we discussed how HTML can be used to code both structural and visual elements.<\/p>\n However, while that was common in the early days of the web, CSS is now the \u2018official\u2019 way to create visual styling. In other words, to create a modern website, HTML is first used to build the site\u2019s layout and structure. CSS is then used to add color, specific fonts, and other visuals.<\/p>\n As you might expect, while CSS and HTML have similar learning curves, they have a different structure and format. To see this for yourself, you can check out W3Schools, a collection of online coding courses that offers comprehensive tutorials on HTML<\/a> and CSS<\/a>.<\/p>\n Fortunately, you can add HTML simply and quickly within WordPress. In fact, there are multiple areas that accept HTML code, including the Text editor. Let\u2019s look at how this is done.<\/p>\n The first thing you\u2019ll need to do is log into your WordPress dashboard. Once you\u2019re there, navigate to any post or page you\u2019d like to add HTML to:<\/p>\n This will take you to the WordPress editor, where you can add content.<\/p>\n From here, look towards the right-hand side of the screen. You\u2019ll see two tabs: Visual<\/em> and Text<\/em>:<\/p>\n In a default WordPress setup, you should already be within the Visual<\/em> editor. By selecting Text<\/em>, however, you\u2019ll switch over to the native HTML editor.<\/p>\n This is actually not a full HTML editor, as it won\u2019t contain many of the elements present on your web page (such as the header and footer). However, you do get full control over many formatting elements: Here, you can enter and edit HTML code at will. We\u2019ll talk about how to achieve some specific stylistic effects next. Just be sure to save any changes, in order to apply them to your site.<\/p>\n While you definitely don\u2019t need to add HTML to WordPress, there are some specific reasons for doing so. In general, this technique is useful for introducing stylistic elements that wouldn\u2019t otherwise be possible. Let\u2019s take a look at a few examples in more detail.<\/p>\n Paragraphs are a basic requirement for practically every web page. To create a paragraph using HTML, you\u2019ll want to \u2018wrap\u2019 your text in specific tags.<\/p>\n In other words, you\u2019ll bookend the desired text with <p><\/em> at the beginning and\u00a0<\/p>\u00a0<\/em>at the end. The format here (i.e. opening a tag with angled brackets, and closing it with both angled brackets and a forward-slash) is the default way of writing HTML.<\/p>\n Line breaks are one element that bucks the trend mentioned above, in that they are usually included without closing tags. As such, to create a line break, you can simply add <br><\/em>\u00a0<\/span>before the desired line:<\/p>\n Line breaks aren\u2019t used as often as other common HTML elements, although they can come in handy.<\/p>\n While in the past you could use HTML to edit fonts directly, this is no longer a best practice. However, you can format your text using a number of different tags, in a similar fashion to paragraphs (i.e. with an opening and closing tag).<\/p>\n For example, you can easily create headings using HTML:<\/p>\n What\u2019s more you can also apply basic formatting, such as bold (using\u00a0<strong><\/em>) and italics (using <em><\/em><\/span>). You can also <\/span>achieve italics in other ways<\/a> (including through CSS), but\u00a0<em><\/em><\/span>\u00a0is the most common method.<\/span><\/span><\/span> We\u2019ve talked previously about how to add columns to WordPress<\/a>, and you\u2019ll often need to use a little CSS to get everything looking perfect.<\/p>\n For example, HTML uses <div><\/em>\u00a0tags to create new column sections, and the most modern version of the language has included some additional variations to choose from.<\/p>\n However, this isn\u2019t something we\u2019d recommend doing within the Text<\/em> editor, as you\u2019d need to include \u2018inline\u2019 CSS styles (which is not a good practice). However, WordPress.com<\/em> has a guide<\/a> on doing exactly that, if you\u2019d like to research the technique further.<\/p>\n Of course, one big worry for many people is that implementing these kinds of HTML changes will break your site. This is in fact a legitimate concern.<\/p>\n Therefore, we advise backing up your site<\/a> before making any of these changes. It\u2019s also a good idea to use a child theme<\/a>, so any edits you make will be preserved when your theme is updated.<\/p>\n What\u2019s more, we\u2019ve also put together a solid guide for undoing changes<\/a> you make in WordPress. That way, if something goes wrong, it shouldn\u2019t be difficult to get your site back to normal.<\/p>\n Regardless of the changes you make to your website, having a solid host like WP Engine at your side gives you the peace of mind needed to create the site you want.<\/p>\nHow to Code HTML & CSS<\/h2>\n
How to Add HTML to WordPress<\/h2>\n
Step 1<\/h3>\n
![\"html](\"https:\/\/wpengine.com\/wp-content\/uploads\/2018\/09\/html-guide-wordpress-resource1.png\")
<\/p>\nStep 2<\/h3>\n
![\"adding](\"https:\/\/wpengine.com\/wp-content\/uploads\/2018\/09\/html-guide-wordpress-resource2.png\")
<\/p>\nStep 3<\/h3>\n
![\"How](\"https:\/\/wpengine.com\/wp-content\/uploads\/2018\/09\/html-guide-wordpress-resource3.png\")
<\/p>\nCommon Reasons HTML Is Added to a WordPress Site<\/h2>\n
Using HTML to Add Paragraphs in WordPress<\/h3>\n
Using HTML to Add Breaks in WordPress<\/h3>\n
![\"add](\"https:\/\/wpengine.com\/wp-content\/uploads\/2018\/09\/hmtl-guide-wordpress-resource6.png\")
<\/p>\nUsing HTML to Edit Fonts in WordPress<\/h3>\n
![\"change](\"https:\/\/wpengine.com\/wp-content\/uploads\/2018\/09\/html-guide-wordpress-resource4-1.png\")
<\/p>\n
\n<\/em><\/em><\/strong><\/p>\nUsing HTML to Add Columns in WordPress<\/h3>\n
Making HTML Edits to Your WordPress Site<\/h3>\n
Get Support for More Common WordPress Questions from WP Engine<\/h2>\n