No, but why would I want to do that?! (although I like the part where I become dangerous!)
Although most interfaces now work as is, there is still quite often a need for small tweaks to your website HTML or CSS code. That is, if you are a perfectionist, you’ll probably want to learn how to do this. [monthly-page-views] — {monthly-page-views}
This code is very simple and does not involve programming, but it can look like another language… oh, wait! It is. Actually, the L in HTML stands for Language:
Hyper Text Markup Language
The word language does not appear in CSS, but it is also a computer language. The abbreviation stands for:
Cascading Style Sheet
HTML, The Basics
Why Do I need to learn a little HTML?
You really do not need to be an expert to tweak your theme and pages HTML code. In most cases, though, you shouldn’t need to do anything.
There are a few reasons why I like to do tweaks. For example, if I want to write a note and put a little 1 after a word as here: Note1, then I need to do a quick edit because the default WordPress editor does not allow me to do a superscript function (superscript is the word used in HTML in this case, it also looks like power, as in 32 = 9. HTML also supports a subscript.)
Note that I do not recommend that you do such things. It can be tedious if you don’t understand the code that well. However, there are times when something goes wrong and your code gets messed up. The main reason that this happens that I’ve seen over the years is someone (you?!) doing a Copy + Paste. The Paste may include unwanted tags changing the font size, putting your paragraphs in a <div> tag (causing problems with the slug,) or changing your text color.
Whenever such severe things happen, your best bet is to use the “Text” editor and remove the offensive tags or attributes. Note that there is a “Clear Formatting” feature in the basic editor. On possible concern with that one is that it’s going to delete everything and you may already have some formatting in place that you do not want to lose. Also, it does not clean things such as the <div> tag problem.
What is an HTML tag?
As I mentioned, HTML is composed of mainly text, tags, and attributes. There are also comments which are used for one purpose: break the slug/teaser from the rest of your post. You will also find entities for a few characters. I will start with those entities as they are important when writing correct code.
Entities
HTML makes use if the less than (<) and greater than (>) characters to define tags (see below). This means those characters can’t be used as is in HTML without the possibility for them to be confused with tags.
To resolve this problem, the HTML designers created Entities.
To write various characters (it is not limited to the less than (<) and greater than (>) characters), you use an ampersand, the name or number of a character and close the entity with a semi-colon. For example, the less than (<) is written as:
<
Pretty simple! Right? There are really only three entities that you should worry about, although it is not a bad thing to know a couple more for quoted attributes. There is my short list, learn that and you’ll be all good:
- < — the less than (<) character
- > — the greater than (>) character
- & — the ampersand (&) character, very important to insert an & in your text (like in D&D Initiative) since it otherwise introduces an Entity.
- " — the double quotation (“) character
- ' or ' or ' — the single quotation (‘) character, also called apostrophe (hence the first name); older versions of Internet Explorer did not understand the ' entity name, which is why you most often see the other two entities.
Noticed the ' syntax? This means the character number 2, 7 in hexadecimal (the “x” introducer means that a hexadecimal number follows and represents a character code) which represents the apostrophe or single quote character in ASCII. Because of the ‘x’, it is one character longer which is why you are more likely to see ' but to know what that is, you should learn both numbers.
Why did I also write '? Because 3910 = 2716 — which means 39 in decimal represents 27 in hexadecimal. In this case, it is easy to do the conversion: 2716 = 2 * 16 + 7 = 32 + 7 = 39.
Wow! Can I enter any character to my page that way?
Yes. If you know it’s Unicode number, you can enter absolutely any character in your page. Remember, though, that every one of your viewers is not going to have the same fonts you have. Going a little too wild on these may end up being futile and print a lot of little square to various users.
The Unicode website has lists of all the characters that are official. If you use Microsoft or Macintosh, you are not unlikely to get additional characters that others on Linux, Android, iPhone will not have.
Text
It is possible to write regular text. That’s how your paragraphs include text as you are reading now.
Plain text won’t work as is, though. You must make sure to include entities for any special characters that creates an entity or a tag. These are the less than (<), greater than (>), and ampersand (&). Any other character can be written as is.
So the D&D Initiative example shown above looks like this in code:
D&D Initiative
As we can see, the ampersand (&) was written & in the code. You would do the same to show a less than (<) or a greater than (>).
Note that it’s safe to use the quotation or any other valid entity, only it’s generally not useful in a Text area.
Tags
An HTML document is composed of tags.
A tag starts with a less than (<) character immediately followed by the tag name which is composed of letters (a-z) and digits (0-9). All tag names start with a letter. The tag ends with a greater than (>) character. For example, the title tag is written as:
<title>
There are two different types of tags: the empty tags and the non-empty tags.
An empty tag actually ends with a slash (/) and the greater than character (>). For example, a link BReak is written:
<br/> or <br />
I show you the example with a space before the slash. It looks like some people think it is mandatory to have that space. It is not. Just know that many HTML editors will add it, which is sad since it wastes some space.
A non-empty tag can encompass sub-tags and text. For example, an HTML document generally starts with a <head> tag which itself includes a <title> tag as in:
<head>
<title>
My Page Title Goes Hre
</title>
</head>This example shows how tags can include other tags. Here the opening and closing title tag marks are clearly inside the opening and closing of the head marks.
Attributes
The attributes are parameters attached to a tag.
For example, you can define an <input> as either a checkbox or a radio box.
<input type="checkbox"/> <input type="radio"/>
There are attributes that can appear pretty much on all tags such as the class and id attributes.
There are two ways to write an attribute in an HTML tag:
- Just its name in case the attribute is a Boolean (this is not available in XHTML);
- The name followed by an equal sign followed by a value.
The Boolean syntax can also be done with the value set to an empty string or the name of the attribute like so:
<textarea rows="6" readonly></textarea> <textarea rows="6" readonly=""></textarea> <textarea rows="6" readonly="readonly"></textarea>
Also, there are some Boolean values that are to be set to true or false (i.e. the spellcheck attribute, although it is not defined as a Boolean, it can be set to true or false.) In most cases, if you find an example, you should get the correct syntax, but once in a while, the examples are wrong… However, in most cases, using false won’t work, but true always works even if you should use the name of the attribute instead. Instead of false, remove the attribute altogether.
Note that the value has to be written between quotes in XHTML or if the value includes characters other than letters and digits. You may either use single quotes or double quotes. Within single quotes, you can have double quotes and vice versa. To include a double quote within a double quote parameter, use the " entity. To include an apostrophe in a single quote parameter, use the ' entity.
<img alt="This is me when I'm angry"
src="/images/cute.jpg"/>
<img alt='This is me when I'm angry'
src="/images/cute.jpg"/>
<img alt="This is me when I'm "very" angry"
src="/images/cute.jpg"/>Note that you can always use the entities, whatever the quotes.
A few tags to know about
The main tag is <html> although while dealing with posts, you never see that tag which is defined in your header.php file (opening) and footer.php (closing).
The <head> tag mentioned above is also hidden in the header.
The following, though, are often found in pages as they are used to format your text in paragraphs, sections, divisions with bold, italic, underline.
Tags Defining Blocks
<p>…</p>
The <p> tag defines a paragraph.
In WordPress and many other Content Management Systems (CMS), the <p> tag can be omitted. The system has a filter that recognizes text content written as a paragraph as such and it will add the <p> and </p> tags as required.
<div>…</div>
The division tag is not offered by default in the WordPress editor.
When this tag is used for a paragraph of text, it most often defines a paragraph without margins.
The tag is also often used to define divisions within divisions within divisions… on many levels.
The default WordPress editor does not offer you a way to switch to a division tag. If you want to have such, you will have to edit your code. It is really rare that you would have such a need, though.
Note that, somehow, <div> tags cause problems when attempting to add the “— MORE —” separator (i.e. used to mark the location where slug/teaser ends in your post as a whole.)
<section>…</section>
This tag defines a section. This is really unlikely to appear in your post unless you do a copy/paste of content from a site that uses such tags.
In most cases, a <section> tag works in a way similar to the <div> tag.
You can define a <section> within a <section> in which case it is called a subsection.
<ul>…</ul>
The <ul> tag defines an Unordered List.
In most cases, your Unordered List will appear as a set of bullet points.
<ol>…</ol>
The <ol> tag defines an Ordered List.
The ordered list is presented using numbers counting from 1 and up. The CSS code can be tweaked to change the presentation such as the type of numbers (i.e. Latin, Arabic, Roman, etc.)
<li>…</li>
The <li> tag defines a list item.
To be valid, list items must appear within a <ul>…</ul> or <ol>…</ol> tag; you can have sub-lists which creates an indentation (at least by default).
WordPress creates sub-lists that look like the following:
<ul>
<li>Item 1</li>
<ul>
<li>Item 1.1</li>
<li>Item 1.2</li>
</ul>
<li>Item 2</li>
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
<li>Item 2.3</li>
</ul>
</ul><h1>…</h1>, <h2>…</h2>, <h3>…</h3>, <h4>…</h4>, <h5>…</h5>, <h6>…</h6>
You can use up to six levels of headers. More and you probably need to write multiple pages. Note that in reality, you have only five because the first one is your page title.
If you’ve been reading some articles about basic on-page SEO and the Internet in general, you probably heard of the <h1> tag before. <h1> is expected o be used for your page main title. In other words, for your title to really be effective, we often read that it has to be defined within the <h1> tag. For that reason, HTML editors used in a CMS should not offer you to write content using <h1> (Called Header 1 in the WordPress editor) in your paragraphs although so far all the editors I’ve seen do. Although there may be a way of removing that Header 1 option from the dropdown, what I’m speaking of is having that predefined that way from the time you install WordPress!
So in your posts, you should start by using an <h2> tags (Header 2).
Another important point, Your Headers Taken Together Should Read Like a Paragraph.
<blockquote>…</blockquote>
Whenever you use the Quote option in the toolbar, you add a <blockquote> tag to the page.
By default, a <blockquote> tag will indent the content making it easy to detect against the rest of the content. Best themes will also include features such as an actual double quote appearing on the left side, a different color for the text, they may have used italic or bold for the font, etc.
<hr/>
This tag adds a horizontal line. This is a good separator if you have multiple clearly separated sections on your page.
For example, this page has an introduction, a part about HTML and a part about CSS. Each section was separated by such a line. It makes it easier for the reader to see that there are different sections.
Tags Changing Text Styles
<b>…</b> or <strong>…</strong>
The bold (<b>) or strong (<strong>, also called black in typography) tags are generally both shown as bold text.
— example —
Although I’ve rarely seen such, each tag can be given a different weight (boldness). I had one website where the <strong> tag uses black (weight of 900) instead of bold (weight of 700). The difference is relatively subtle, but if you know you’ll see it.
<i>…</i> or <em>…</em>
The italic (<i>) and emphasis (<em>) tags define an area of text that will be shown in italic.
— example —
If your font offers the capability, you could have Italic (<i>) and Oblique (<em>) available. The difference is that italic letters go from top-right to bottom-left whereas oblique letters go from top-left to bottom-right.
I think both styles are great, but fonts with true Oblique are really rare.
<u>…</u>
The <u> tag defines an area of text that will be shown underlined.
Note that an anchor is most often rendered with an underline. The anchor tag (<a>) uses CSS to offer that feature. In other words, you won’t need to write your anchors between <u>…</u> to get them to display with an underscore line.
— example —
In WordPress, this is most often a theme feature which uses a <span> tag with a specific class. The default editor does not offer a way to add an underscore. You have to edit your posts using the Text tab and find the words that you want to underscore and add the <u> and </u> manually.
<s>…</s> or <strike>…</strike>
The <s> or <strike> tags define an area of text with a strikethrough line. This looks like the text was
— example —
HTML also offers a <del> (deleted) and an <ins> (inserted) set of tags. These are useful if you have a CMS that can show you changes to your pages over time. Many times, the <del> tag will be shown with a strikethrough line. The <ins> may be in bold and/or in a green color.
<br/>
As seen earlier, this is to add a break (newline) in your text. You can include as many as you want, one after another to increase the number of newlines.
Note: some browsers require one, others require two such tags to do the same thing. If in doubt, do some testing. The browsers where I saw the problem (i.e. it requires an additional <br/>) is Firefox. It looks like all the other browsers will work as expected otherwise.
It doesn’t work in the WordPress editor, but in many cases hitting Enter with the Shift key held down will insert a <br/> instead of a new paragraph.
<a>…</a>
The <a> tag is to add an anchor, probably better known as a link by most.
The part in between the opening and closing tags represents the anchor text. this is considered very important when working on your SEO. It defines what the link destination represents. Actually, Google can end up using that anchor text in its search results instead of the title of the corresponding article. And when someone on another website creates such a link, you have no real control over their way of phrasing your title.
I have another post about On-Site SEO which talks about the anchor tag in even more detail.
<span>…</span>
A <span> tag selects an area of text.
The tag is used with attributes, most likely the class attribute, to make the text within the span look different (i.e. change color, size, shadow, etc.)
The classes define what to use from the CSS data available to that page. I have a website where I created inline notes. These used a header tag, really, but they should have been using a <span> or a <div> tag with a special class. Something like this:
<span class="inline-notes">Note: This is my inline notes</span>
With this CSS rules:
.inline-notes {
margin-left: 30px;
color: #333;
border: 1px solid black;
background-color: #f0e0d0;
padding: 10px;
font-style: italic;
}Appears like this:
Note: This is my inline notes
As we can see, it appears in a nice box and it has a different background color.
<font>…</font>
This option is to specifically change font parameters. This tag should not be used anymore. Instead, we use <span> and a class with the necessary settings. This way it makes it easier to fix the styles on all pages at once: we just have to change the CSS and voilà. Using the <font> tag would require you to edit every single page.
Note that the <font> tag, like all the other tags, can also make use of the class attribute and thus it can tweak any and all styles.
If you find a <font> tag in the code of your post, it is likely that you did a copy & paste from another website that still uses this tag.
CSS, The Basics
Why is it useful to learn a little CSS coding?
If you’ve worked on a website before, there are probably times when you wished you could fix this or that problem. This is where CSS can come in handy.
Placing your text on the left or on the right is easy. You can just use the corresponding buttons on the toolbar.
However, to create an effect such as adding a background image behind your text can easily be done using CSS, but it’s pretty much impossible with any WYSIWYG editor I’ve seen so far. Only specialized functions on a website will give you that option.
Also, some people may tell you to install this plugin or that plugin, adding too many plugins on your WordPress website will slow things down quite a bit. In general, it will be better to optimize your site by doing small things like this by hand. There is a wealth of resources on the net so if you are not too sure how to do this or that, a quick Google search is likely to give you the copy/paste answer. This is where being able to read CSS code will help you greatly. Reading the sample code of such results before copying it in your website will most certainly help you make sure it is likely to do what you are trying to do.
What is a Cascading Style Sheet?
First of all, let me tell you that all CSS code that browsers currently understand is text. It may be minimized (and compressed while being transferred) which makes it harder to read, but it does not get transformed to some sort of binary code. So you can check the CSS code of any website to learn how they’ve done it. This is not always the easiest way, though. A Google search is likely to help you faster.
The term Cascading means that you can reference any tag in the HTML. In most cases, a reference in the CSS file affects a large number of tags. By adding a class name or a tag name to the reference will generally make it affect fewer tags.
Basics CSS Syntax
You should concern yourself with only three important syntax rules. The others will probably come to you as you work your way along.
A CSS Reference
A CSS Reference is a list of tag, class, and identifier names. There are a few others too, like pseudo-tags and pseudo-classes, which I will mention in examples, but not go in depth about them.
Tag Reference
To change the styles of a given tag, all existing instances in your document, you just use the tag name. For example, a CSS reset remove margin and padding of the <div> tag uses:
div {
padding: 0;
margin: 0;
}Be very careful in using just a tag name. This will have many side effects.
Class Reference
To change the style of all the tags having a class set to a given name, you reference that class. To distinguish a class from a tag name, a class name is written preceded by a period.
This was decided because HTML could have added new tags at any time and to make sure class names and tag names do not clash, using a period was a sure way of doing so. With HTML5, the specification actually allows you to create absolutely any tag. So that would have been a big concern were classes not given a way to be distinguished from tag names.
For example, you may want to create links that look like button whenever you give them the class named “button”.
The HTML code would look like this:
<a class="button" href="/some/page/">Some Page</a>
The CSS could look like this:
.button {
border: 1px solid black;
radius: 3px;
background-color: #ccc;
}Here I define a black solid border 1px thick with round corners and a gray background.
The CSS can also include the tag name. This way you can make sure that it only applies to that type of tag, as in:
a.button {
border: 2px solid red;
radius: 3px;
background-color: #ff8888;
}In most cases, this is enough for you to add a few rules to your theme.
Identifier Reference
Any tag can be given a name called an identifier. This is done using the id attribute. That identifier can be referenced in the CSS file using the hash character (#) followed by the identifier name.
Side Note: Although you should have a single tag with a given identifier, I have not seen a browser that won’t work right when more than one tag is given the same identifier. That being said, you should still not do it on purpose.
If you want to reference the very tag that is given a specific identifier, then you do not need to have anything else in your reference. It happens that you want to reference various tags before or after the tag with the identifier to select those conditionally (i.e. only on certain pages, when the user is logged in, etc.) In other words, don’t be surprised to see complex references including a tag identifier.
Let’s say you use a <div> tag as a copyright block and you want to clearly distinguish it that way, you would write HTML like this:
<div id="copyright">Copyright ⓒ 2017 by Alexis</div>
Then in my CSS file, I want to change that notice to have a rather small font because it’s not that important to the reader (it’s important to be there, just not readable.)
#copyright {
font-size: small;
}There are many ways to change the font size such as 60% or 2em. Here I use “small” which is a standard size for that browser.
Inline Style
You may create a Style Block anywhere in your page. It is generally better to have them in the <head> tag, but not really easy to do in WordPress without adding it on all pages or having another plugin that will slow down the whole site, so it can be practical to write a Style Block right on a page.
<style>
main { background-color: yellow; }
</style>This will work as expected and give the <main> tag a yellow background.
Tag Style
There is a way to write a few style rules directly on a tag. This is called inline.
For example, anchors often are given a blue color. You may want to have a link on your copyright, but not that obvious. So you can write an inline style entry which will make the anchor the default text color (say black here):
<a style="color: black;" href="/copyright">Copyright ⓒ 2017 by Alexis</a>
Note that styles defined directly on a tag have priority over all the other styles. So it’s not always wise it uses that attribute. But if you’re using it as a final definition, this is often a quick and easy solution that you can use directly in your page. Now if you’re going to copy paste that info all over the place, I strongly suggest you use a class instead because that way you’ll be able to edit the CSS for all of them at once.
Style Priority
The priority of CSS can be important. The order is from the last <style> or <link rel=”stylesheet” src=”/css/…”/> tag to the first one defined on that page. Also within a Style Block or a CSS file, the last definition overrides the previous one.
To avoid priority problems, I suggest that you use class names that use a unique name. For example, if your website is https://stargazerrock.com/, then you could use stargazerrock as a prefix. For example, for a button you define, you would write:
<a class="stargazerrock-button" href="https://stargazerrock.com/">Stargazer Rock</a>
Changes that a plugin uses the exact same name are rather slim that way and you will avoid clashes.