Tags are bits of code that look like this:
<center>
Tags almost always come in pairs. A pair has a "start" tag and an "end" tag. The "end" tag has a forward slash right after the less-than sign. The tags' content comes between the tags. Here is an example of a pair of tags with some content.
<center>CONTENT</center>
Element Styling[]
Tags are used to change their contents in certain ways. HTML tags do this using styles, classes, and ID's. You can read about classes and ID's in my Classes and IDs guide. Styles can do almost anything that you can do with classes and ID's, but styles do not need a CSS file which only admins can edit. You can add styles to an HTML element (a set of HTML tags and their contents) like this:
<span style="PROPERTIES">CONTENTS</span>
You would then make changes to the element by adding CSS properties to the element. For example, the following element results in red text.
<span style="color: red;">Text</span>
Result:
Text
Properties are added between the quotation marks after the "style" statement. Properties consist of a property name, followed by a colon, then the keyword, and end with a semi-colon. Semi-colons mark the end of a property, so they separate properties from each other. Example:
<span style="color: green; font-size: 150%;">Text</span>
Result:
Text
If you are interested in learning more CSS properties, visit this reference.
Tags can also be placed inside other tag pairs. In the following example, two span elements are nested inside a p element.
<p style="letter-spacing: 12px;"> <span style="color: red;">Example</span> <span style="color: blue;">Text</span> </p>
Result:
Example Text
Since the p element contains both of the span elements, the letter-spacing property is applied to both sets of text.
Tag Types[]
Different tag types apply certain properties to their contents by default and/or create elements with special abilities.
Below is a series of tag types that we use frequently here. Each section lists what properties are added to the element by default and gives an example usage.
span[]
- Element is displayed in-line with text.
Example:
Text <span style="color: red;">example</span> Text
Result:
Text example Text
div[]
- A line break is added before and after the element.
- Width is set to 100%.
Example:
Text <div style="color: blue; border: 4px solid red;">example</div> Text
Result:
Text
Text
p[]
- A line break is added before and after the element.
- Some margin (empty space) is added above and below the element.
- Width is set to 100%.
Example:
Text <p style="color: red;">example</p> Text
Result:
Text
example
Text
center[]
- All text and boxes within the tags are center aligned.
Example:
Text <center> <div style="width: 50%; border: 4px solid red;">example</div> </center> Text
Result:
Text
Text
br[]
- Forces a line break.
- NOTE: This element only uses one tag.
Example:
Example<br/>Text
Result:
Example
Text
pre[]
- Text is changed to a fixed width font.
- A gray box is placed around all text.
- A line break is added before and after the element.
- Some margin (empty space) is added above and below the element.
- Width is set to 100%.
Example Result:
This text has pre tags around it.
nowiki[]
- Prevents code from rendering so that it displays as plain text.
Example Result:
<div style="color: red;">This div has nowiki tags around it.</div>
u[]
- Underlines all text within the element.
Example:
<u>Text</u>
Result:
Text
i[]
- italicizes all text within the element.
Example:
<i>Text</i>
Result:
Text
s[]
- Puts a strike through all text within the element.
Example:
<s>Text</s>
Result:
Text
b[]
- Bolds all text within the element.
Example:
<b>Text</b>
Result:
Text
Comment Tags[]
- All text and code that is inside <!-- --> is omitted from the page when it is interpreted.
Example:
This text will appear on the published page. <!--This text will not appear on the published page.--> <span style="color: red;">This element will appear on the published page.</span> <!--<span style="color: blue;">This element will not appear on the published page.</span>-->
Result:
This text will appear on the published page.
This element will appear on the published page.
| Back |
| Return to Editing Guide List |
| Next |