Directory of RSS feeds

RSS feeds in the directory: 374

Added today: 0

Added yesterday: 0

Hi-Tech / Internet

Why semantic HTML is important, and how TypeScript helps to understand it

Css-live - Severstal your world! 24.09.2018 at 10:15

Community that speaks the languages of HTML, CSS and JavaScript

Translation of the article Understanding why Semantic HTML is important, as told by TypeScript from the site for the author — Mandy Michael

HTML not just the skeleton of our sites, it is also extremely important to ensure that the sites behave as relied on all platforms and technologies. If you start to use HTML in full, you can not just make the most of native functions, but also make it much easier for people and bots of any technology, both today and in the future.

due to the fact that in front-end development is increasingly focused on JavaScript, HTML and about all seem to forget, recently I had to spend some time trying to figure out how to explain to developers focused on JavaScript, why is it important to study and understand HTML

This gave me the idea:

"Why semantic HTML is important, and how Typescript helps to understand it"

Interface TypeScript about the dog

TypeScript is commonly found in stacks of complex technologies, built around JavaScript, and if you are not familiar with it, then this article is probably not for you.

For those who are still interested, TypeScript is essentially a typed JavaScript language, able all that is able JavaScript, plus something else. Its chip is static typing, allowing you to first specify a type for a variable, and then check these types at compile, throwing an error if the value of a variable of another type.

a Simple example of interface in Typescript that defines the dog

interface dog {

name: string

age: number

isFluffy: boolean


Here, I define an interface named dog. I have a nickname (name) type string, age (age) of type number, and fluffy (isFluffy) boolean (all dogs are good, but not all fluffy)

If you try to assign name a value of type number, then TypeScript will throw an error, saying "UH, you were expecting a string instead of a number".

In fact we said to TypeScript, what is the expected input that helps to debug, to read and write code much easier, since we explicitly specify the form in which our data should behave.

In fact, we do the same with HTML. We explicitly specify what should be the content.

a Simple example of semantic HTML

, We indicate whether we need the title (and what kind), a list or a header, navigation, bold, italic, date, picture, paragraph, section there are many items to choose from to describe our content more.

thus we give shape to your content, to write, read and work with it easier — not only to us but to other technologies

In the TypeScript has the concept of any type (any). When you specify the any type, the content can be anything. Therefore, the name can be a number, a string or even a Boolean value. Sometimes this is useful, but the typification is lost the advantages of language.

interface dog {

name: any

age: any

isFluffy: any


type Checking is no more, and all the reliability that comes from a Typescript, time loses its meaning.

the picture shows an HTML page that consists only of -s.

This is the same HTML. If you push one, it means to seize the opportunity to use the language fully. It is therefore important that you wisely chose the most suitable item and not just put on the machine.

Quoting Jeffrey Zeldman:

"...if you do for people and for a long time, it is simple, structured, and semantic HTML is better — each element is intended. Do not use div, if you mean p" — Jeffrey Zeldman.

It's pretty simple. Find out what elements are in HTML, and opt for your suitable content. Use every opportunity, no matter what language you write your code.