Read this article to understand how to convert HTML into a wiki-like editable specification. I also explain how to create a wiki-like website using WordPress, so if you’re interested, be sure to check it out!
Table of contents
- What is a wiki
- Difference between HTML input method and wiki notation
- Heading input method
- Font size and decoration method
- How to specify the position of an element
- How to enter lists and images
- Other input methods
- What is the contenteditable attribute that can be edited like a wiki in HTML?
- What is the contenteditable attribute
- Edit images like a wiki with the contenteditable attribute
- How to create a wiki-like web page with HTML’s contenteditable attribute
- How to make notepad with contenteditable attribute
- [Advanced Edition] How to create a wiki-like website with WordPress
- Install Yada Wiki on WordPress
- Create an internal wiki for your company
- Create the top screen of the wiki
- Create a link destination detail screen
- 3 recommended web services that can create a wiki
- SlimWiki
- fandom
- DokuWiki
- NotePM
- summary
What is a wiki
A wiki is a kind of CMS (content management system), and not only administrators but also users can rewrite the contents.
A typical website is Wikipedia, where anyone can add content.
Wikipedia is an online encyclopedia operated by the Wikimedia Foundation. Since it uses the wiki mechanism, users can also write and add content.
In addition, there is an internal wiki, which is a corporate version of wikipedia, and it is widely used from publicly available sites to internal company tools.
Difference between HTML input method and wiki notation
Wiki notation is simple compared to markup languages such as HTML and CSS and programming languages.
Let’s take a look at how to actually enter it, comparing it with the HTML input method.
Heading input method
| concents inputted | HTML | wiki |
| Subheading | <h3>Subheadings</h3> | *** Subheading |
| middle heading | <h2>middle heading</h2> | ** middle heading |
| big headline | <h1>Broad Heading</h1> | * big headline |
Font size and decoration method
| concents inputted | HTML | wiki |
| font size | <font size=”Enter font size”> | &size (enter character size) |
| Letter color | <font color=”Enter text color”> | &color (enter text color) |
| Background color | <font background-color=”Enter background color” | &color(input text color, input background color) |
| bold | <strong>Bold Text</strong> | “Bold Text” |
| Italic | <i>Text to italicize</i> | “’text to italicize”’ |
| Underline | <u>Character to underline</u> | %%% characters to underline %%% |
| Strikethrough | <del>strikethrough character</del> | %%strikethrough character%% |
| superscript | <sup>Superscript</sup> | &sup() superscript |
| Subscript | <sub>subscript</sub> | __subscript__ |
How to specify the position of an element
| concents inputted | HTML | wiki |
| left alignment | <align=”left”> | &align(left) {content to be left aligned} |
| right alignment | <align=”right”> | &align(right) {content to right-align} |
| centered | <align=”center”> | &align(center){content to center} |
How to enter lists and images
| concents inputted | HTML | wiki |
| bulleted list | <ul> <li>Listing 1</li> <li>Listing 2</li> <li>Listing 3</li> </ul> |
– List 1 – List 2 — List 3 |
| numbered list | <ol> <li>Listing 1</li> <li>Listing 2</li> <li>Listing 3</li> </ol> |
+list 1 ++list 2 +++list 3 |
| image display | <img src=”Image URL”> | &ref(image URL) #ref(image URL) |
| image size | <img src=”image URL” width=”width” height=”vertical width”> | &ref(image URL, width, height) |
Other input methods
| concents inputted | HTML | wiki |
| quote | <blockquote>Type the sentence you want to quote</blockquote> | After entering a half-width space or “>” at the beginning of the sentence, enter the sentence you want to quote. |
| Display formatted text as is | <pre>Formatted text</pre> | =|| Enter Formatted Characters ||= |
| Link | <a href=”link destination URL”>link name</a> | [[～～>page name]] |
| other window | <a href=”link URL” target=”_blank”>link name</a> | [[～～>>Link destination URL]] |
| <video src=”video URL”></video> | &video (video URL) |
What is the contenteditable attribute that can be edited like a wiki in HTML?
Web pages created in HTML can be changed by editing the file. However, adding the contenteditable attribute allows anyone to rewrite the content on the browser .
I will explain the features and usage of the contenteditable attribute.
What is the contenteditable attribute
The contenteditable attribute is a type of HTML attribute that allows you to grant modification permissions to elements within a specified HTML tag .
Specifying “true” for the value of the contenteditable attribute makes it editable, and specifying “false” makes it uneditable.
For example, the code below has a value of true for the contenteditable attribute, so anyone can edit it in the browser.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<p contenteditable='true'>
</body>
</html>If you click the displayed characters, it becomes a mouse cursor for character input like a text box and you can edit the contents.
Also, the tag itself cannot be changed, and only the characters in the content can be changed.
Edit images like a wiki with the contenteditable attribute
If you specify the contenteditable attribute of HTML in the img tag and display the image, you will be able to move or delete the image on the browser.
You can also add text to the side of the image.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<div contenteditable="true">
<img src="pic/icon.png">
</div>
</body>
</html>By specifying “contenteditable=”true”” in the parent element of the img tag, you can add text next to the image displayed with the img tag or move the location.
Execution result
How to create a wiki-like web page with HTML’s contenteditable attribute
To make the content of the web page editable or addable like a wiki with the contenteditable attribute, enclose the area you want to edit in div tags and specify “contenteditable=”true””.
The contenteditable attribute is reflected in all contents within the specified HTML tag.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<div contenteditable='true'>
<img src="pic/icon.png" width="300" height="250" alt="pic1" />
<img src="pic/pc.jpeg" width="300" height="250" alt="pic2" />
<img src="pic/sp.jpg" width="300" height="250" alt="pic3" />
<img src="pic/test.png" width="300" height="250" alt="pic4" />
</div>
</body>
</html>In the above code, all elements in the div tag directly below the body tag can be changed.
Execution result
You can move the image to your favorite place and change the text as shown below.
Also, if you press Enter within the range of the contenteditable attribute to enter a new line, “<div><br></div>” will be automatically entered.
If you press Enter with the mouse cursor on the p tag, the div tag will become a p tag and a line break will occur.
It is also good to keep in mind that if you enter characters after a line break in the p tag, the characters will be specified in the p tag, and if you enter the characters after a line break in a place other than the p tag, such as a title or image, it will be specified in the div tag. I guess.
How to make notepad with contenteditable attribute
By taking advantage of the contenteditable attribute, you can use HTML to display an editable web page on the browser like Notepad.
It’s easy to make, just leave the body tag of the HTML file blank and specify “contenteditable=’true'” in the body tag.
Then, the entire display range of the browser becomes an editable range, and you can freely edit it by entering or deleting characters like a notepad.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body contenteditable='true'>
</body>
</html>Execution result
[Advanced Edition] How to create a wiki-like website with WordPress
Yada Wiki , a WordPress plugin , allows you to create a wikipedia-like website in WordPress.
By creating a wiki with Yada Wiki, you can leave multiple people’s opinions on one matter as character data. In addition, it is perfect for sharing know-how and managing schedules as an internal wiki.
This time, I will explain how to create a soccer wiki using the Yada Wiki plugin for WordPress as an example.
Install Yada Wiki on WordPress
The procedure to introduce Yada Wiki to WordPress is as follows.
“Yada Wiki” will be displayed in the plug-in list, so click the “Install Now” button.
Create an internal wiki for your company
After installing Yada Wiki, enter the subject of the wiki and the content that it will be based on.
This time, we will decide the necessary categories assuming a soccer wiki. Specific examples of categories are listed below.
- What is soccer
- soccer history
- soccer rules
- famous soccer tournament
- famous soccer player
To set categories, hover your mouse over the “Wiki Pages” field on the WordPress administration screen and click “Wiki Categories” from the displayed menu.
- Name: Enter the name of the category
- Slug: Enter alphanumeric characters to be entered at the end of the URL
- Description: Enter details about the category
After filling each input field, click the blue button “Add New Wiki Category” to add it.
Enter all categories as below.
Create the top screen of the wiki
The top page of the wiki can be created by clicking “Add New” from the “Wiki Pages” column on the management screen.
A screen for entering the title and content of “Add New Wiki Page” will be displayed.
First of all, we will enter the necessary “table of contents” on the top page. Select Heading 2 from the Paragraph drop-down menu and enter Table of Contents.
In the title input field, it is a good idea to enter an easy-to-understand name such as “Top page” so that it can be recognized as a top page.
Next, enter the contents of the table of contents.
If you want to specify the table of contents list with numbers, select “Numbered list”, and if you want to specify it with “・”, select “Unnumbered list”.
After selecting, click “Add Wiki Link”. Then, the following screen will be displayed, so enter the name of the category in the “Link” column, leave the Show column blank, and click the blue button “Insert Shortcode” to complete the setting as the table of contents.
Set all categories as the table of contents with the above contents.
After setting, press the “Preview” button on the upper right of the screen, and the entered contents will be displayed as a table of contents with links.
After confirming that the preview screen is displayed correctly, it is a good idea to click the “Save Draft” button at the top right of the screen to save it.
Create a link destination detail screen
Create content for each individual page that you can navigate to from the table of contents you just created.
I will explain the item “What is soccer” directly under the table of contents as an example.
First, click the link “What is soccer?” displayed on the preview screen. Then, the setting screen of the link destination is displayed as shown below.
The title field is already populated with the name of the link you clicked in the table of contents.
Enter the content related to the title “What is soccer?” in the content field.
After entering the content, check the category corresponding to the title from the “Wiki Categories” column on the right side of the screen.
Finally, click the blue “Publish” button and you are done. Let’s create the other table of contents in the same way.
Finally, press the “Publish” button at the top right of the page displaying the table of contents to complete the wiki.
As you can see in the image above, the clicked link changes color so you can see it at a glance.
If you want to create a wiki-like website with WordPress, please refer to it!
3 recommended web services that can create a wiki
You can make HTML editable like a wiki, and you can use WordPress to create wiki-like web pages, but there are also web services that can create wikis.
Among them, I will introduce three wiki creation services that are relatively easy to use.
SlimWiki
SlimWiki is a web service that allows you to create a wiki without any knowledge of HTML or WordPress, as it has a function to specify characters, images, graphs, etc.
3 users can use one account. Additional $5 per month for 4th and subsequent children.
To use SlimWiki, you need to register an account, but it’s easy because you just enter your name and email address and decide your own password.
The content input fields are as follows.
Similar to the WordPress block editor, adding text and images is easy.
Recommended for those who have just started programming and are not confident in HTML, and those who want to create a wiki easily .
fandom
A template for creating a wiki is provided, and it is attractive that even beginners can easily create it . The fandom home page hosts entertainment-focused wikis, from movies like “Harry Potter” to TV series like “SpongeBob”.
Another advantage is that you can create your own work while referring to other wiki works .
The fandom edit screen is shown below.
You can create a wiki just by adding content according to the template, so even beginners who have just learned HTML for the first time can create a wiki .
DokuWiki
The setting method is similar to the same open source and popular WordPress, and you can upload it on the server and extend the function using plugins and PHP code.
There are also multiple templates for DokuWiki, from design templates like Wikipedia to templates that are simple and responsive.
To use DokuWiki, you need to use a rental server or set up a server on your own computer. Also, when customizing, you will have the opportunity to touch PHP, so this service is recommended for those who have touched WordPress .
NotePM
NotePM is an internal wiki service used by over 5,000 companies.
It is characterized by its strong in-site search function, so you can quickly search for information related to the company, such as company know-how and manuals. Now that remote work has spread, it is a perfect service as a mechanism for smooth communication between employees online.
NotePM has a wide range of functions, from templates for creating manuals to management of change history. Since it can be expressed in an easy-to-understand manner according to the content of internal information, you can expect to reduce communication costs.
The price is set according to the number of people, and the lowest price is 4,800 yen for 8 people. There is also a 30-day free trial period , so we recommend that you decide whether to continue using it after actually using it.
This service is recommended for companies considering using an internal wiki .
summary
This time, I explained how to create a web page that can be edited like a wiki in HTML. How was it?
A wiki is a third-party editable CMS that allows you to create content in web pages with less coding than HTML.
With the HTMLcontenteditable attribute, the content of HTML tags can be edited on the browser like wikipedia .
If you want to create a wiki easily, we recommend using a dedicated wiki creation service.
