Text
In this section you will learn a lot about text, and how to best mark it up. In order to create a orderly document, you should use the elements correctly.
Headings
A heading should briefly describe the section it introduces, and are written between the the opening and closing tags `<h*></h*>` (the * is a number between 1 and 6). The tags thus are:
These tags are ordered in a hierarchy. <h1> is the most important, and <h6> the least. You should use <h1> on the most important heading on your page, e.g. the main title or page title. Other than being readable by the user, headings can be used by agents to, for example, automatically construct table of contents.
The heading elements has different visual style to differentiate the importance of the heading. The heading level have a semantic meaning so you should not skip levels. In the code example below you can see that the different heading levels are used. Two headings also have the same content, but because one in on a lower level, we are fine (though you should try to have different titles). The heading level tells us which heading it is a subheading to.
The ... indicates that there should be some content there.
Only use one <h1> tag per page. By convention it is used to display the page title, and other headings starting with <h2>. And don't use lower level headings to decrease font size, use CSS' font-size property instead.
Paragraphs
A paragraph is a block of text, surrounded by the opening and closing tag <p></p>. <p> is a block element, thus each element will be shown on a new line.
Special markup
We can change how our text looks with inline elements. E.g. making the text bold or italic. Later we will learn to use CSS to style our text, but even then these elements are not obsolete. The browser gives them default styling, and you could change this with CSS. Keep in mind the function of e.g. bold text, it should really be bold.
Bold
You make the text bold by enclosing it in the tags <b></b>. These tags does not bear any semantic meaning other than highlighting the text. It should not be used for continuous text (body text), as it makes for worse readability, and looses it's function of highlighting keywords.
Italic
To make text italic, surround it with the tags <i></i>. As with bold, you should only use it to make some words stand out, not on an entire text.
Superscript and subscript
When writing about math or chemistry, or any other topic in need of superscript and subscript, you can use the tags <sup></sup> and </sub></sub> respectively.
White space
In HTML, we have white space collapsing. That means that you can write as many white spaces after each other that you like, and they will be treated as one white space. The same is true for line breaks. Coders can use this to organize their coding, making it easier to read. E.g.
will be rendered as:
The whites doesn't scare me
You can use this to indent your code, so that you will have a structure similar to this:
This will make the code easier to read, and see the document structure, e.g. which elements encloses other elements.
Line breaks
The paragraph tag <p> will give you space between each paragraph. If you only want to have a new line (a soft line break, if you want to sound like a pro) within the same paragraph, you can use <br>. No closing tag is necessary.
Last updated