Recently we have been training many clients how to make edits to their websites, and one of the most important elements to learn is the basics of HTML so that when something is not working how they want, they know how to fix it. Here are some of the basics of HTML that every blogger should know.
What is HTML
HTML, Hyper Text Markup Language, is the basic markup language of many websites. HTML is written in the form of markup tags such as <html> and </html> to describe any web page. Each tag comes in a pair and the first is the opening tag, <html>, and the second the closing tag, </html>. The tags that most bloggers will need to be familiar with are:
- <h1>Heading Tags</h1>
- <p>The Paragraph Tag</p>
- <strong>Bold Text</strong> or <b> </b>
- <em>Italic Text</em> or <i> </i>
- <br /> Line Break
- <hr /> Horizontal Line
- <a href=”http://www.yourcontentnotes.com” title=”All links need titles for search engine optimization (SEO), and user-friendly purposes”>An Example Link (Can be a link to another page within your site, another website, or even to .PDFs or .docs)</a>
- <a href=”mailto:firstname.lastname@example.org” title=”This is an Email Link”>An Email Link</a>
- <ul><li>An unordered List</li></ul>
- <ol><li>An ordered List</li></ol>
- <img />
To alter your website HTML on a blogging platform, you will most likely have the option of using a “Visual” editor or the “HTML/Code” editor. To view your code you will need to use the HTML or Code editor, also known as source code. This is where you will be able to see the tags being used, so you can remove any tags you do not want or add any additional tags. If you see a website that you particularly like, you can also highlight the text and right click view selection source to see what code was used to create that code, this is a good way to learn different tips and tricks of HTML.
Headings and Sub-Headings
Your different heading tags are the H1, H2, H3 tags, and so on. Many sites and blogs do not need more than an H3 but you are able to go as far as H6. Search engines use this H1 tag to structure the content of your pages, and they give priority to the H1 and H2 tags. Your main heading should be within the <h1>Tag</h1>, and your sub-heads as <h2>Sub Head</h2> and after that the <h3>for even lower priority</h3>. Many blogs will automatically add the H1 open and closing tags to your “title” when you set the title of your post or page, so you will only need to add any extra H2 or H3 tags. Most blogs and websites are set up to have a certain style to all heading tags, a pre-defined style in the sites CSS (Cascading Stylesheet) stylesheet. This stylesheet is defined when the site is built, or when a template or theme is installed. With the heading tags already being styled, you only need the H1 tags, no additional styles or <span> tags will be needed. If your site’s headings do not look like what you want them to, you may want to look into having your CSS stylesheet edited to follow the style that you want. You may contact us for a quote on CSS styling help.
Paragraphs v.s. Line Breaks
In our list above we have both the <p></p>, paragraph tag, and the <br />, line break tag, many people get confused by what the difference between these two elements are. Each of these will cause different line spacing between your content so you will want to make sure to use the right one. A <p> paragraph tag is what an entire paragraph would be within, and each new paragraph would start with a new <p> tag. If you are wanting to separate different lines of content, but would like to choose where the break is rather than how a paragraph tag chooses the break dependent on the width of the available area, you can tell your line to <br /> which will cause a line break in your text
like how this line is broken here. You are able to either start a new paragraph with your content, or create simply a line break
like so, to break up your content. You can see with these examples how the spacing between the two are different. When you start a <p> tag, don’t forget to end it with a </p>.
Links to Pages and PDFs
If you want to link to another page within your site, another website, or even to a PDF or Word doc, you are able to do that with links. Links are text that you can click on to jump to another page or document, or to even download a file.You will want to use a standard link to allow your users to jump to another page on your site, or another website entirely. Here is how:
In your HTML editor, create your standard <a> </a> tags with the text you want to use as the link in between the opening and closing a tags, like this: <a>Click-able Link Here</a>. To actually make it a functioning link you will need to add the href attribute to tell your link where to point to. This would be the URL to the other page, for example <a href=”http://www.yoururl.com/yourpage/”>Link Text</a>. Make sure to always add the http:// to all of your links or you will send your users to the wrong link inadvertently. It is also a good practice to always include a title element to all links for SEO and compliance purposes. A title link will be a short description of what you are linking to, for example title=”Off site Link to Content Solutions Website” would be a good title for a link going to our main website. You will want to put this title=”Link Description Here” inside your opening link tag <a>, like this: <a href=”http://www.yoururl.com/yourpage/” title=”short description about your link here”>Link Text</a>. If you want your link to open this new page in a new window, then you will want to add the target element, target=”_blank” to your open a tag. The _blank tells the HTML to open this link in a new window, if you do not want it to open in a new window, do not include the target element at all, an example to open a link in a new window is: <a href=”http://www.yoururl.com/yourpage/” title=”short description about your link here” target=”_blank”>Link Text</a>.
If you want to provide your readers with a downloadable PDF, you can simple replace the URL to a page with the URL to your PDF. In order to do this you would first need to upload your PDF via your media manager or an FTP client, like FileZilla.
Images, being one of the most important elements to a blog, are sometimes the most difficult. In a previous post we discussed the basics of preparing an image for the web; make sure to follow those guidelines when creating your image before uploading for use on your blog. But what do you do now that your image is ready? Many blogging platforms have a media manager where you can upload and edit your images, a lot of your image customization can be done here. But what if your image still doesn’t look like you want it to, or it keeps having some weird property added to it, you can edit it further in your source code. Your <img /> tag is a single tag rather than a pair and is closed by adding the / before your closing greater than symbol >.Here are the basic element attributes that can be added to the image <img /> tag:
- src=”http://www.yoururl.com/imagename.png” This is the source URL for the image you want to display, if you used the media manager to upload your image, this field is most likely already completed, if you uploaded your image via FTP, then you will want to enter the full URL to the image here.
- title=”Descriptive Title of your image goes here”
- alt=”This is a required element to all image tags and is what will be displayed if your image is not loading or turned off by the users settings”
- height=”50px” The height of your image in pixels. This is not a required field, and in your visual editor, you should be able to re-size your image by dragging the image size toggle.
- width=”50px” The width of your image in pixels.
- border=”2px” Here you can state if you would like to have a border on this particular image and if so how thick you would like it to be. This attribute may be none, or a number in pixels of the width of your border.
- align=”left” This attribute specifies the alignment of your image, you can use: left, right, or center.
- style=”padding: 10px;” This attribute is an advanced element to add additional styling to your image. You can add padding and spacing to your image using this attribute as done in the img tag example below. As well as add additional advanced styles for the entire image customization. For example, if you want to turn your border to blue, you can add style=”border: #006c98;” this #006c98 is a hex color, you can find more information about hex colors here.
- class=”class name here” This attribute will link your image to a specific class style that is in your stylesheet. So if your stylesheet is set up to automatically style your images with the class name of image, and you add class=”image” to your image, you are connecting it to the stylesheet to be styled in the predefined manner.
Here is an example of the full code for an image: <img src=”http://www.yoururl.com/yourimagename.jpg” title=”The title of your image here” alt=”Your alternative description of my image here” height=”50px” width=”50px” border=”none” align=”left” style=”padding: 10px; border: #006c98;” />
If you would like to add a caption with your image, this is how it should look: [ caption width=”50″ caption=”Your Image Caption Here.” ]<img src=”http://www.yoururl.com/yourimagename.jpg” title=”The title of your image here” alt=”Your alternative description of my image here” width=”50px” height=”50px” />[ / caption ]
(no spaces are needed in between your brackets and the words caption, but I have added them for the purposes of displaying the code).
If you want to make your image a link, this is what it should look like: <a href=”http://yoururl.com/”><img src=”http://www.yoururl.com/yourimagename.jpg” title=”The title of your image here” alt=”Your alternative description of my image here” width=”50px” height=”50px” /></a>
If you are trying to enter a symbol in your content and it is not on your keyboard, you can get a list of the HTML code for symbols here.
If you still have any additional questions or problems with HTML, please contact Content Solutions, so we can help you reach your content needs.