HTML, Basic of HTML, Godfather of Web, html, heading tags, links, html

HTML

An Overview:

HTML is an acronym used for the Hyper Text Markup Language.

It is Browser Understandable Language, a Scripting Language and, Markup Language but it can't be considered as a Programming Language.

Currently, HTML - 5 is in use but many other HTML version are still available in HTML archive.

HTML is use to provide proper structuring and give meaning to all the tags, linked css, javascript etc., elements in a document.
Entire Web is depended on HTML

HTML is the Building Block of the Web

Anatomy of an HTML element

let's explore the HTML tag using <p> ... </p> :

Anatomy of an HTML element

The opening tag : This consists of the name of the element (in this example, p for paragraph), wrapped in opening and closing angle brackets.

Content : Any thing which is written after the opening tag and before the closing tag, is called as Content of that tag.

Markup Language :

Any symbol or Character that you insert at certain place in a text file or document is known as Markup. The Language which use such Markup's, symbol's or character's is called Markup Language. HTML have tags for defining the meaning and structure of web content besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).

HTML uses "markup" to annotate text, image, and other content for display in a web browser. It includes some special "elements" or HTML elements or HTML tags.

How to write first HTML file

To write your first HTML file, you need an HTML document, which is a document a .html or .htm extension. You can use editors like VS Code, Sublime Text, Atom, Notepad++, etc.,

Emmet :

Emmet is a powerful extension which provides boilerplate or pre-coded code snippets.

! + tab can gives whole HTML5 boilerplate code snippet on the text editor.

It allows us to write HTML components as if they were CSS selectors, CSS styles with abbreviations and also gives us access to a collection of keyboard shortcuts to manipulate and navigate through the code. EMMET is already present in most modern editors, such as VSCODE, not being necessary its installation. In these cases, just start writing. If your editor don’t have it by default, just download and install the plugin.

Text

It is a unique element which doesn't require an opening or closing tag to be displayed on the browser screen.

As, I just type Hola! coders, "I writing the HTML element Text over the browser screen" but you manupulate/change the text for better understanding.

HTML Structure

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Arpit Dubey describing about HTML Structure</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image" />
  </body>
</html>

let's us know about the tag used :

<!DOCTYPE html> : It is used to link to a set of rules that the HTML page had to follow to be considered a good HTML.
<html lang="en-US"></html> : It wraps all the content on the entire page and also known as the root element. It also includes the lang attribute, setting this as the primary language of the document.
<head></head> : It act like a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. CSS for styling content, character set declarations, Meta tags (SEO purpose) and, more.
<meta charset="utf-8"> : It sets the character set, document should use to utf-8 which includes most characters from the vast majority of written languages.
<meta name="view port" content="width=device-width"> : It ensures that the web page renders at the width of view port, preventing mobile browsers from rendering pages wider than the view port and the shrinking them down.
<title></title> : It sets the title of your page, which appears in the browser tab of the page is loaded in, it is also used to describe the page when you bookmark/favorite it.
<body></body> : It contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.

Note : Meta tags are use to ensuring that search engines know what your content is about and using such meta description ranking of the website get improved. So these are used for SEO purposes.

Images

For displaying images on the screen of browser <img> tag is used.

<img src=" ... " alt=" ... " > it embeds an imgae into our web page in the position it appears. It does it via the src (source) attribute, which contain the path to that image file.

alt (alternative) attribute : In the alt attribute, you specify descriptive text for users who cannot see the image, possibly because of the following reasons:

1. Visually impaired : Users with significant visual impairments often use tools called screen readers to read out the alt text to them if image is not displaying.

2. Unwanted Error : The keywords for alt text are "descriptive text". The alt text you write should provide the reader with enough information to have a good idea of what the image conveys if the image is failed to display may because of wrong image path etc.,

Headings

Heading tags allow you to specify certain parts of content as Headings or the subheadings. It is are of 6 levels, from <h1>, <h2> ... <h6>

<h1> Main Heading </h1>
<h2> Top level Heading </h2>
<h3> Sub Heading </h3>
<h4> Sub Sub Heading </h4>
<h5> Sub Sub Sub Heading </h5>
<h6> Sub Sub Sub Sub Heading </h6>

Note : You'll see that your heading level 1 has an implicit style. Don't use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as SEO. Try to create a meaningful sequence of headings on your pages, without skipping levels.

Paragraphs

<p> tag are used for containing paragraphs of text; it is the most generally used tags which is frequently used by Web Developers

<p> Hola! coders I'm your Paragraph Tag </p>

Lists

To display the HTML content in a listed format, lists are commonly used. To make list it consist of at least two elements. There are two type f lists Ordered and Unordered list.

Unordered lists where the order or sequencing of list items doesn't matter, such as shopping list. List items are wrapped in <ul> tag.

  <ul>
      <li> item 1 </li>
      <li> item 2 </li>
 <ul>

Ordered lists are lists where the order of list items does matter, such as a recipe or steps to prepare a recipe. List items are wrapped in an <ol> tag.

  <ol>
      <li> item 1 </li>
      <li> item 2 </li>
 <ol>

Links

Links are the most crucial part of a HTML document because to create a "Hyper Text" we required links to connect them. Hyper Text are those text present in the HTML document which connect or link multiple pages together.

<a> tag "a" being the short form for "anchor". To make text as hyper text you have to insert paragraph content within the <a> Here </a> tag.

Example :

<a href=" ">Home Page</a>

fill href=" " with the URL link you want to redirect after clicking the hyper text.

<a href="https://www.linkedin.com/in/aarpitdubey/">Arpit Dubey LinkedIn 
 Profile</a>

<a href="https://github.com/aarpitdubey">Arpit Dubey Github Profile</a>

Conclusion

We can see HTML is still widely used over the Web for Development and having more than 50% of websites which are build using HTML.

We learn many HTML elements and Now let's talk about Flutter

While Flutter web may be a good solution for web apps that are UI-heavy, it is not well suited for a blog or a website such as hashnode itself.

Tim Sneath (product manager for Flutter) says so himself:

So, HTML is still Considered as the The GodFather of WEB

The God Father of WEB: Secret Sauce behind Websites

Table of contents

HTML

An Overview:

Anatomy of an HTML element

Markup Language :

How to write first HTML file

Emmet :

Text

HTML Structure

Images

Headings

Paragraphs

Lists

Links

Conclusion

Subscribe to my newsletter

Arpit Dubey

Arpit Dubey