1.a - HTML Tags
As we saw in the previous post, the basic structure of a web page is made up of tags. These tags are in turn enclosed within other tags, and as we remember, we have two main ones: <body> and <head>.
Remember that whenever we include an opening tag, we must also indicate a closing one.
1.b - HTML Attributes
We can add attributes to each tag. These attributes can be custom-made using data- attributes, which we will use later when we cover JavaScript, or use the default ones understood by the browser.
For example, in all tags we can include the class attribute, which refers to the CSS styles we include on the page.
Besides class, different tags have special attributes of their own that we will see later when we cover those particular tags.
2.a - The head Tag
The head element in HTML is a container for HTML elements that are not visible to the user as they are not rendered by the browser. These can be metadata, which includes information about the page or extra resources such as CSS style sheets or JavaScript files.
The <title> element is the only one that must always be inside the <head> tag, and it is what shows the name of the website on the browser tab.
The elements we can include inside the <head> tag are the following:
- Base: Lets you specify a base URL for the current page (nobody really uses this in real life)
- Meta: Includes metadata, based on its attributes depending on what info it contains. Some examples are:
- Author: indicates the author.
- Keywords: keywords.
- Description: page description.
- Etc.
- Script: contains JavaScript code.
- We have two options: either include JavaScript code inside the
<script> </script>tags or import the file.
- We have two options: either include JavaScript code inside the
- Style: contains CSS files or CSS code, although like JS we can also include it in an external file.
- Title: contains the page title, which the browser and search engine uses to know what the page is about.
Here we can see an example of what the <head> tag might look like for a web page with several <meta> tags.
<head>
<title>Titulo de la página web</title>
<meta charset="UTF-8">
<meta name="description" content="Video etiquetas y atributos en HTML ">
<meta name="keywords" content="HTML, CSS, curso">
<meta name="author" content="NetMentor">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table, th, td {
border: 1px solid red;
}
.remarcada{
color: cyan;
font-weight: bold;
}
</style>
<script>
alert("Esto es una alerta");
</script>
</head>2.b - The body Tag
This is the tag that contains the content of the HTML document, that is, what the user will see.
We need to properly structure the content inside other tags.
There are many tags we can use. Of course, we can't see them all in one video, as the video would last two days! But we'll cover the main, most commonly used ones in this video, and later we’ll go deeper into specific ones like tables or tags used in forms.
3 - Block Tags
As we saw in the previous video, web pages are structured by blocks, and in HTML4 we only had the <div> block which groups a set of tags. Since HTML5, we have different tags to define sections in a document, as shown in the image:
Previously in HTML4, there was only div, so it's important to remember that nowadays most of the time we’ll just use the div. Especially if we’re working in a business environment, it’s not worth debating whether to use a div, an article, a section, or what type of tag to use.
We should also remember that these section or block tags are completely transparent to the user. There are some tags, like the <a> tag for links, that by default change their style to show the user that there is a link.
As we can see in the image, the tags we use in HTML5 for blocks are the following:
- div
- main
- section
- article
- footer
- nav
To try an example, we can use the following code and change the tags, you’ll see we always get the same result. However, if we use the <blockquote> tag for referencing another source, by default this will look different in the browser.
<section>
ejemplo sección
</section>
<br/>
<div>
ejemplo div
</div>
<br/>
<article>
ejemplo artículo
</article>
<blockquote>
ejmplo quote
</blockquote>As a fun fact, the user NoelGalga from Reddit made a statistic about the most used elements in the top 500 web pages at https://moz.com/top500 and here are the results:
As we can see, the use of div is much greater than that of section, article, main, nav, and footer combined.
Of course, just because the result is transparent for the user, it doesn’t mean we should use them carelessly, nav is for the navigation bar and footer is for the page footer. It’s up to us to use common sense when coding.
3.1 - span Tag
Besides the previously mentioned blocks that are for containing tags, there is another tag we use to highlight a word or phrase inside a sentence, or even for an entire sentence.
esto es una <span class="remarcada">palabra</span> remarcada As you can see, the class attribute that changes the style would only apply to the word “palabra” because it's the only part between the opening and closing <span> tags.
3.2 - Content Structure Tags
When we want to write content, we do it in a structured way, just like we do in Word or any text editor, using paragraphs, line breaks, etc.
HTML also provides different tags for this purpose, such as the following:
- <p>: defines a paragraph
- <br>: defines a line break
- <hr>: defines a horizontal line.
<p>
ejemplo párrafo
</p>
<br/>
<hr/>4 - Title Tags
Just like when we create a document in Word, when we create a web page we want our content blocks to be defined by titles. For this we use title tags, which are written as <h1>title</h1> up to <h6>title<h6>
Where h1 defines the most important title and h6 the least important. For SEO it's recommended to have only one h1 tag since search engines use it to know what the page is about.
From h2 onwards, you can include as many as you like.
<h1>Titulo 1</h1>
<h2>Titulo 2</h2>
<h3>Titulo 3</h3>
<h4>Titulo 4</h4>
<h5>Titulo 5</h5>
<h6>Titulo 6</h6>5 - Text Tags
Similarly to previous sections, when creating a document, we often need to highlight information using bold, italics, etc. To do this, HTML provides a wide range of tags related to text formatting:
- <b>: Makes text bold
- <i>: Makes text italic
- <u>: Underlines text
- <sup>: Superscript text
- <sub>: Subscript text
- <pre>: Preformatted text (which means you can include line breaks or extra spaces inside the text)
- <em>: Emphasizes the text
- <strong>: Indicates the text is important
- <small>: Makes the text smaller
Este <b>texto está</b> en negrita.<br/>
Este <i>texto está</i> en cursiva.<br/>
Este <u>texto está</u> subrayado.<br>
Este <sup>texto está</sup> en superíndice.<br>
Este <sub>texto está</sub> suscrito.<br>
Este <pre>texto
está </pre> preformateado.<br>
Este <em>texto está</em> enfatizado.<br>
Este <strong>texto está</strong> definido como importante.<br>
Este <small>texto está</small> reducido.<br>By combining all these tags and many others, we can make rich text just like we’d do in any text editor.
And that’s it for this post, in which we took a closer look at some of the HTML tags, mainly those used for blocks.
If there is any problem you can add a comment bellow or contact me in the website's contact form
