HTML (LINK,IMAGE,LIST)

Hyperlink:

Types of links

Inline links

An inline link displays remote content without the need for embedding the content. The remote content may be accessed with or without the user selecting the link.

An inline link may display a modified version of the content; for instance, instead of an image, a thumbnail, low resolution preview, cropped section, or magnified section may be shown. The full content is then usually available on demand, as is the case with print publishing software – e.g., with an external link. This allows for smaller file sizes and quicker response to changes when the full linked content is not needed, as is the case when rearranging a page layout.

Anchor

An anchor hyperlink is a link bound to a portion of a document^[3]—generally text, though not necessarily. For instance, it may also be a hot area in an image (image map in HTML), a designated, often irregular part of an image. One way to define it is by a list of coordinates that indicate its boundaries. For example, a political map of Africa may have each country hyperlinked to further information about that country. A separate invisible hot area interface allows for swapping skins or labels within the linked hot areas without repetitive embedding of links in the various skin elements.

Fat link

A fat link (also known as a "one-to-many" link, an "extended link"^[4]) or a "multi-tailed link" ^[5] is a hyperlink which leads to multiple endpoints; the link is a multivalued function.

<a href="URL" title="link title" target="link target" class="link class">link label</a>

To embed a link into a web page, blogpost, or comment, it may take this form:

<a href="http://example.com/">Example</a>







This is what a hyperlink to the home page of the W3C organization could look like in HTML code:

<a href="http://www.w3.org">W3C organization website</a>

This HTML code consists of several tags:

• The hyperlink starts with an anchor opening tag <a, and includes a hyperlink reference href="http://www.w3.org" to the URL for the page. (Note that the URL is enclosed in quotes.)
• The URL is followed by >, marking the end of the anchor opening tag.
• The words that follow identify what is being linked; this is the only part of the code that is ordinarily visible on the screen when the page is rendered, but when the cursor hovers over the link, many browsers display the target URL somewhere on the screen, such as in the lower left-hand corner.
• Typically these words are underlined and colored (for example, blue for a link that has not yet been visited and purple for a link already visited).
• The anchor closing tag (</a>) terminates the hyperlink code.

Webgraph is a graph, formed from web pages as vertices and hyperlinks, as directed edges.

Image markup with HTML

Right-floating image with caption[edit]

<div class="floatright">[[Image:image name|alt text]]

Caption</div>

---

---

Markup for images is quite complicated. This may be improved in the future: see meta:image pages. Here are some examples of typical markup ("image" for an image in the page, "media" for just a link):

left float, no caption	<div class="floatleft">[[Image:NAME|Alt text]]</div>
right float, no caption	<div class="floatright">[[Image:NAME|Alt text]]</div>
left float, with caption	<div class="floatleft">[[Image:NAME|Alt text]]<br>Caption</div>
right float, with caption	<div class="floatright">[[Image:NAME|Alt text]]<br>Caption</div>
left float, with larger	<div class="floatleft">[[Image:SMALL|Alt text]]<br>[[Media:LARGE|larger version]]</div>
right float, with larger	<div class="floatright">[[Image:SMALL|Alt text]]<br>[[Media:LARGE|larger version]]</div>
large central picture	<center>[[Image:NAME|Alt text]]<br>''Caption''</center>

If your caption is longer than a few words, you may need to explicitly set the div width. Some browsers adjust the width of the div based on the width of the text, and if there is a large caption, the div may become too large. To solve this problem, simply set the width of the div to the width (in pixels) of the image, like so:

<div class="floatright" style="width: 250px">[[image:NAME|alt text]]<br>''Caption''</div>

(replacing width: 250px; with the correct width of your image. The inclusion of this specification is optional, but recommended if you have a caption longer than a few words. For large amounts of caption text, use text-align:left; to make it left-justified.

Alternate text is optional but recommended. See Alternate text for images for hints on writing good alternate text.

To have some text to the left of an image, and then some more text below the image, then put in a single <br clear="all">. This will force following text down until the margins are free of floating images.

Some recommend using <small> for captions, so they appear like this.

List

List basics[edit]

There are three types of lists: unordered lists, ordered lists, and description lists (a.k.a. definition lists or association lists). In the following sections, various list types are used for different examples, but other list types will generally give corresponding results. Ordered (numbered) lists should usually be used only for list items that should be in a specific order, such as steps in a cooking recipe.

Markup	Renders as
* Lists are easy to do: ** start every line * with a star ** more stars mean *** deeper levels	Lists are easy to do: start every line with a star more stars mean deeper levels
* A newline * in a list marks the end of the list. Of course * you can * start again.	A newline in a list marks the end of the list. Of course you can start again.
# Numbered lists are good ## very organized ## easy to follow	Numbered lists are good very organized easy to follow
Description (definition, association) lists: ; Term : Description or ; Term : Description Can be used for more than terms and definitions ''per se''. or ; Term : Description Line 1 : Description Line 2	Description (definition, association) lists: Term  Description or Term Description Can be used for more than terms and definitions per se. or Term Description Line 1 Description Line 2
* Or create mixed lists *# and nest them *#* like this. *#*; Fruits *#*: Apple *#*: Blueberry	Or create mixed lists and nest them like this. Fruits Apple Blueberry
# A line break in an item is done with HTML<br />like this. # Just breaking the line will accidentally end the list like this. # This was supposed to be item 3, not a new list.	A line break in an item is done with HTML like this. Just breaking the line will accidentally end the list like this. This was supposed to be item 3, not a new list.
* A new paragraph in an item is also HTML.<p>Like so.</p> * Same goes for<blockquote>"block quotations"</blockquote>like that. * Note that these are done without line-breaking the wikimarkup.	A new paragraph in an item is also HTML. Like so. Same goes for "block quotations" like that. Note that these are done without line-breaking the wikimarkup.

Common mistakes[edit]

There must be no blank lines between list items. Blank lines terminate a list, splitting it into two separate lists. This is most easily illustrated using an ordered list:

Markup	Renders as
# This is the first item. # This is the second item. # This is the third item. # This is the fourth item.	This is the first item. This is the second item. This is the third item. This is the fourth item.
# This is the first item. # This is the second item. # This is the third item. # This is the fourth item.	This is the first item. This is the second item. This is the third item. This is the fourth item.

In the second example above, the numbering resets after the blank line. This problem is less noticeable with other list types, but it still affects the underlying HTML code and may have disruptive effects for some readers; see WP:LISTGAP for details.

In order to be a list, each line must begin the same way. This holds true for mixed lists.

Markup	Renders as
# If you start with # one type of list, #; and then a sublist #: of a different type, #:* the list characters # always go in order.	If you start with one type of list, and then a sublist of a different type, the list characters always go in order.
# If you reverse # the order, ;# everything :# gets *:# thrown off # and nothing matches up.	If you reverse the order, everything gets thrown off and nothing matches up.

This mistake can also be less noticeable in some circumstances, but it creates single-item lists of different types; besides being semantically wrong, this may cause disruptive side effects for some readers.

Do not use a semicolon simply to give a list a title. Semicolons and colons make one kind of list; asterisks make another.

Markup	Renders as
;Never do *this	Never do this

Paragraphs and other breaks[edit]

All of the techniques described in this section can be used with each other and with any type of list, at any list level.

Paragraphs inside list items[edit]

For simplicity, list items in pure wiki markup cannot be more complex than a basic paragraph. A line break in the wikimarkup of a list item will end not just the item but the entire list, and reset the counter on ordered lists. Separating unordered list items with blank lines may look approximately normal on-screen, but it creates many separate one-item lists, which is a problem for people using screen readers and is discouraged by the guideline on accessibility for people with disabilities, and is also problematic for machine analysis of the article, and for reuse of Wikipedia content more generally.

Paragraphs can be created inside list items by using the HTML <p>...</p> (paragraph) element around the second and subsequent paragraphs, with no line breaks in the wikimarkup:

Markup	Renders as
# Paragraph 1.<p>Paragraph 2.</p><p>Paragraph 3.</p> # Second item.	Paragraph 1. Paragraph 2. Paragraph 3. Second item

Do not use <br /> as a substitute for <p>...</p>; they have different semantics and are not interchangeable.

For code readability (the improvement is more apparent when the paragraphs are long, rather than with short examples like these), line-breaks may be created with HTML comments, <!-- ... -->, that begin on one line against the end of that line's code and end on another line, against the beginning of that line's code:

Markup	Renders as
# Paragraph 1.<!-- --><p>Paragraph 2.</p><!-- --><p>Paragraph 3.</p> # Second item.	Paragraph 1. Paragraph 2. Paragraph 3. Second item.

This technique can be used with the other examples below.

Line breaks inside list items[edit]

Use a single <br /> for a non-paragraph line break, e.g. where using a nested list is not desired because sub-items are already preceded by numbers:

Markup	Renders as
# Gather ingredients:<br />1{{frac|1|2}} tsp eye of newt (powdered)<br />2 bat wings<br />4&nbsp;cups mandrake root juice # Stir in cauldron over low flame for 30 minutes	Gather ingredients: 1​1⁄2 tsp eye of newt (powdered) 2 bat wings 4 cups mandrake root juice Stir in cauldron over low flame for 30 minutes

This must be done with coded <br /> line breaks; an actual wikitext linebreak (i.e. pressing enter/return while writing the source code) will bring the list to an end.

Nested blocks inside list items[edit]

Similar HTML usage can provide for block quotations within list items:

Markup	Renders as
* Beginning of first item.<blockquote>A large quotation.</blockquote>Rest of first item.<br /><br /> * Second item.	Beginning of first item. A large quotation. Rest of first item. Second item.
* Beginning of first item.<blockquote>A large quotation.</blockquote>Rest of first item.<br /><br /> * Second item.	Beginning of first item. A large quotation. Rest of first item. Second item.

Another case like this is small nested code blocks:

Markup	Renders as
The {{tnull|fnord}} template has two parameters: # {{para|foo}} This indicates the ''foo'' level:<br /><pre>{{fnord|foo=20}}</pre> # {{para|bar}} This indicates...	The {{fnord}} template has two parameters: |foo= This indicates the foo level: {{fnord|foo=20}} |bar= This indicates...

Here, linebreaks still cannot occur inside the list item, even if they are inside <pre>, and the HTML comment trick does not work with <pre>, which is why this technique is only suitable for short code examples.

Continuing a list item after a sub-item[edit]

In HTML, a list item may contain several sublists, not necessarily adjacent; thus there may be parts of the list item not only before the first sublist, but also between sublists, and after the last one.

In wikimarkup, unfortunately, sublists follow the same rules as sections of a page: the only possible part of the list item not in sublists is before the first sublist.

In the case of an unnumbered first-level list in wikimarkup, this limitation can be somewhat worked around by splitting the list into multiple lists; indented text between the partial lists may visually serve as part of a list item after a sublist. However, many readers find this confusing, as the indentation makes it look more like a continuation of the last sublist item. Also, this technique may give, depending on CSS, a blank line before and after each list, in which case, for uniformity, every first-level list item could be made a separate list, with further complicates the code. For complex lists like this, it is recommended to use the {{ordered list}} or {{bulleted list}} technique, and to replace instances of the "quick and dirty" wikimarkup version with the {{ordered list}} version.

Numbered lists illustrate that what should look like one list may, for the software, consist of multiple, nested lists. Unnumbered lists give a corresponding result, except that the problem of restarting with 1 is not applicable.

Markup	Renders as
<ol> <li>list item A1 <ol> <li>list item B1</li> <li>list item B2</li> </ol>continuing list item A1 </li> <li>list item A2</li> </ol>	list item A1 list item B1 list item B2 continuing list item A1 list item A2
{{ordered list | list item A1 {{ordered list | list item B1 | list item B2 }} continuing list item A1 | list item A2 }}	list item A1 list item B1 list item B2 continuing list item A1 list item A2
# list item A1 ## list item B1 ## list item B2 #: continuing list item A1 # list item A2	list item A1 list item B1 list item B2 continuing list item A1 list item A2

One level deeper, with a sublist item continuing after a sub-sublist, one gets even more blank lines; however, the continuation of the first-level list is not affected:

Markup	Renders as
# list item A1 ## list item B1 ### list item C1 ##: continuing list item B1 ## list item B2 # list item A2	list item A1 list item B1 list item C1 continuing list item B1 list item B2 list item A2

See also m:Template:List demo (backlinks edit).

Spacing between items[edit]

For an ordered list with items that are more than one paragraph long, using the HTML comment trick mentioned above to add a blank line between items in the wikicode may be necessary to avoid editor confusion. This is done with a commented-out line:

# First item<!--
                                                -->
# Second item

This doesn't produce unwanted visible spacing or bad list code in the rendered page like adding a plain blank line would:

1. First item
2. Second item

The comment must begin on the same line on which the preceding item ends, and the comment must end on its own line.

Wrong:

# First item
<!--
                                                -->
# Second item

Wrong:

# First item
<!--

-->#Second item

If the rendered text has a readability problem due to complex list items, or for some other reason space is desired between list items, simply add a pair of explicit HTML line-breaks to the end of the list items:

# Item 1<br /><br />
# Item 2<br /><br />

gives

1. Item 1
   
   
2. Item 2
   
   

Compare the version without the spacing:

1. Item 1
2. Item 2

Changing the list type[edit]

The list type (which type of marker appears before the list item) can be changed in CSS by setting the list-style-type property. This can be done using the {{Ordered list}} template:

Markup	Renders as
{{ordered list|type=lower-roman | About the author | Foreword to the first edition | Foreword to the second edition }}	About the author Foreword to the first edition Foreword to the second edition

Or, using HTML:

Markup	Renders as
<ol style="list-style-type: lower-roman;"> <li>About the author</li> <li>Foreword to the first edition</li> <li>Foreword to the second edition</li> </ol>	About the author Foreword to the first edition Foreword to the second edition

Extra indentation of lists[edit]

In a numbered list in a large font, some browsers do not show more than two digits (2 spaces width) of indentation, unless extra indentation is applied (if there are multiple columns: for each column). This is fixed by increasing the default indentation of 3.2em by 2em more, and it can be done in multiple ways:

When using explicit HTML <li> list items, use an explicit CSS margin spacing of 4em to double the default 2em spacing. Though not the simplest, this is the cleanest and most versatile method, as it does not rely on any peculiarities of the parser, nor on abusing any semantic markup for purely visual purposes. It allows starting with a number other than 1 (see below). It is the recommended method for complex lists.

Markup	Renders as
<ol style="margin-left: 5.2em;"> <li>abc</li> <li>def</li> <li>ghi</li> </ol>	abc def ghi
{{ordered list|style=margin-left: 2em | abc | def | ghi }}	abc def ghi

The parser translates an ordered list, <ol>, without any list items, <li> (in this case, it contains just another <ol>) into a <div> with a style="margin-left: 2em;", causing indentation of the contents. This is a versatile but potentially confusing method, as it allows starting with a number other than 1 (see below). It is kludgey, unnecessarily complex, and looks like invalid HTML. While the parser corrects it on-the-fly, only MediaWiki experts know this, with the result that other editors are likely to try to "correct" it by removing what looks like redundant <ol> code.

Markup	Renders as
<ol> <ol> <li>abc</li> <li>def</li> <li>ghi</li> </ol> </ol>	abc def ghi

Just put an explicit HTML <ol>...</ol> around wiki-markup list items. It functions the same as the previous example with the content of the "ordered list without any list items", which itself is an ordered list, expressed with # codes; the HTML produced, and hence the rendering, is the same. This is the simplest method, and recommended when starting a simple list with number 1.

Markup	Renders as
<ol> # abc # def # ghi </ol>	abc def ghi

A list of one or more lines starting with a colon creates an HTML5 description list (formerly definition list in HTML4 and association list in draft HTML5), without terms to be defined/described/associated, but with the items as descriptions/definitions/associations, hence indented. However, if the colons are in front of the codes "*" or "#" of an unordered or ordered list, the list is treated as one description/definition, so the whole list is indented.

Deprecated method: The technique below produces poorly formed (though technically DTD-validating) markup and abuses the semantic HTML purpose of description lists for a purely visual effect, and is thus a usability and accessibility problem. It will work in a hurry, but should be replaced with cleaner code; see WP:Manual of Style/Glossaries for several approaches.

Markup	Renders as
:# abc :# def :# ghi	abc def ghi

The page meta:Help:List demo demonstrates that several of these methods show all digits of 3-digit numbers (i.e., can handle lists of up to 999 items without display problems even in fairly large fonts).

Specifying a starting value[edit]

Specifying a starting value is possible with the {{ordered list}} template by using the start and value attributes.

Markup	Renders as
{{ordered list|start=9 | Amsterdam | Rotterdam | The Hague }}	Amsterdam Rotterdam The Hague

Or:

Markup	Renders as
{{ordered list | item1_value=9 | 1 = Amsterdam | item2_value=8 | 2 = Rotterdam | item3_value=7 | 3 = The Hague }}	Amsterdam Rotterdam The Hague

Alternatively, only the list item whose value is being set needs to be written in HTML, the rest of the list may use wiki syntax:

Markup	Renders as
# <li value="9">Amsterdam</li> # Rotterdam # The Hague	Amsterdam Rotterdam The Hague

This does not work inside <ol>...</ol>.

Comparison with a table[edit]

Apart from providing automatic numbering, the numbered list also aligns the contents of the items, comparable with using table syntax:

{|
|-
| style="text-align: right" |  9. || Amsterdam
|-
| style="text-align: right" | 10. || Rotterdam
|-
| style="text-align: right" | 11. || The Hague
|}

gives

9.	Amsterdam
10.	Rotterdam
11.	The Hague

This non-automatic numbering has the advantage that if a text refers to the numbers, insertion or deletion of an item does not disturb the correspondence.

Multi-column lists[edit]

Wrap a list in {{Columns-list}} to add columns.

Example: multi-column list

{{columns-list|colwidth=10em| * 1 * 2 * 3 * 4 * 5 }}

1 2 3 4 5

This setup also works with numbered lists.

Example: multi-column ordered list

{{columns-list|colwidth=10em| # a # b # c # d # e }}

a b c d e

{{columns-list}} is the general solution. You can combine it with any other type of list formatting, including but not limited to every type of list syntax mentioned on this page. It works with content that are not lists as well.

Multi-column numbered list[edit]

If you wish to do so, you can split a numbered list into multiple smaller lists, one per column. In this case, specifying a starting value is useful, to avoid restarting from one in each column. As mentioned above, this is only possible with HTML-syntax (for the first column either wiki-syntax or HTML-syntax can be used).

In combination with the extra indentation, using the |gap= parameter:

{{col-begin|width=auto}}
{{col-break|gap=2em}}
{{ordered list|start=125|a|bb|ccc}}
{{col-break|gap=2em}}
{{ordered list|start=128|ddd|ee|f}}
{{col-end}}

gives

a bb ccc

ddd ee f

Using {{multi-column numbered list}} the computation of the starting values can be automated, and only the first starting value and the number of items in each column except the last has to be specified. Adding an item to, or removing an item from a column requires adjusting only one number, the number of items in that column, instead of changing the starting numbers for all subsequent columns.

{{multi-column numbered list|125|a<li>bb<li>ccc|3|<li>ddd<li>ee<li>f}} →

a bb ccc

ddd ee f

You can specify the CSS list-type with the lst parameter:

{{multi-column numbered list|lst=lower-roman|125|a<li>bb<li>ccc|3|<li>ddd<li>ee|2|<li>f}} →

a bb ccc

ddd ee

f

{{multi-column numbered list|lst=disc|125|a<li>bb<li>ccc|3|<li>ddd<li>ee|2|<li>f}} →

a bb ccc

ddd ee

f

Note that the starting values of each column (125, +3, +2) have no effect when the non-numerical disc list type is used.

Streamlined style or horizontal style[edit]

It is also possible to present short lists using very basic formatting, such as:

''Title of list:'' example 1, example 2, example 3

Title of list: example 1, example 2, example 3

This style requires less space on the page, and is preferred if there are only a few entries in the list, it can be read easily, and a direct edit point is not required. The list items should start with a lowercase letter unless they are proper nouns.

See also WP:HLIST.

Tables[edit]

A one-column table is very similar to a list, but it allows sorting. If the wikitext itself is already sorted with the same sortkey, this advantage does not apply. A multiple-column table allows sorting on any column.

See also Help:Table.

Interaction with floating elements[edit]

Shortcut

• WP:EISL

List bullets and numbers can sometimes overlap left-floating images, and indented lines may not appear correctly when next to left-floating images. For example:

Markup	Renders as
[[File:Westminstpalace.jpg|left|thumb|100px]] <ol> <li>list item A1 <ol> <li>list item B1</li> <li>list item B2</li> </ol>continuing list item A1 </li> <li>list item A2</li> </ol>	list item A1 list item B1 list item B2 continuing list item A1 list item A2
[[File:Westminstpalace.jpg|left|thumb|100px]] First line :Second line ::Third line :::Fourth line	First line Second line Third line Fourth line

The {{flowlist}} template enables lists to stay clear of these left-floating objects:

[[File:Westminstpalace.jpg|left|thumb|100px]]
{{flowlist}}
  <ol>
    <li>list item A1
      <ol>
        <li>list item B1</li>
        <li>list item B2</li>
      </ol>continuing list item A1
    </li>
    <li>list item A2</li>
  </ol>
{{endflowlist}}

{{flowlist}}
First line
:Second line
::Third line
:::Fourth line
{{endflowlist}}

Renders as:

1. list item A1
   1. list item B1
   2. list item B2
   continuing list item A1
2. list item A2

First line

Second line

Third line

Fourth line

This method will not work inside of a table, and if your list is longer than the floated element, then the list will not flow around the image like normal, but instead be one block, leaving white space below the floated element.

Manipulating lists with user stylesheets[edit]

Further information: Help:User contributions § User styles

Virtually anything about how lists are displayed can be customized at the user end with CSS. Some of the more useful tweaks are outlined below. Of course, you enter the code in Text Editor mode — if you enter it in WYSIWYG mode, it is entered using escape characters. Also, if you enter HTML in the Text Editor and switch to WYSIWYG mode, the HTML is lost and re-converted to markdown without styles.

Extra indentation[edit]

As noted above, in a numbered list in a large font, some browsers do not show more than two digits of indentation width, unless extra indentation is applied (if there are multiple columns; then indentation for each column). While this should be fixed in the wikicode, user stylesheet CSS can work around the problem for as long as it is present, by increasing the default indentation of 3.2em by 2em more:

 ol { margin-left: 5.2em;}

Changing unordered lists to ordered ones[edit]

With the following user style CSS, ul { list-style: decimal; }, unordered lists are changed to ordered ones for sighted users (but not users who must use assistive technology). This applies (as far as the CSS selector does not restrict this) to all ul-lists in the HTML source code:

• those produced with *
• those with <ul> in the wikitext
• those produced by the system

Since each special page, like other pages, has a class based on the pagename, one can separately specify for each type whether the lists should be ordered, see Help:User contributions#User styles and Help:What links here#User styles.

However, it does not seem possible to make all page history lists ordered (unless one makes all lists ordered), because the class name is based on the page for which the history is viewed.