HTML Theory Recap in 5 mins

What is HTML ?

Hypertext Markup Language (HTML) is a markup language that defines the structure of webpages. It defines how content will be displayed in the web browser. Modern day HTML also makes sure that webpages are accessible to people with disabilities using ARIA.

Some basic concepts to know as a developer are:

1. Semantic Tags
2. Meta Tags
3. The Open Graph Protocol
4. Client-side validation

Semantic Tags

HTML uses semantic tags to convey the meaning of a webpage.

For example: In an elevator, buttons are used in vertical order to convey the floor number. However, this is also not enough for everyone so numbers are added which indicate the floor number.

Semantically writing HTML allows search engines and accessibiliy softwares to understand the contents of a page. Semantic HTML tags can be broadly classified into 5 types:

• Sectioning tags → These tags define sections of a webpage. Examples of such tags are: <h1>, <header>, <footer>, <main>.
• Content tags → These tags indicate the type of content within the tags. Examples: <blockquote>, <ol>, <p>.
• Inline tags → These tags only occupy the space covered by the content within them & don’t break the flow of content. Examples: <span>, <a>, <code>
• Table tags → These tags are used to define tables in HTML. Examples: <table>, <thead>, <tbody>, <tfoot>
• Embedded content & media tags → These tags allow media content like audio, video, images, etc to be defined semantically. Examples: <audio>, <video>, <img>

Meta Tags

Metadata is data about other data. Meta tags in HTML define the webpage. Metatags typically contains 2 parts:

1. name → defines the tag type
2. content → defines the values

<meta name="author" content="John Doe">

3 categories of Meta tags are:

• Metatags for SEO → These tags are read by search engines to rank and correctly search webpages. Some of the SEO meta tag types are: title, description, author, robots.

• http-equiv tags → The http-equiv attribute is essentially used to simulate an HTTP response header. Not everyone has access to their server's configuration. This can be true if you're using shared hosting where the hosting company makes server config changes on your behalf or you just don't have the credentials to access the server's config. Some of the http-equiv meta tag types are: content-type, default-style, refresh, Cache-Control.

• Responsive meta tags → These tags define the responsive properties of the webpage. Some of the responsive meta tag types are: viewport, HandheldFriendly.

Open Graph Protocol

With the growth of social media platforms and people sharing thousands of links everyday, Facebook found a way to display information about a website before a user clicks on the link to improve user experience. Facebook established The Open Graph Protocol in 2010. It is a set of metadata rules that allow websites to describe themselves to social networks. OG Metatags typically contains 2 parts:

1. property → defines the property name
2. content → defines the property values

There are 4 meta tags that are the basic meta tags to turn web pages into graph objects. They are:

1. title → Defines title of the page. This text will appear in the preview
2. type → Defines the type of content such as website, video, music or article. Depending on the type other values may be required
3. url → Defines the address that the social network must use for this specific page
4. image → Defines the image that will be displayed when the url is shared

<meta property="og:title" content="My website">
<meta property="og:type" content="Website">
<meta property="og:url" content="https://example.com">
<meta property="og:image" content="https://example.com/me.jpg">

Detailed description of the mentioned and other OG meta tags are provided in The Open Graph Protocol website.

Client-side Validation

Apart from defining content structure, HTML also provides data validation in forms. HTML checks for data as soon as data is typed in form. This is called client-side validation and it is implemented using the following properties:

• required → If an HTML field is defined as required then some data must be provided in the field before the form can be submitted.
• minlength → Specifies the minimum length of input to be given
• min and max → Specifies the minimum and maximum values of numerical input types
• type → Specifies the type of data to be provided like number, text, email, etc.
• pattern → Specifies a regular expression that defines the pattern that the input data needs to follow

Learn more about client-side form validation

Quick Tip 💡: For beginners the HTML tags may seem overwhelming but don't be stressed out. When you are starting out only familiarity with basic tags are needed. As you proceed towards more advanced projects, you will get familiar with more tags. If you want learn in detail, then checkout my notion note on HTML for developers

Why should you learn from this ?

When people are getting into Software Development, people explore a lot of technologies and it's natural to forget certain things as you learn. Keeping this in mind, I wrote this blog for quick recap of HTML. If you want to have to have a look at the HTML tags in detail, I have got that covered too. My Notion note contains all the popular HTML tags with description.
Check it out 👉