New html5 tips and techniques

New html5 tips and techniques for the latest evolution of the standard that defines HTML is HTML5.

It represents two different concepts: Latest version of the language HTML, with new elements, attributes, and behaviors.

HTML tips & Techniques:

New Doctype

Still using XHTML doctype? Its time to remove.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Switch to the new HTML5 doctype.

<!DOCTYPE html>

Not to Quote

Not necessary to wrap your attributes in quotation marks if you don’t want to. You don’t have to close your elements also.

<p class=myClass id=someId>

Header and Footer

Old ways:

<div id="header">
 ...
</div>

<div id="footer">
 ...
</div>

New ways:

<header>
 ...
</header>

<footer>
 ...
</footer>

Placeholders

Initially set the value attribute, but, when user deletes that text and clicks away, the input is left blank again.

<input name="email" type="email" placeholder="yourname@example.com" />

Email Inputs

If we use a type of “email” to form inputs, we can tell the browser to only allow strings that conform to a valid email address format.

<input id="email" name="email" type="email" />

The Figure Element

Previous mark-up for an image

<img src="images/image.jpg" />
<p>Image sample. </p>

Now combine <figure> with <figcaption> element.

<figure>
 <img src="images/image.jpg" />
 <figcaption>
 <p>Image sample. </p>
 </figcaption>
</figure>

<small> Redefined

According to the new HTML5 the <small> is the correct wrapper for information.

No More Types for Scripts and Links

Old way:

<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>

New way:

<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>

Your content can be editable

As the name implies, it allows to edit any of the text within the element, including its children.

<div >



Autofocus Attribute



By autofocus attribute particular input should be "selected," or focused, by default.
 <input type="text" name="name" placeholder="Your name here" required autofocus>
 Required Attribute
 Required attribute specifies whether a particular input is required or not.
 <input type="text" name="name" required>
<input type="text" name="name" required="required">
 Audio Support
 HTML5 now offers the <audio> element.
 <audio autoplay="autoplay" controls="controls">
    <source src="audiofile.ogg" />
    <source src="audiofile.mp3" /> 
</audio>
 Video Support
 HTML5 now offers the <video> element. HTML5 doesn't specify a specific codec for video, it's up to the browsers to decide.
 <video controls preload>
<source src="videofile.ogv" type="video/ogg; codecs='vorbis, theora'" />
<source src="videofile.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.23'" />
</video>
 Regular Expressions
 A quickie regular expression validates the user input.
 <input type="text" name="name" id="name" pattern="[A-Za-z]{4,10}" autofocus required>
 The Data Attribute
 <div id="myDiv" data-myvalue="My Value"> This value </div>
 Create Sliders with the Range Input
 It introduces the new range type of input.
 <input type="range" name="range" min="0" max="5" value="">
 Mark Element
 The <mark> element as a highlighter.
 <p> Html5 tips: Html5 uses, <mark>"mark tag"</mark> as a highlighter. </p>
 
Namaste UI (Author)
Namaste UI collaborates closely with clients to develop tailored guest posting strategies that align with their unique goals and target audiences. Their commitment to delivering high-quality, niche-specific content ensures that each guest post not only meets but exceeds the expectations of both clients and the hosting platforms. Connect with us on social media for the latest updates on guest posting trends, outreach strategies, and digital marketing tips. For any types of guest posting services, contact us on info[at]namasteui.com.