HTML Text Elements
This practical course explores HTML text elements and covers the difference between block and inline text elements. This course also covers how some text elements help with user accessibility.
- Learn about different HTML text elements
- Learn the difference between inline and block elements
- Learn about some of the accessibility aspects of certain text elements
This course is intended for anyone who wants to learn about HTML.
Anyone with an interest in learning HTML or who wants to improve their knowledge of HTML in general.
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.
Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.
Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.
Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.
Farish is an avid powerlifter, sushi lover, and occasional Funko collector.