This post intends to be a very basic introduction to HTML for people who may need to edit some code but don’t need or want to learn the everything required to build a website. If you have a WordPress site and want to make some tweaks in HTML, this is the place for you.
- HTML stands for Hyper Text Markup Language
- CSS stands for Cascading Style Sheets
Anatomy of an HTML Tag
HTML tags are bits of code which wrap the text of the web page, they have different meanings and the CSS causes them to be displayed in different ways. HTML tags look like one of these. Pay attention to spaces and quotation marks.
- Self Closing: <tag_name>
- Simple: <tag_name>Contents<value>
- Regular with Attributes: <tagname attributes=”value”>Contents</tag>
Self Closing HTML Tag
Many tags don’t have any contents, they just tell the browser to do something. A classic example is a line break, if you have a paragraph (see below) and you want to force a new line somehere stick in the br tag:
<p>The contents of the paragraph goes here<br> this text will be on a new line</p>
Simple HTML Tag
A simple HTML tag is the P tag, it defines a paragraph and you wrap it around the contents.
<p>The contents of the paragraph goes here</p>
HTML Tag with Attributes
Another tag is the one which creates links, they’re called anchors and the tag name is a, to define where the link should point you must set the “href” attribute. Do this by adding a space after the tag name, putting the attribute name (href) followed by a space and the value for that attribute. You normally want to surround the attribute value with quotes – either single ” or double ‘ are fine.
<a href="http://www.google.com">Click here to visit Google</a>
Simple HTML tag with CSS Class
CSS works by applying styles to HTML tags which match various types of attribute. A common one is the class. If your web developer has written code to make some links (Anchors) look like buttons you probably just need to add the right class. For example:
<a class="button" href="http://www.google.com">Click this button to visit Google</a>
Note that you (or someone) will need to have written some CSS to make that class=”button” do anything, check with your designer/developer to find out what your options are for styling things with classes.