HTML, short for Hypertext Markup Language, is the driving force behind all webpages and sites; it is the central tool by which all things “web” are designed and developed. Here, I want to provide a few basic, and a couple that are a little more advanced, HTML elements to provide a simple foundation of knowledge of HTML. These tips and tricks should be especially useful to bloggers and WordPress users, and hopefully peek your interest into learning more.
Quick Styling
You can use a few simple HTML elements to quickly bold, underline, italicize, or strikethrough text. This not only save you the tedium of having to use your mouse and manually hitting a button each time you want one of these customizations, but can in fact increase your writing productivity because you will not be breaking your typing “stride”.
-
Bold: to quickly and easily format a word, sentence, or any other grouping of text you can use the <b></b>set of tags. For example, for the sentence, “I love HTML,” if you wanted to put “love” in bold, you would use the
<b></b>tags like so: “I <b>love</b> HTML”. -
Underline: quick underlining is accomplished by using the
<u></u>set of tags. Using the above example, to underline“love”would be done this way: “I <u>love</u> HTML”. -
Italics: same thing here for italicizing text, following the same format as the tags above, using
<i></i> -
Strikethrough: this may not be commonly used around the ‘net, but I find it mainly used to represent some humorous sarcasm or irony. However, to use strikethrough styling, you simply surround your text with the
<del></del>set of tags. For example, “I <del>hate</del> love HTML.”
Headings
Headings can be used to subdivide your informational article or blog to establish organization and to signal to your readers what to expect from the following text. Headings are important and nearly essential, and, thankfully, HTML provides you with some tags to accomplish this and in varying sizes. They are:
-
<h1></h1> -
<h2></h2> -
<h3></h3> -
<h4></h4> -
<h5></h5> -
<h6></h6>
These HTML tag sets are used in the same fashion as those above; just surround the text you want styled within the tags and it is as simple as that. Here’s what they look like:
CSS
In this section, I am going to cover CSS, or Cascading Style Sheets, which is basically an extension of HTML to further style your content in an easier and more uniform manner. CSS can be helpful and useful if you want to style blocks of text, whether that block of text be an entire paragraph, a sentence, or a simple word. To start simply, you can use CSS to change the font, size, color, and alignment for blocks of text. This can be done using the <div></div> set of tags. The “style” attribute is used in conjunction with the <div> tag, and within the style attribute there are many sub-attributes which can be assigned various “values”, which all worked together to style text. For our purposes here, I will go over the “text-align”, “font-family, “font-size”, and “color” sub-attributes of style.
For alignment, “text-align” can have four values: left, center, right, and justify. Here is the syntax:
<div style = “text-align: center>Your Text Here</div>
or
<div style = “text-align: right>Your Text Here</div>
Color can be set by either using HTML color codes (the list of codes is pretty extensive with a plethora of colors, which can easily by Google’d and found), RGB (Red-Green-Blue) values, or color names. For the sake of ease and staying simple, I would suggest sticking with color names. Say you wanted red text, this is how you would write it:
<div style = “color: red”>Your text here.</div>
You can use other various color names, such as red, green, blue, purple, orange, black, and white. Simple as that.
Changing the size of your font is just as simple. You want 16-point font size? Here is how you do it:
<div style = “font-size: 16pt”>Your text here.</div>
How about an itty-bitty size for some legal jargon?–try 6-point:
<div style = “font-size: 6pt”>Your text here.</div>
The “font-family” property of style can change the font of your text. Some common fonts that are “web safe” that you can use are Times New Roman, Arial, Arial Black, Tahoma, Verdana, and Georgia. This is the syntax you would use:
<div style = “font-family: Arial”>Your text here.</div>
or
<div style = “font-family: Tahoma”>Your text here.</div>
There are several other web safe fonts that can be used with CSS that you can use to spruce up your content. Give it a search in your search engine of choice, and you will definitely find several lists with a font or two you would like to use.
Finally, you can put all these together, or use any other combination of font size, family, color, and alignment that you choose; you just have to separate each sub-attribute/property from the other by a semi-colon. For example,
<div style = “font-family: Arial; font-size: 18pt; color: red; text-align: center;”>Your text here.</div>
or you can go even simpler:
<div style = “font-size: 10pt; color: blue;”>Your text here.</div>
You will find that through usage over time remembering and using the syntax is pretty easy.
Bringing It All Together
A good rule of thumb to keep in mind is that all “opening” HTML tags, such as <b> or <div>, are coupled with a “closing” HTML tag, which would be </b> and </div> here in this example. Missing a closing tag somewhere in your HTML can definitely produce some unwanted results. Which brings me to my second rule of thumb: check and re-check your HTML, preferably as you write it, in order to save you any mishaps later. If you find that you are unsure about anything in your code, do an Internet search; it is a wealth of information and you will definitely find your answers.
Hopefully, this write-up has provided you with a good base of HTML knowledge to get excited about and further learn more. There are numerous books and sites on the web that can help you learn more. You will find that you can get very creative with HTML and CSS, making for some extraordinary looking pages and content.
