bestbuildpc: Forums
 

 Forum FAQForum FAQ   SearchSearch   UsergroupsUsergroups   ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

Deprecated HTML tags and alternatives
 
 
Post new topic   Reply to topic    bestbuildpc Forum Index -> Web Development
View previous topic :: View next topic  
Author Message
bestbuildpc
Site Admin
Site Admin


Joined: Jun 30, 2012
Posts: 213
Location: NL

PostPosted: Thu Nov 27, 2014 11:26    Post subject: Deprecated HTML tags and alternatives Reply with quote

-----------------------------------------All deprecated HTML TAGS will be post here with alternatives.--------------------------------------------

OLD

Code:
<div align="center"> ... </div>

<h1>Header</h1>
<table> ... </table>
</div>


New

Code:
<div style="text-align:center;">

<h1>Header</h1>
<table style="margin-right: auto; margin-left: auto;">
<tr><td>r1</td></tr>
<tr><td>r2</td></tr>
</table>
</div>


------------------------------------------------------------->
<center> tag : This tag was used in older version of HTML to align the text and content at the center. This tag was deprecated in 'HTML 5'. You should use CSS text-align Property instead.

Usage :

Code:
1. In-Line usage : <div style="text-align:center">Content goes here....</div>

2. CSS Code : #your-div {text-align:center}
HTML Code : <div id="text-align">Content goes here....</div>


Values you can use :
'left' - Used for left alignment.
'right' - Used for right alignment.
'center' - Used for center alignment.
'justify' - Stretches the lines to make them of equal width ( increase or decrease internal space )
'inherit' - This is will use text align property of parent division

Sample usage :

1. Example usage for Blogger/WordPress users (who don't have access to style-sheet ) :
center :

Code:
<div style="text-align:center">Content... </div>


This will result into this :

left :

Code:
<div style="text-align:left">Content... </div>


This will result into this :

right:

Code:
<div style="text-align:right">Content... </div>


This will result into this :

justify:

Code:
<div style="text-align:justify">Content... </div>


This will result into this :

inherit:

Code:
<div style="text-align:center"><!-- parent division -->

<div style="text-align:inherit">
Text-align:inherit
[ Division Content... ]
</div>
</div><!-- end of parent division -->


This will result into this :

2. If you have access to style-sheet then you can use this instead.But you have to assign unique division ID,see examples below:

Code:
#your-div-center {text-align:center}

#your-div-left {text-align:left}
#your-div-right {text-align:right}
#your-div-justify {text-align:justify}
#your-div-inherit {text-align:inherit}


NOTE : The <center> element was deprecated because it defines the presentation of its contents -- it doesn't describe its contents.

What I do is take common tasks like centering or floating and make CSS classes out of them. When I do that I can use them throughout any of the pages. I can also call as many as I want on the same element.

Code:
.text_center {text-align: center;}

.center {margin: auto 0px;}
.float_left {float: left;}


Now I can use them in my HTML code to perform simple tasks.

Code:
<p class="text_center">Some Text</p>


If you want inline elements use this method

Code:
<div style="text-align: center;">

    I'm centered.
</div>


or

Code:
<div style="margin:0 auto">

<!--contents goes here-->
</div>


Another way will be CSS

Code:
.centerclass{

    margin:0 auto;
 }

 html
 <div class="centerclass">
       <!--Contents goes here-->
 </div>


How do I horizontally center a div in a div with CSS

Code:
<div id="outside" style="width:100%">  

    <div id="inside">Foo foo</div>
</div>


1581 down vote accepted


You can apply this CSS to the inside div:

Code:
#inside {

    width: 50%;
    margin: 0 auto;
}


Of course, you don't have to set the width to 50%. Any width less than the containing div will work. The margin: 0 auto is what does the actual centering.

If you are targeting IE8+, it might be better to have this instead:
Code:


#inside {
    display: table;
    margin: 0 auto;
}
  
Back to top
View user's profile Send private message Visit poster's website
Display posts from previous:       
Post new topic   Reply to topic    bestbuildpc Forum Index -> Web Development All times are GMT + 2 Hours
 
 Page 1 of 1

 

Jump to:   
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum

Powered by phpBB © 2001-2008 phpBB Group
 
Forums ©