Html: The Underrated Software Technology

Html: The Underrated Software Technology

This article is about jumping to the defence of HTML by highlighting the importance of the technology to software development. Often times, I have read in articles how less of an importance HTML is accorded with and it makes me wonder what any developer would do without it.

HTML stands for HyperText Markup Language and it's a language employed to structure data on web pages. Just like there's no walking being without a skeleton, there is no website or web application without the support system of HTML. Just like a building is only as strong as its foundation, HTML is the skeleton that holds everything together, the pedestal on which other software technologies like CSS, Javascript, etc are built on. To put it in a more web-based context, HTML makes sure the page is deployable on different devices and web browsers and if well written, provides a good structure for the content of the website or application, for easy application of CSS and Javascript. It is therefore imperative that every developer knows how to write a good and well structured HTML.

HTML BOILERPLATE AND SIGNIFICANCE OF EACH TAG

HTML head.png

  • <!DOCTYPE html> : This is telling the computer that the document type is HTML. It is a self-closing tag.

  • <html lang = "en"> : This tells the computer that the output should be in English language. It has a closing tag </html>.

  • <head> : This tag contains the non-visible part of the web page. In the head tag, we have some sub-tags i could call child-tags. It has a closing tag </head>.

THE META TAGS

  • <meta charset = "UTF-8"> : This specifies the encoding of the page. With this in the head tag, anything written is transcribed to a language the computer understands. UTF-8 is the default value and the character encoding of unicode.

  • <meta http-equiv="X-UA-Compatible" content="IE=edge"> : This allows for compatibility with all web browsers.

  • <meta name: "viewport" content="width=device-width, initial-scale=1.0"> : This is important for making your website viewable on different screens.

  • <meta http-equiv="X-UA-Compatible" content="IE=edge"> : This allows for compatibility with all web browsers

  • <meta name: "viewport" content="width=device-width, initial-scale=1.0"> : This is important for making your website viewable on different screens.

NOTE: All the meta tags are self-closing.

OTHER META TAGS FOR WEBSITE OPTIMIZATION INCLUDES:

  • <meta name: "description" content = ""> : Gives a short insight on what the site is all about

  • <meta name: "keywords" content = ""> : This makes your website easily find-able

  • <meta name: "robots" content = "NOINDEX, NOFOLLOW"> : This hides your website from searches

THE SCREEN VISIBLE PART HTML

HTML body.png

As earlier explained, the head section contains important tags that makes any website or application possible to use but the content of these tags are not visible on screen to users.

Then there is the body section that hold tags with visible contents. These tags can either be semantic or unsemantic. We will get to that in my next article. Look out for it.

CONCLUSION

Having read this short article and having a clearer understanding of every tag within the HTML structure, I believe aspiring developers will pay alot more attention to learning how to write proper HTML.