Adding Hyperlinks
Adding Hyperlinks in WYSIWYG Editor
Learn how to create clickable links while editing webpage content visually.
What Are Hyperlinks?
A hyperlink is a clickable text, image, or other element that takes a visitor to another webpage, document, section, or resource. Hyperlinks are an important part of website navigation because they allow users to move easily from one piece of content to another.
In a WYSIWYG editor, adding a hyperlink is usually simple. Instead of manually writing HTML code, you can select text and use the editor’s link or hyperlink button to insert the destination.
How to Add a Hyperlink in a WYSIWYG Editor
Step 1: Enter Your Text
First, type the text that you want visitors to click. For example, you might write Learn More About HTML.
Step 2: Select the Text
Use your mouse or keyboard to highlight the words that should become the hyperlink. Selecting the correct words makes the purpose of the link clear to visitors.
Step 3: Click the Link Button
Look for the Link, Insert Link, or chain-link icon in the WYSIWYG editor toolbar. Clicking this button normally opens a dialog box where you can enter the destination.
Step 4: Enter the Destination
Enter the webpage address in the URL field. If you are linking to another page on the same website, use an appropriate internal URL.
Step 5: Apply the Link
Click the editor’s Insert, Apply, or similar button. The selected text should now appear as a clickable hyperlink.
Step 6: Test the Hyperlink
Preview or publish the page and click the hyperlink to make sure it leads to the intended destination. Testing links helps prevent broken navigation.
Example of a Hyperlink
Suppose you want to link the words WYSIWYG HTML Editor to another article on your website.
In the visual editor, you normally select the words WYSIWYG HTML Editor, click the link button, enter the destination, and apply the hyperlink.
HTML Behind a Hyperlink
Although a WYSIWYG editor hides much of the HTML code, the editor usually creates an HTML anchor element when you insert a hyperlink.
“`The <a> element creates the hyperlink, while the href attribute specifies the destination.
Internal and External Hyperlinks
Internal Hyperlinks
An internal hyperlink connects one page of a website to another page on the same website. Internal links are useful for website navigation and help readers discover related content.
External Hyperlinks
An external hyperlink points to a different website or domain. When creating a website, external links should be used only when they are appropriate for the content.
Choosing Good Link Text
The words used for a hyperlink should clearly describe the destination. Good link text improves usability and makes the relationship between related pages easier to understand.
- Use short and descriptive text.
- Make the destination clear from the link text.
- Avoid using “click here” repeatedly.
- Keep links relevant to the surrounding content.
- Check that the destination page works correctly.
Benefits of Adding Hyperlinks in a WYSIWYG Editor
- Easy to use: Links can be inserted without manually writing HTML.
- Faster editing: The visual interface simplifies the link-creation process.
- Better navigation: Visitors can move between related pages easily.
- Improved content organization: Related information can be connected together.
- Visual feedback: The editor usually shows the linked text immediately.
Common Mistakes When Adding Hyperlinks
- Entering an incorrect webpage address.
- Linking to a page that no longer exists.
- Using unclear or misleading link text.
- Adding too many unnecessary hyperlinks.
- Forgetting to test links after publishing.
Reviewing hyperlinks before publishing can help maintain a reliable and user-friendly website.
Related Resources
Explore related information on The Science Online:
