Do you ever wonder, “What kind of work is a markup engineer in the first place?” “What skills do markup engineers need?”
Therefore, this time, I will explain “the work contents of the markup engineer and the required skills”.
The latter half of the article also summarizes “the future of markup engineers and their annual income”, so please read it to the end.
table of contents
- 1. What is a markup engineer?
- 2. Role and work content of markup engineer
- 3. Skills required of markup engineers
- 4. Do you need a markup engineer?
- 5. The future of markup engineers
- 6. Annual income of markup engineer
- 7. Summary
1. What is a markup engineer?
First, I will explain the definition of markup engineer.
1.1 Markup engineer definition
A markup engineer is an engineer who creates a site based on a web design created by a web designer .
The feature is not to code the design created by the web designer as it is, but to code the web page after considering the ease of use and effect of the site .
When creating a web page
- HTML (Language for framing web pages)
- CSS (Language for creating web page designs)
- JavaScript (Language that gives movement to web pages)
Although it uses programming languages ​​such as, it is mainly characterized by being strong in HTML.
The work content is similar to that of a “coder”, but markup engineers are often treated as senior positions in the coder.
1.1.1 Differences between markup engineers and front-end engineers
Next, let’s talk about markup engineers and front-end engineers. First, let’s take a look at markup engineers.
Markup engineers are HTML professionals . We will give opinions, take SEO (Search Engine Optimization) measures, and code according to the purpose of the website.
On the other hand, front-end engineers are required to have a deep knowledge of CSS and JavaScript as well as HTML . I am often involved in development from the upstream process, and I often communicate closely with web directors and web designers.
1.1.2 Differences between markup engineers and coders
The big difference between a markup engineer and a coder is what happens after you receive your web design.
[Differences in movement after receiving a web design]
- Markup
engineer Create a website after considering ease of use and SEO measures - Faithfully code based on coder web design
In this way, markup engineers look not only at coding but also at “usability” and “SEO” .
1.1.3 Can Markup Engineers Be Inexperienced?
In conclusion, there are jobs that are looking for markup engineers from inexperienced. For example, a job related to coding and image processing of a product page on an EC site is one of the jobs that is hired by inexperienced people relatively often. This is because the product page will continue to increase as long as the number of products increases, and image processing will also occur as a business.
However, for inexperienced people, finding a job or changing jobs to an inexperienced occupation is not “easy”.
In addition to HTML / CSS / JavaScript, there are cases where knowledge about design such as UI design and Illustrator is also required. Continuous learning after joining the company will be essential.
2. Role and work content of markup engineer
Next, I will explain the role and work content of the markup engineer in five parts.
2.1 Confirmation and hearing of specifications
Web designers may be creating designs without considering the difficulty of coding. In addition, a large amount of images are used to realize web design, and the screen display speed may slow down. While accurately hearing
the design intent of the web designer, it is necessary to consider the man-hours required for implementation and hold meetings.
2.2 Coding
Based on the confirmed web designer specifications, code using HTML, CSS, JavaScript, etc. In addition to just entering characters, we will create web pages with an HTML structure that is kind to the viewer and easy for Google and others to understand structurally .
In some cases, the coding is done by another coder. However, knowledge of HTML, CSS, and JavaScript is essential, as markup engineers sometimes code directly.2.3 Bug fixes
Web pages often look fine, but often have bugs when you actually look at the code. Be especially careful when automatically generating HTML / CSS / JavaScript from design tools.
Also, even if it works correctly on Google Chrome, the display may be different between browsers, such as the display being corrupted on Mozilla Firefox. We’ll fix the bugs and work on a successful launch.
2.4 CMS introduction / design / construction
CMS is a content management system .
“WordPress”, which is also used in blogs, is famous among CMS. Introducing CMS makes it easier to create and update Web content as shown below.
A website is not created once, but added / updated as the company grows and new products are developed. Therefore , a mechanism that makes it easy to add / update new pages is essential.
2.5 SEO measures
Markup engineers are tasked with ” internal measures ” in SEO. Internal measures are measures to create “internal structure (HTML) of Web pages considering SEO” .
In addition to considering the HTML structure of a single page, we also perform ” optimization of the internal link structure ” to design links between pages .
3. Skills required of markup engineers
There are four skills required of a markup engineer.
In particular, the “user’s perspective” and “communication skills” introduced in the latter half are very important. Let’s take a closer look.
3.1 Coding skills
It is a skill to code based on web design. Not only HTML / CSS but also ” JavaScript ” skills are required.
Not only superficial knowledge such as “seeing the screen on the Web”
- Is there an error?
- Is the display broken when viewed with another browser?
- Does it have a structure that does not cause any problems in SEO?
Coding skills are required to verify such things.
3.2 Knowledge of SEO measures
The following three are mainly required for knowledge of SEO measures.
- Is the structure easy for the reader to read?
- Are search engine crawlers using easy-to-understand tags?
- Can internal link structuring be considered?
In the example of “tags that are easy to understand for search engine crawlers”,
- Title: title tag
- Heading: h2-h5 tags
- Bullets: ul li tag
Etc. Search engines look at the types of tags to see what they are doing, so you need the skills to look at your web design and use these tags appropriately.
3.3 Attitude to develop from the user’s point of view
“Attitude to develop from the user’s point of view” is also important. Imagine a good design, but it took more than 10 seconds to display the screen. Most of the time, you will return to the previous screen before the screen is displayed.
Markup engineers also need the skills to consider ease of use for these users.
3.4 Communication skills
Markup engineers alone do not complete all the work related to website development,
- Web designer
- Web director
While consulting with such people, there may be work to redesign and redesign. At this time, if you do not have the skills to communicate well in words, you will not be able to create a site smoothly.
4. Do you need a markup engineer?
In the engineer community, there is rarely a topic such as “Isn’t there a need for a markup engineer?”
Many people are worried about becoming a markup engineer, so I will explain why.
4.1 Page unit price decline
According to an interview article with Shinichi Fujikawa, also known as “Efushin,” the CTO of BASE Co., Ltd., the decline in page unit prices was described as follows.
Furthermore, as for the unit price, HTML around 2000 sold for about 100,000 yen per page, but now I hear about projects with a page of about 1000 yen.
The irony is that the value that the Web brings is higher than it was when the page was 100,000 yen, but the unit price of the page is falling in the opposite direction.
Source: Is the “markup engineer unnecessary theory” true? I asked Mr. Efushin | Engineer type
If it takes 1000 yen per page, if it takes 5 hours, the hourly wage will be 200 yen. Many people may be worried because the hourly wage will be much lower than the minimum hourly wage.
4.2 Spread of offshore development
Offshore development is also increasingly used for site creation and development. Offshore development is a method of outsourcing development by utilizing low-wage overseas human resources .
For example, the average monthly unit price for offshore development in Vietnam is
- Most common: 300-350,000 yen
- The second most common item: 350,000-400,000 yen
Also the data that was.
Reference: [latest version in 2021] How much is the unit price for offshore development in Vietnam? | Offshore Development.com
The monthly unit price is gradually increasing overseas, but it is still about 1 / 2.5 of the monthly unit price in Japan. For simple projects such as markup only, there is an increasing trend to place orders overseas at low cost.
4.3 Enhancement of no-code tools
If you use the following no-code tools, you can automatically convert your web design to “HTML / CSS / JavaScript”.
[Example of no-code tool for web design]
- Sketch
- Adobe XD
- STUDIO
- Figma
As a result, some may be worried that the markup engineer’s job will be lost. However, the source code of the code converted by the no-code tool is often messed up even if it looks beautiful. After conversion to code, corrections by markup engineers and coders are essential as of 2021.
5. The future of markup engineers
We will also explain the future potential and career path of markup engineers.
5.1 Improve JavaScript technology and become a “front-end engineer”
A markup engineer is a job to acquire knowledge of HTML / CSS / JavaScript, which can be said to be the basis for becoming a web engineer .
Also, if you acquire design skills, you can become a human resource who can ” make your own design and code with the design you made to make a screen “. In the field where development speed is required, the skill to make a prototype may be useful.
If you further develop your JavaScript skills, you can turn into a front-end engineer . I think markup engineers are recommended in terms of expanding the range of careers.
5.2 Front-end technology has high potential
Front-end technology has made remarkable progress.
For example , with the advent of platforms such as BFF and Firebase , it is becoming possible to handle infrastructure, which was the role of a back-end engineer, with front-end technology .
Learning a back-end programming language is also essential when trying to become a full-stack engineer. However, by utilizing the above technology, there are also merits such as “less language to remember”.
Please read it as it is explained in detail below.
6. Annual income of markup engineer
The average annual income of markup engineers is 3.85 million yen (information as of April 29, 2021).
The system engineer / programmer costs 4.43 million yen, which is a little lower than that. However, it is easy to start from inexperienced, if you train your skills
- Front-end engineer
- Full stack engineer
Considering that it will be easier to aim for such things, it seems that the future is not low.
7. Summary
This time, I explained “the work contents of markup engineers and required skills”.
Markup engineers are jobs that allow you to acquire basic knowledge of HTML / CSS / JavaScript and SEO measures, and at the same time, there are career paths such as becoming a front-end engineer.
If you are interested in the job of a markup engineer, why not consider accepting orders for LP creation and website development projects while improving front-end technology.