Introduction to HTML text elements. In HTML, other elements can display and contain text such as the div element. But that is not their intended purpose. HTML has specific elements meant to contain and display texts. To demonstrate this, I will begin with H one, which is a blocked element, meaning that it will always start a new line. And H is short for heading, and this heading will have text content of, this is heading text. 

On the next line, I will type H six and this will have a text content of, this is the smallest heading text. So the implication here is that there are six different headings. One through six, H one is the largest while H six is the smallest. Sizing is just the structure of the heading. The importance comes from the hierarchy. H one implies that the system most important title while H six implies the least importance.

Now this is not a video on accessibility, but headings have an important role. For example, with the use of screen reading software, a common navigation technique is to jump from one heading to another heading quickly. And in order to prevent navigation issues, it's recommended that you do not skip the order of hierarchy. Meaning that if the initial heading starts with a H one, then the following heading should be H two as currently displayed on the screen, not skipping over directly to H three.

Next is the paragraph text element. A paragraph is a block of text that is separated by a blank line that comes before and after it. A paragraph is created by using the P tag, which I will type. And inside of this paragraph, I will give it the text content of, this is a paragraph.

Now besides size, you might've noticed another difference between the paragraph and the heading. The heading font is darker than the paragraph font. And that is because the default font weight for the heading is bold. So what if I wanted to make part of the paragraph text bold? Well, there is a bold element, but the HTML spec sheet states that this should only be used as the last resort.

Now, there are a couple of alternatives. One of them being strong, which I'm gonna demonstrate right now. Inside of the paragraph, I will wrap the word this, with the strong element. The strong element is an inline element, meaning it does not force any surrounding techs to drop down to a new line. On the screen it does make the word, this, darker, but the strong element has semantic meaning implying that the word or phrase inside of it has strong importance, causing screen readers to use a different voice or tone when reading a strong element, whereas a bold text might not be visible to the visually impaired.

Another text element that's similar to strong, is called the em element and spelled E-M. I will wrap the em element around the word paragraph. Em is short for emphasis, and on the screen the texts is now a tela size. Now there are texts elements that do absolutely nothing. For example span, I'm gonna wrap the span element around the words, is a. If span has no semantic meaning what's its purpose? It's usually used for targeting purposes. To apply a specific style within a small block of text. That may be in another container such as this paragraph, but demonstrating this is out of scope for this video.

One more thing I like to demonstrate, the effect of using the paragraph element. I'm gonna wrap the word paragraph with the paragraph element. What I'm demonstrating here is what I mentioned earlier, that regardless of the location of the text content, if I wrap texts with a paragraph element, it will always create a blank line before and after the text content. And that's it, thanks for watching at Cloud Academy.