HTML text fundamentals - Learn web development | MDN

Tags

Top Highlights

• Preferably, you should use a single <h1> per page—this is the top level heading, and all others sit below this in the hierarchy.

• Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a <span> element and some CSS, or perhaps a <b> element (see below).

• Here's the best rule you can remember: It's only appropriate to use <b>, <i>, or <u> to convey a meaning traditionally conveyed with bold, italics, or underline when there isn't a more suitable element; and there usually is. Consider whether <strong>, <em>, <mark>, or <span> might be more appropriate.

• Note: People strongly associate underlining with hyperlinks. Therefore, on the web, it's best to only underline links

• Make sure you use the headings in the correct order in the hierarchy. Don't use <h3> elements to represent subheadings, followed by <h2> elements to represent sub-subheadings—that doesn't make sense and will lead to weird results.

• Of the six heading levels available, you should aim to use no more than three per page, unless you feel it is necessary. Documents with many levels (for example, a deep heading hierarchy) become unwieldy and difficult to navigate. On such occasions, it is advisable to spread the content over multiple pages if possible.

• Active learning: Marking up

• presentational elements and should no longer be used because, as we've seen before, semantics is so important to accessibility, SEO, etc

• Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a <span> element and some CSS, or perhaps an <i> element (see below).

• We've applied some CSS to it to make it look like a top level heading, but since it has no semantic value, it will not get any of the extra benefits described above.

• although you could style it to look like anything you wanted using CSS

• give text structure so that a browser can display an HTML document the way its developer intends.

• This is because there are no elements to give the content structure, so the browser does not know what is a heading and what is a paragraph.

• Search engines indexing your page consider the contents of headings as important keywords for influencing the page's search rankings.

• Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a <span> element and some CSS, or perhaps an <i> element (see below)

• Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a <span> element and some CSS, or perhaps a <b> element (see below)

• Elements like this, which only affect presentation and not semantics

• The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.

• The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet

• Use the <u> element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the web.