This guide aims to show you how to edit HTML in Wezen, and more specifically hyperlink tags.


TABLE OF CONTENTS


What is an HTML tag?


Tags are the way you mark elements of a webpage in HTML. It can be used to delimit a section of the page (block tags) or mark a specific element of a text (in-line tags) to define that this text should have a specific action or formatting linked to it.


In this guide, as it’s what you’ll have to modify most of the time, we will be focusing on in-line tags.


In-line tags can either work by pair, an opening tag, marking the beginning of the element of text, and a closing tag, marking the end of the element of text, or alone, they are then called auto-closing tags.


Let’s take a look at the hyperlink tags as an example.


You can <a href=”https://wezen.com”>click here</a> for an amazing website


<a href=”https://wezen.com”> is the opening tag. </a> is the closing tag.


An opening tag or an auto-closing tag will always be composed of a type and some attributes. Here the type is “a”, meaning it’s a link. There is a variety of types, “b” for bold, “i” for italic, “span” for generic marking, etc…

The attributes are under the form “NameOfTheAttribute = ValueOfTheAttribute” . Here there is one attribute, href, the destination of the link, and its value is “ ”https://wezen.com” “


Once this piece of HTML interpreted by the browser, it will look like that :


You can click here for an amazing website



You can find more information about hyperlink tags here.


What is important for you to know is that the tag use the code “a” and that the destination URL is the value of the attribute “href”


You can use either absolute or relative URL. Absolute URLs are full URLs, starting with “https://” or  “http://” that will direct you directly to this address, no matter from where you click the link, this is the full path to the target website. You should always use those for external links. Relative URLs are only the end of the URL. They will take you to that destination from the domain where you clicked it. So if my href is “/translate”, if I click it from google.com, it will go to https://google.com/translate whereas if I click it from wezen.com, it will go to https://wezen.com/translate . This can only be used for internal links.


This is why some links, if written with relative URL, will not work if you click them in Wezen, because that page does not exist in the wezen.com domain. However, using relative URL for links internal to your website is really powerful, especially in the context of translation, because it means that with the same HTML code, if you’re clicking it from google.com it will direct you to the english version of the page, but if you click it from google.fr, it will direct you to the french version of the page.



 In the translation studio in Wezen, you can switch between two modes : WYSIWYG mode, What You See Is What You Get, where you see how a browser will natively interpret the HTML, and HTML mode, where you see directly the HTML code that you’re actually editing


You can find a full documentation about how to switch between those modes here


In WYSIWIG mode, you can insert or modify a link by selecting the part of the text where you want to insert the link and click on the “insert URL” icon in the formatting toolbar on top of the Studio. You just simply input the URL in the field, this will be the value of the href attribute. If your text already had a link, it will replace the link. If not, it will simply insert the new link. 


In HTML mode, you can use the same method to insert a link. To modify an existing link you can also unlock the opening hyperlink tag, modify the value of the href attribute, and lock back the tag. Don’t forget to lock back the tag. You can find information about how to lock and unlock HTML tags in the studio here