Infobox/Basics

This is a basic introduction to infoboxes. A complete description of all the infobox functionality can be found in the help pages. Some knowledge of Templates may be necessary to design more complex infoboxes.

## First step

The first step is to decide what contents you need in an infobox. Putting the idea down on paper or a table might help. Let's evaluate this using a case study.

## Case study - Batman

Suppose an editor wants to create an infobox for a character, e.g. Batman. Below are the steps that can be followed.

### Plan

Batman is a pretty popular character and it would be nice to have some basic information about him. A table below shows some of his attributes.

 Abilities
 Alias
 Affiliation

### Building an infobox

#### Step 1

First create a page with the prefix "Template:" e.g. Template:Infobox character.

#### Step 2

Write the following in "Template:Infobox character" and save:

```
<infobox>
 <data source="name">
 <label>Name</label>
 </data>
</infobox>

```

Now go to any test page, e.g. Special:MyPage/sandbox  and write:

### Name

Bruce Wayne

```
{{infobox character|name=Bruce Wayne}}
```

That should show you the infobox on the right.

## Understand your first infobox

Infoboxes must have a "text"  that starts a section and that ends it ( XML markup).

### Tags

  *Main article: w:Help:Infoboxes/Tags*
A tag is a simple piece of text surrounded by "<" and ">", for example, <pre>. There are many tags that can be used to change the appearance of an infobox. The most common ones include <data>,<image>,<title>,<label> and <header>.

## How it works

It's time to understand how it works.

1. <infobox> - This is a tag indicating that this section will contain an infobox.
2. <data> - This indicates that there will be a section containing some data, e.g. a name and a label.
3. source - This is called an attribute, and indicates where the input comes from, e.g. name from a template or template parameter. It must always be in the form of `source = "text"`. This is case sensitive, so `source = "NAME"` is not the same thing as `source= "name"`.
4. <label> - This defines what label must be used for the value entered. It starts with a '<label>' and ends with '</label>' . Note the front-slash.
5. </data> - This indicates the end of the <data> section.
6. </infobox> - This shows the end of the infobox.

**Note:** The information in the infobox is shown in the order in which it is entered.

### Auto hiding sections

When a section such as <data> does not receive any information (e.g. source="name") it automatically hides. In some cases, the whole infobox may not appear. For example, if the example above is changed, and the following text is entered nothing will appear because there is no data to show:

```
{{infobox character}}
```

This will also happen if the "source" is misspelled or uses a different sentence case (e.g. upper case):

```
{{infobox character|NAME="Bruce Wayne}} <!-- This doesn't work in the example above-->
```

```
{{infobox character|name="Bruce Wayne}} <!-- This works -->
```

## Adding more to the infobox

### Title

A title can also be added to an infobox. Instead of using <data> use <title> :

```
<infobox>
 <title source = "title"></title>
 <data source="name">
 <label>Name</label>
 </data>
</infobox>

```

Like before, enter this text to test your infobox in a test page:

## Batman

### Name

Bruce Wayne

```
{{infobox character

```

Now the infobox has a title!

### Images

The infobox can be further improved with an image like this:

```
 <image source = "image"></image>

```

### Data

The  is the most important part of the infobox. It stores details and description of each item (or row), and there can be as many as neeeded. For example, the name of a character and the description of the field. It generally uses the following format:

```
<data source = "sourcename">
   <label> description </label>
</data>

```

For this specific case the name, alias, abilities, and affiliation will be added as shown below:

### Affiliation

Justice league

```
<infobox>
 <data source="name">
 <label>Name</label>
 </data>
 <data source="alias">
 <label>Alias</label>
 </data>
 <data source="abilities">
 <label>Known Abilities</label>
 </data>
 <data source="affiliation">
 <label>Affiliation</label>
 </data>
</infobox>

```

In actuality, if you don't add the correct arguments into the infobox on the page you're adding it to, the associated fields won't appear, so remember to actually add the fields to the infobox on the page. The same goes if you don't type in the name of the field correctly, so if the infobox fields are not displaying correctly then this means that the fields on the page has the wrong name.

### Header

Headers can be used to describe a specific section like "information" or "family". This is possible with just a slight change:

```
 <header>Information</header>

```

#### Example

```
 <header>Information</header>
 <data source="name">
 <label>Name</label>
 </data>

```

Note that the header is different from other tags, and doesn't have a "source".

### Navigation

One can also add content that helps people navigate using a "<navigation>" element:

```
 <navigation>Information</navigation>

```

This allows just about any text and can be used for footer notes, links or anything. Much like the header and the label element, the <navigation> also doesn't have a "source".

## Bringing it all together

Now all the concepts learnt above can be used together.

Write this in a sandbox page:

```
{{infobox character
Genius-level intelligence
}}

```

The contents of "Template:Infobox character" should look like the "box" on the left (see infobox batman) , and the infobox will look like the one the right.

## Information

### Affiliation

Justice league

```
<infobox>
 <title source = "title"></title>
 <image source = "image"></image>
 <header>Information</header>
 <data source="name">
 <label>Name</label>
 </data>
 <data source="alias">
 <label>Alias</label>
 </data>
 <data source="abilities">
 <label>Known abilities</label>
 </data>
 <data source="affiliation">
 <label>Affiliation</label>
 </data>
 <navigation>[//batman.com Official page]</navigation>
</infobox>

```

## See also

* Infobox
* w:Help:Infoboxes
* templates