HTML for WordPress

If you’re new to HTML development, WordPress is a great environment to start applying your HTML skills. In this article we’ll take a closer look at how to use HTML for WordPress.

WordPress itself has two modes for authoring content. If you are in the Add New Post page of the WordPress environment you’ll note that there are two tabs– Visual and Text. The Visual Tab allows you to use a WYSIWYG (what-you-see-is-what-you-get) editor to create your content. In visual mode the HTML is written behind the scenes based on the buttons in the interface. The Text Tab allows you to author using HTML code.

Wordpress Environment

The authoring environment in WordPress

Creating HTML for WordPress is not any different than creating HTML for any other type of web page. You simply type your HTML in to the interface provided by WordPress. Keep in mind, to some degree, the CSS styles that are applied will be from the WordPress template that you have chosen to use. This will keep everything nice and consistent.

If you’re new to HTML– even in Text mode– WordPress provides you with assistance in writing your HTML. There are buttons on the top part of the authoring interface that provide very helpful reminders while you’re coding.

HTML for WordPress is mostly used in Posts or Pages. However HTML can also be used in the sidebar, footer or other templated items within your WordPress site. If you look at the bottom of this blog, you will see that our footer– with its many links– is authored in HTML.

Some tags you can use with WordPress include:

Heading Tags Heading tags are used to place headings on the page in levels of importance. An <h1> tag represents the most important heading on a page while less important headings use <h2> through <h6> tags.

Lists Lists are a great way to provide a lot of information to a reader in a small amount of space. Readers tend to scan on the internet more than they read so lists are optimal.

Images A picture is worth 1,000 words. You need to upload your images to a server before posting them via their URL. Note that if you use the Add Media button within the WordPress authoring environment a lot of unnecessary code is added to the image code.

The main things to remember when coding HTML for WordPress is to be careful to close all of your tags– open tags may wreak havoc with the content rendered lower on the page by WordPress– and to understand how the CSS in the WordPress template and the CSS that you add to the page interact.

Be the first to comment

Leave a Reply

Your email address will not be published.