Lesson 2 Home
Some other HTML elements that are useful
You've seen how a website comes together with tags that describe the page's structure. The head and body tags provide a framework for you to add information in a logical fashion, and the p tag identifies a paragraph of text in the website. Let's look at some other elements that describe text in the page.
- Headings
- h1 - HTML had six different kinds of headings to structure text on a page. h1 is for top level items, like the title of a page. You only want to use this once per page. h1 example
- h2 h3 h4 h5 h6 - each of these headings describes a different level of content. You can use these as much and as often as you like, but they should follow in order, that is, h3 will come under h2, and h2 will come under h1. your screen reader identifies each level as living under the one above it, so it's important to keep these structured. Browsers display the contents of headings at different sizes. The contents of an h1 element is the largest, and the contents of an h6 element is the smallest. The exact size at which each browser shows the headings can vary slightly. Users can also adjust the size of text in their browser. When we learn CSS, you will be able to control the size of text, its color, and the fonts used when we come to look at CSS.
h2 through h6 example
- Lists
- ol - this element identifies that an ordered list is going to follow. This type of list will automatically add an ascending number to each element in the list. Ordered lists might be a set of steps for a recipe that must be performed in order, or a legal contract where each point needs to be identified by a section number.
- ul - this element identifies that an unordered list is going to follow. A list is made up of any number of items and begin with a bullet point
(rather than characters that indicate order).
- li - this identifies a list item, or one element of a list. li elements are nested/sandwiched between ol or ul opening and closing tags.
- strong - This identifies a selection of text that has a strong importance
- em - this identifies a section of text that should be emphasized
- br / - this creates a line break in your text. Wherever you add it, a new line will start. No need to close it.
- comments - You can leave notes for yourself in HTML that the browser will ignore, and won't be rendered on the page. example with comments
Attributes and Links