Apuntes de HTML y HTML5 Básico (FreeCodeCamp/Diseño Web Responsivo)
Published: 2021-09-23 14:18:41

[freeCodeCamp.org/responsive-web-design/#basic-html-and-html5](https://www.freecodecamp.org/espanol/learn/responsive-web-design/#basic-html-and-html5)

## Etiquetas Básicas

### Di hola a los elementos HTML

```jsx
<h1>Hello</h1>
```

### Título con el elemento h2

```html
<h2>CatPhotoApp</h2>
```

### Informa con el elemento párrafo

```html
<p>I'm a p tag!</p>
```

### Rellena el espacio en blanco con texto provisional

```html
Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your
```

### Descomenta código HTML

```html
<!-- some_coment -->
```

### Comenta HTML

```html
<!-- some_coment -->
```

### Elimina elementos HTML

### Introducción a los elementos HTML5

```html
<main>
	<h1>Hello World</h1>
	<p>Hello Paragraph</p>
</main>
```

`main`, `header`, `footer`, `nav`, `video`, `article`, `section`

### Agrega imágenes a tu sitio web

```html
<img src="..">
```

### Enlaza hacia páginas externas con los elementos anchor

```html
<a href=" ... ">link</a>
<a href=" ... " target="_blank">link</a>
```

### Enlaza hacia secciones internas de una página con los elementos anchor

```html
<a href="#..id">link</a>
```

### Anida un elemento anchor dentro de un párrafo

```html
<p>...<a href=" ... ">link</a> ...</p>
```

### Crea enlaces muertos utilizando el símbolo hash

```html
<a href="#"></a>
```

### Convierte una imagen en un enlace

```html
<a href="..."><img src=".."></a>
```

### Crea una lista no ordenada

```html
<ul>
	<li>Garfield</li>
	<li>Sylvester</li>
</ul>
```

### Crea una lista ordenada

```html
<ol>
	<li>Garfield</li>
	<li>Sylvester</li>
</ol>
```

### Declara el Doctype de un documento HTML

```html
<!DOCTYPE html>
<html>

</html>
```

### Define el encabezado y el cuerpo de un Documento HTML

```html
<!DOCTYPE html>
<html>
	<head>
		<meta />
	</head>
	<body>
		<div>
		</div>
	</body>
</html>
```

### Anida muchos elementos dentro de un solo elemento div

```html
<div>
	<p>Things cats love:</p>
	<ul>
		<li>cat nip</li>
		<li>laser pointers</li>
		<li>lasagna</li>
	</ul>
</div>
```

## Formularios

### Crea un campo de texto

```html
<input type="text">
```

### Agrega texto provisional a un campo de texto

```html
<input type="text" placeholder="some_placeholder">
```

### Crea un elemento de formulario

```html
<form action="/some_url">
	<input type="text">
</form>
```

### Agrega un botón de envío a un formulario

```html
<button type="submit">some_buton_text</button>
```

### Usa HTML5 para requerir un campo

```html
<input type="text" required>
```

### Crea un conjunto de botones de radio

```html
<label for="input_id_1">	
	<input id="input_id_1" type="radio" name="input_name">some_text_1
</label>
<label for="input_id_2">	
	<input id="input_id_2" type="radio" name="input_name">some_text_2
</label>
```

### Crea un conjunto de casillas de verificación

```html
<label for="input_id_1">	
	<input id="input_id_1" type="checkbox" name="input_name">some_text_1
</label>
<label for="input_id_2">	  
	<input id="input_id_2" type="checkbox" name="input_name">some_text_2
</label>
```

Equivale a

```html
<label for="input_id_1"></label>
<input id="input_id_1" type="checkbox" name="input_name">some_text_1
<label for="input_id_2"></label>
<input id="input_id_2" type="checkbox" name="input_name">some_text_2
```

### Usa el atributo value con botones de radio y casillas de verificación

```html
<label for="input_id_1"></label>
<input id="input_id_1" type="checkbox" name="input_name" value="value_1">some_text_1
<label for="input_id_2"></label>
<input id="input_id_2" type="checkbox" name="input_name" value="value_2">some_text_2
```

### Marca botones de radio y casillas de verificación por defecto

```html
<label for="input_id_1"></label>
<input id="input_id_1" type="radio" name="input_name" value="value_1" checked>some_text_1
<label for="input_id_2"></label>
<input id="input_id_2" type="radio" name="input_name" value="value_2">some_text_2
```