[vc_row el_class=”blog-info”][vc_column][vc_single_image source=”featured_image” img_size=”full” style=”vc_box_rounded”][vc_empty_space height=”40px”][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text el_class=”font-weight-bold”]
4 funciones útiles de HTML5 que probablemente no conozca.
Funciones HTML5 extremadamente útiles con ejemplos.
[/vc_column_text][vc_empty_space height=”40px”][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]
HTML5
Introducción
No puedo imaginar la Web sin HTML. Esta gran herramienta todavía es utilizada por millones de desarrolladores en todo el mundo. Es lo primero que debe aprender si quiere convertirse en desarrollador web. Sin embargo, todavía veo que algunas personas subestiman el poder del HTML. Eso se debe a que no conocen otras funciones que tiene esta herramienta.
En este artículo, exploraremos algunas características útiles de HTML5 que probablemente no conozca. Empecemos de inmediato.
1. Datalista
La etiqueta <datalist> es una de las características sorprendentes que se introdujeron en HTML. Esta etiqueta <datalist> especifica una lista de opciones predefinidas y permite al usuario agregar más. Proporciona la función de autocomplete que le permite obtener las opciones deseadas con una escritura anticipada.
Aquí está el ejemplo de código:
<body>
<form action="" method="get">
<label for="fruit">Choose your fruit :</label>
<input list="fruits" name="fruit" id="fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Orange">
<option value="Banana">
<option value="Mango">
<option value="Avacado">
</datalist>
<input type="submit">
</form>
</body>
También puede consultar este [Codepen] que dejo aquí.
2. La etiqueta de detalles
La etiqueta <details> proporciona detalles bajo demanda para el usuario. Por lo tanto, esta etiqueta se puede usar cuando desee mostrar una tabla de contenido que tenga información a pedido. De forma predeterminada, el widget está cerrado. Cuando está abierto, se expande y muestra el contenido que contiene.
La etiqueta <summary> se usa con <details> para especificar un encabezado visible para ella.
Aquí está el ejemplo de código:
<body>
<details>
<summary>Click to get the user details</summary>
<table>
<tr>
<th>Name</th>
<th>Date of birth</th>
<th>Job</th>
</tr>
<tr>
<td>John</td>
<td>March 19</td>
<td>Accountant</td>
</tr>
</table>
</details>
</body>
Eche un vistazo a este [Codepen].
3. La etiqueta de salida
La etiqueta <output> representa el resultado de un cálculo. Normalmente, este elemento define una región que se utilizará para mostrar la salida de texto de algún cálculo.
Aquí está el ejemplo de código:
<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
<input type="number" id="a" value="0">
* <input type="number" id="b" value="0">
= <output name="x" for="a b"></output>
</form>
Aquí está el ejemplo de [Codepen] si desea verlo.
4. Contenido editable
El contenteditable es un atributo HTML que le permite editar sus elementos HTML. Al establecer este atributo en verdadero, podrá editar el contenido de un elemento.
Eche un vistazo al siguiente código:
<div>
<h1> Employees list </h1>
<ul class="content-editable" contenteditable="true">
<li> 1. Jhon </li>
<li> 2. Mehdi </li>
<li> 3. Brad </li>
</ul>
</div>
Y este es el [Codepen] que le corresponde.
Conclusión
Como puede ver, HTML es una gran herramienta para usar porque tiene muchas características útiles de las que podemos beneficiarnos como desarrolladores. No subestime el poder de HTML, ya que hay otras funciones más que puede ofrecer.
Gracias por leer este artículo, espero que te haya resultado útil.
[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_class=”social-info”][vc_column width=”1/6″][/vc_column][vc_column width=”2/3″][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text][social_share_button themes=’theme1′][/vc_column_text][/vc_column_inner][vc_column_inner el_class=”youtube-inner-col” width=”1/2″][vc_column_text][likebtn theme=”youtube” lang=”auto” show_like_label=”0″ white_label=”1″ alignment=”right”][/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner el_class=”social-info-inner”][vc_column_inner width=”1/4″][vc_single_image image=”921″][/vc_column_inner][vc_column_inner width=”3/4″][vc_column_text]
Diego Pacheco
Ingeniero en Sitemas, MBA (Babson College). Desarrollador PHP/Java/JavaScript. Fundador & CEO de EpicStudio. Entusiasta de las tecnologías web (JavaScript, Vue, Laravel, AWS, Docker) Viajes, Negocios, Surf y Growth.[/vc_column_text][asvc_list_item icon_fontawesome=”fa fa-calendar-o” icon_size=”14px”]Programar una reunión[/asvc_list_item][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]
Recent Post
[/vc_column_text][lvca_posts_carousel posts_query=”size:3|order_by:rand|post_type:post” image_linkable=”true” image_size=”full” taxonomy_chosen=”post_tag” display_title=”true” display_post_date=”true” display_summary=”true” autoplay_speed=”3000″ animation_speed=”300″ display_columns=”3″ scroll_columns=”3″ gutter=”3″ tablet_display_columns=”2″ tablet_scroll_columns=”2″ tablet_gutter=”3″ tablet_width=”800″ mobile_display_columns=”1″ mobile_scroll_columns=”1″ mobile_gutter=”3″ mobile_width=”480″][vc_empty_space height=”20px”][/vc_column][/vc_row]