DEV Community: Sanket

HTML5 Tags and Global Attributes

Sanket — Tue, 20 Jul 2021 05:34:46 +0000

Overview

In this blog, I will be covering HTML5 tags and attributes which are most commonly used.

HTML5 Tags

Article Tag: <article> </article>

It is used to describe an article on the webpage, like a Blog post or a News story.

Aside Tag: <aside> </aside>

It is used to place some content aside from the main content, mostly used to place content in the sidebar of the webpage.

Details Tag: <details> </details>

It is used to add additional details/content which the user can view(open) or hide(close) on demand.

Dialog Tag: <dialog> </dialog>

It is used to create a dialog box on a webpage.

Figure Tag: <figure> </figure>

It is used to add figures like illustrations, diagrams and photos to a webpage.

FigureCaption Tag: <figcaption> </figcaption>

It is used to add captions to the figures.

Footer Tag: <footer> </footer>

It is used to define the footer of the webpage.

Header Tag: <header> </header>

It is used to define the header of the webpage. You can define multiple <header> elements in a webpage but it should not be placed inside a <footer>, <address> or any other <header> element.

Main Tag: <main> </main>

It is used to specify the main content of a webpage and you can only define one <main> element in a document.

Meter Tag: <meter> </meter>

It is used to measure data within a known range or a fractional value.

Nav Tag: <nav> </nav>

It is used to define a set of navigation links in a webpage.

Progress Tag: <progress> </progress>

It is used to represent the progress of a task.

Section Tag: <section> </section>

It is used to define a section on the webpage.

Summary Tag: <summary> </summary>

It is used to define a heading for the <details> element.

Time Tag: <time> </time>

It is used to define a specific time.

Word Break Tag: <wbr>

It is used to add a line break when a particular text or word is too long.

Below are examples for a better understanding of the above-defined tags. You can navigate to the HTML tab to see the code snippet.

HTML Global Attributes

The HTML global attributes are attributes that can be used in all HTML elements.

Access Key: <element accesskey="character">

It is used to specify a shortcut key to activate or focus an element. The attribute value should be a single character.

Class : <element class="classname">

It is used to specify one or more class names for an element. It is mostly used to point a class in a stylesheet.

Content Editable : <element contenteditable="true|false">

It is used to specify whether the content of an element is editable or not. If the attribute value is "true" then it specifies that the content is editable. If it is "false" then it specifies that content is not editable.

Dir : <element dir="ltr|rtl|auto">

It is used to specify the direction of the text in an element. If the attribute value is "ltr" then it specifies that the direction of text is left-to-right. If it is "rtl" then the direction of text is right-to-left and if it is "auto" then the browser will figure out the text direction.

Draggable : <element draggable="true|false|auto">

It is used to specify whether an element is draggable or not. If the attribute value is "true" then it specifies that the element is draggable. If it is "false" then the element is not draggable and if it is "auto" then it is based on the default behaviour of the browser.

Hidden : <element hidden>

It is used to specify that an element is no longer relevant. The browsers will not display elements that have a hidden attribute.

Id : <element id="unique_id">

It is used to specify a unique id for an element. It is mostly used to point to a style in a stylesheet.

Lang : <element lang="language_code">

It is used to specify the language of the element's content.

SpellCheck : <element spellcheck="true|false">

It is used to specify whether the element is to have its spelling and grammar checked or not. If the attribute value is "true" then that element is to have its spelling and grammar checked. If it is "false" then it is not to be checked.

Style : <element style="style_definitions">

It is used to specify an inline CSS style for an element and will override any style set in the <style> tag or in an external style sheet.

Tab Index : <element tabindex="number">

It is used to specify the tabbing order of an element when the "tab" button is used for navigation.

Title : <element title="text">

It is used to specify extra information about an element. The extra information will be displayed when the mouse hovers over the element.

Below are examples for a better understanding of the above-defined attributes. You can navigate to the HTML tab to see the code snippet.

I hope this article gave you some basic knowledge about HTML5 Tags, global attributes and how they work. Feel free to put up any queries that you may have.

In my upcoming blogs, I will be covering more about HTML forms tags and some simple projects.

Also, feel free to put suggestions in the comments section and give a reaction if you enjoyed reading. Connect with me on LinkedIn | Twitter .

Introduction To HTML - 01

Sanket — Fri, 02 Jul 2021 10:31:30 +0000

What is HTML ?

Whenever you are planning to build anything from scratch the first thing you will do is to well -structure it right? HTML does it when you are getting started to build web pages/websites. HTML is the markup that contains all the actual stuff that a web page has. All the text on this page you’re reading right now is inside HTML tags that tell the browser how to order the content on the page.

What is a HTML tag ?

The HTML tag is the combination of <> and tag-name.

// HTML tag :
    <tagname>   

// Opening tag :
    <tagname>

// Closing tag : 
    </tagname>

There are two types of HTML tags :

Opening tags
Closing tags

The only difference between opening and closing tags is the forward slash after the opening bracket of a closing tag.

What are HTML Elements ?

A HTML element is the combination of the opening tag, some content and the closing tag.

    // HTML Element :

    <tagname> some content .. </tagname>

There are some elements that have no content and no closing tag. These elements are called Empty Elements.

//Example 
<br>

The basic structure of HTML

<!DOCTYPE html>             
<html>
    <head>
        <title>Page's Title</title>
        <link ..... >
        <script>......</script>
    </head>
    <body>
        .
        .
        .
        .
    </body>
</html>

The <!DOCTYPE html> tag defines that this document is an HTML5 document.
The <html> element is the root element of an HTML page.
The <head> element contains meta information about the HTML page.
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <link> element is an empty element, it contains only attributes. It defines the relationship between the current document and an external resource. It is used to link to external style sheets.
The <script> element either contains scripting statements or points to an external script file through the src attribute.
The <body> element defines the document's body. It is a container that contains all the required tags and information that need to be displayed on the web page.

What are Inline and Block Elements ?

Every HTML element has a default display value. There are two types:

Block
Inline

Block Elements:

A block element always starts on a new line. It always takes up the full width available (i.e.) it stretches out to the left and right as far as it can.

Example: div, nav, heading tags etc.

Inline Elements:

An inline element does not start on a new line. It always takes as much as width it requires.

Example: button, span, input etc.

Different types of HTML Tags :

1) For maintaining the document structure :

Heading Tags : <h1> to <h6>

There are 6 different heading tags.h1 tag has the largest font size whereas the h6 tag has the smallest.
Line Break Tag: <br>

It is used to insert a single line break (ie) it moves to the next line. It is an empty tag which means that it has no end tag.
Division Tag : <div> </div>

It defines a division or a section in an HTML document and any sort of content can be placed inside this tag.
Paragraph Tag : <p> </p>

It defines a paragraph. Plain text can be placed inside this tag.
Span Tag:<span> </span>

It is an inline container used to add inline styles without changing the structure of the document.
Horizontal Ruler Tag: <hr>

This tag is most often displayed as a horizontal rule that is used to separate content in a webpage.

Below are examples for a better understanding of the above-defined tags. You can navigate to the HTML tab to see the code snippet.

2) For formatting the text :

Bold Element: <b> </b>

It makes the text in bold.
Emphasis Element: <em> </em>

It is used to emphasize the text and the content inside it is displayed in italic.
Code Snippet Element: <code> </code>

The code element is used to write code snippets. The content inside is displayed in the browser's default monospace font.
Abbreviation Element: <abbr> <abbr>

The abbr element is used to define an abbreviation or an acronym.
Italics Element: <i> </i>

The content inside this element is displayed in italic.
Strong Element: <strong> </strong>

It is used to define text with strong importance and the content inside is displayed in bold.
Mark Element : <mark> </mark>

The mark element is used to mark or highlight the text.
Subscript Element: <sub> </sub>

It is used to define subscript text and the content inside it appears half a character below the normal line. It can also be used for writing formulas.
Superscript Element: <sup> </sup>

It is used to define superscript text and the content inside it appears half a character above the normal line. It can also be used for writing footnotes.

Below are examples for a better understanding of the above-defined tags. You can navigate to the HTML tab to see the code snippet.

3) For creating a list :

Unordered List : <ul> </ul>

It is used to list the items in the unordered form (i.e.) the list items will be marked with bullets.It starts with the <ul> tag and each list item inside this tag starts and ends with the<li> tag.
Ordered List : <ol> </ol>

It is used to list the items in the ordered form (i.e.) the list items will be marked with numbers.It starts with the <ol> tag and each list item inside this tag starts and ends with the <li> tag.
List Item : <li> </li>

It defines a list item. It is used inside ordered and unordered lists.
Description List : <dl> </dl>

It is used to list the items along with their description. Description list uses <dt> tag to define an item (also known as term) and <dd> tag to define each term.
<dt> </dt> Element :

It is used to define a term in a description list.
<dd> </dd> Element:

It is used to describe a term in a description list.

Below are examples for a better understanding of the above-defined tags. You can navigate to the HTML tab to see the code snippet.

4) For creating a Table :

Table : <table> </table>

It is used to define a table in HTML.
Column Heading : <th> </th>

This tag contains the heading information of a column. The content in the <th> element is bold and centred.
Table Row : <tr> </tr>

It is used to define a row in a table.
Table Data : <td> </td>

It is used to write the data for a particular cell.
Caption Tag : <caption> </caption>

It is used to define a caption for a table.
Column Group : <colgroup> </colgroup>

It is used to group one or more columns in a table for formatting.
Column : <col>

It specifies column properties for each column in a table.
Table Head : <thead> </thead>

It is used to group header content in a table.
Table Body : <tbody> </tbody>

It is used to group the body content in a table.
Table Footer : <tfoot> </tfoot>

It is used to group footer content in a table.

Below are examples for a better understanding of the above-defined tags. You can navigate to the HTML tab to see the code snippet.

I hope this article gave you some basic knowledge about what HTML is, basic HTML Tags and how they work. Feel free to put up any queries that you may have.

In my upcoming blogs, I will be covering more about HTML5 tags, attributes and some simple projects.

Also, feel free to put suggestions in the comments section and give a reaction if you enjoyed reading. Connect with me on LinkedIn | Twitter .

Getting Started with Web Development!

Sanket — Mon, 21 Jun 2021 11:27:07 +0000

Nowadays, it is very easy to find online resources when you are getting started with learning something new. You just have to google the skill you want to learn, and you will find plenty of resources online like blogs, online courses, YouTube videos, etc.

If you are someone who is new to the Web development world or someone who is currently learning but facing difficulties then this blog is for you!

Let me tell you what web development is?

In today's world there are "n" number of websites and web applications present. Currently, what you are seeing or looking at is also a part of web development. Basically it refers to an application that is live on the Web.

From where your journey starts?

To master web development you need to know the basics of it.

Generally, web development is divided into two parts:

1] Front-end development:

Front-end development mainly focuses on what the users see on their end. It is a part of the website that users directly interact with. It is also known as "client-side development", what you are currently looking at is also a part of front-end development.

Technologies used in developing Front-end are:

- HTML (Hyper Text Markup Language)
- CSS (Cascading Style Sheets)
- JavaScript

Let me explain with the help of an example:

Suppose you are planning to build a house for yourself, so the first step you will do is to build the structure of your house using bricks (HTML is used to define the structure of the document ). After the structure is ready to make your house beautiful and colourful you need to paint your house (CSS is used to style the websites to make it look better). The last thing you will do is to add the electricity connection to your house so that it functions properly (JavaScript is a high-level programming language that is used to define logic and provide the functionality to websites).

2] Back-end Development:

Back-end development mainly focuses on how a website or web application should work. Everything happens behind the scenes. It is the part of the website that the user cannot see and interact with. Back-end development requires a comprehensive set of programming skills to ensure that the data or service requested by the end-users works perfectly fine without any glitch.

Programming Languages used in back-end development are:

- JavaScript
- Python
- Ruby
- PHP
- Java

Following are some suggestion when you learn:

1.If you are learning from any online videos or resources try to understand the concept and code by yourself. Do not try to use ctrl+c and ctrl+v.

2.When you are learning, try to document it in your own words. It will be very useful when you go for your interviews.

3.Try to experiment with different approaches to achieve the best technique of working. It helps a lot in understanding the concept in an easy way.

The above three points will also help you ace your interviews if you are planning for a job in web development.

I hope this gave you some insight on web development . Feel free to put up any queries if you have.

In my upcoming blogs I will be covering more about HTML5, CSS and JavaScript and along with that, I will also be covering the best resources, documentation and different experiments that I have done.

Also, feel free to put suggestions in the comments section and give a reaction if you enjoyed reading. Connect with me on Twitter.