Ticker

6/recent/ticker-posts

Header Ads Widget

Responsive Advertisement

Style And Semantic Tag In HTML

Amar Digital World May 17, 2021

 

Style And Semantic In HTML

 


For a better impression on a visitor, our site must be responsive and attractive. Means that our site looking is very important to us and our visitor. For this purpose, we use the many tags in HTML to design a responsive and looking good website.

 

Style <style> tag:

<style> tag is used to define a layout view of a web page in a web browser. In this tag, we define the CSS (Cascading Style Sheet) code for our HTML document and if we have an external style sheet then we can link our external style sheet to our web page using link <link> tag.

 

Div<div> tag:

The <div> tag defines a portion, division or a section of an HTML document for define particular coding on particular div. The <div> tag is useful to a web developer to define layout a web page together with CSS.

 

Semantic Tag:

A semantic tag means A tag with proper meaning. A Semantic tag describes its meaning to both the browser and the developer.

 

Examples of non-semantic tag:<div> and <span> - (These tags don't describe meaning about its content.)

Examples of semantic tag:<form>, <table>, and <article> - (These tags describe meaning about its content, Clearly.)

 

List of Semantic Tags:

Tag

Description

<article>

Defines an article

<aside>

Defines content aside from the page content

<details>

Defines additional details that the user can view or hide

<figcaption>

Defines a caption for a <figure> element

<figure>

Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

<footer>

Defines a footer for a document or section

<header>

Specifies a header for a document or section

<main>

Specifies the main content of a document

<mark>

Defines marked/highlighted text

<nav>

Defines navigation links

<section>

Defines a section in a document

<summary>

Defines a visible heading for a <details> element

<time>

Defines a date/time

 

Layout of Semantic Tags:


 Example:

<header> Welcome To My Anemone </header>

<nav>

<ul>

<li><a href="/home.html">Home</a></li>

<li><a href="/about.html">About</a></li>

<li><a href="/contact.html">Contact us</a></li>

</ul>

</nav>

<section>

<p>Top Stories</p>

<section>

<p>News</p>

<article>National News</article>

<article>International News</article>

<article>Sports News</article>

</section>

</section>

<aside>

<p>This is a sidebar. </p>

</aside>

<footer>&copy;www.myanemone.com</footer> 

 


Output: Layout of Semantic Tags

Welcome To My Anemone

Top Stories

News

National News

International News

Sports News

This is a sidebar.

©www.myanemone.com 

 


List of HTML Tag

 

 

Reference  -

www.w3.org,

www.wikipedia.org,

www.w3schools.com

 

 

Basic HTML Tag:

Tag

Description

<!DOCTYPE> 

Defines the document type. HTML Version 5

<html>

Defines an HTML document

<head>

Defines information about the document

<title>

Defines a title for the document

<body>

Defines the document's body

<h1> to <h6>

Defines HTML headings

<p>

Defines a paragraph

<br>

Inserts a single line break

<hr>

Defines a thematic change in the content

<!--...-->

Defines a comment

 

Formatting Tag:

Tag

Description

<acronym>

Not supported in HTML5. Use <abbr> instead.
Defines an acronym

<abbr>

Defines an abbreviation or an acronym

<address>

Defines contact information for the author/owner of a document/article

<b>

Defines bold text

<bdi>

Isolates a part of text that might be formatted in a different direction from other text outside it

<bdo>

Overrides the current text direction

<big>

Not supported in HTML5. Use CSS instead.
Defines big text

<blockquote>

Defines a section that is quoted from another source

<center>

Not supported in HTML5. Use CSS instead.
Defines centered text

<cite>

Defines the title of a work

<code>

Defines a piece of computer code

<del>

Defines text that has been deleted from a document

<dfn>

Represents the defining instance of a term

<em>

Defines emphasized text 

<font>

Not supported in HTML5. Use CSS instead.
Defines font, color, and size for text

<i>

Defines a part of text in an alternate voice or mood

<ins>

Defines a text that has been inserted into a document

<kbd>

Defines keyboard input

<mark>

Defines marked/highlighted text

<meter>

Defines a scalar measurement within a known range (a gauge)

<pre>

Defines preformatted text

<progress>

Represents the progress of a task

<q>

Defines a short quotation

<rp>

Defines what to show in browsers that do not support ruby annotations

<rt>

Defines an explanation/pronunciation of characters (for East Asian typography)

<ruby>

Defines a ruby annotation (for East Asian typography)

<s>

Defines text that is no longer correct

<samp>

Defines sample output from a computer program

<small>

Defines smaller text

<strike>

Not supported in HTML5. Use <del> or <s> instead.
Defines strikethrough text

<strong>

Defines important text

<sub>

Defines subscripted text

<sup>

Defines superscripted text

<template>

Defines a template

<time>

Defines a date/time

<tt>

Not supported in HTML5. Use CSS instead.
Defines teletype text

<u>

Defines text that should be stylistically different from normal text

<var>

Defines a variable

<wbr>

Defines a possible line-break

 

 

 

Forms and Input Tag:

Tag

Description

<form>

Defines an HTML form for user input

<input>

Defines an input control

<textarea>

Defines a multiline input control (text area)

<button>

Defines a clickable button

<select>

Defines a drop-down list

<optgroup>

Defines a group of related options in a drop-down list

<option>

Defines an option in a drop-down list

<label>

Defines a label for an <input> element

<fieldset>

Groups related elements in a form

<legend>

Defines a caption for a <fieldset> element

<datalist>

Specifies a list of pre-defined options for input controls

<output>

Defines the result of a calculation

 

Frames Tag:

Tag

Description

<frame>

Not supported in HTML5.
Defines a window (a frame) in a frameset

<frameset>

Not supported in HTML5.
Defines a set of frames

<noframes>

Not supported in HTML5.
Defines an alternate content for users that do not support frames

<iframe>

Defines an inline frame

 

Images Tag:

Tag

Description

<img>

Defines an image

<map>

Defines a client-side image-map

<area>

Defines an area inside an image-map

<canvas>

Used to draw graphics, on the fly, via scripting (usually JavaScript)

<figcaption>

Defines a caption for a <figure> element

<figure>

Specifies self-contained content

<picture>

Defines a container for multiple image resources

<svg>

Defines a container for SVG graphics

 

Audio / Video Tag:

Tag

Description

<audio>

Defines sound content

<source>

Defines multiple media resources for media elements (<video>, <audio> and <picture>)

<track>

Defines text tracks for media elements (<video> and <audio>)

<video>

Defines a video or movie

 

Links Tag:

Tag

Description

<a>

Defines a hyperlink

<link>

Defines the relationship between a document and an external resource (most used to link to style sheets)

<nav>

Defines navigation links

 

 

Lists Tag:

Tag

Description

<ul>

Defines an unordered list

<ol>

Defines an ordered list

<li>

Defines a list item

<dir>

Not supported in HTML5. Use <ul> instead.
Defines a directory list

<dl>

Defines a description list

<dt>

Defines a term/name in a description list

<dd>

Defines a description of a term/name in a description list

 

Tables Tag:

Tag

Description

<table>

Defines a table

<caption>

Defines a table caption

<th>

Defines a header cell in a table

<tr>

Defines a row in a table

<td>

Defines a cell in a table

<thead>

Groups the header content in a table

<tbody>

Groups the body content in a table

<tfoot>

Groups the footer content in a table

<col>

Specifies column properties for each column within a <colgroup> element

<colgroup>

Specifies a group of one or more columns in a table for formatting

 

Styles and Semantics Tag:

Tag

Description

<style>

Defines style information for a document

<div>

Defines a section in a document

<span>

Defines a section in a document

<header>

Defines a header for a document or section

<footer>

Defines a footer for a document or section

<main>

Specifies the main content of a document

<section>

Defines a section in a document

<article>

Defines an article

<aside>

Defines content aside from the page content

<details>

Defines additional details that the user can view or hide

<dialog>

Defines a dialog box or window

<summary>

Defines a visible heading for a <details> element

<data>

Links the given content with a machine-readable translation

 

Meta Info Tag:

Tag

Description

<head>

Defines information about the document

<meta>

Defines metadata about an HTML document

<base>

Specifies the base URL/target for all relative URLs in a document

<basefont>

Not supported in HTML5. Use CSS instead.
Specifies a default color, size, and font for all text in a document

 

Programming Tag:

Tag

Description

<script>

Defines a client-side script

<noscript>

Defines an alternate content for users that do not support client-side scripts

<applet>

Not supported in HTML5. Use <embed> or <object> instead.
Defines an embedded applet

<embed>

Defines a container for an external (non-HTML) application

<object>

Defines an embedded object

<param>

Defines a parameter for an object

 


Reference  - (Whole HTML Content)

www.w3.org,

www.wikipedia.org,

www.w3schools.com






आशा करते है कि हमारे द्वारा लिखी हुई इस Post को आप Like, Share and Comment करेंगे | और हमें Comment करके बताये की आपको ये Post कैसी लगी | इसी तरह की Post और News पाने के लिए हमारे सभी Social Media Channels को रेगुलर Follow करे| 


Thanks
Amar Digital World
(Always Ready To Digital Serve)

Tags:

Post a Comment

0 Comments