Text related tags:
Text can be organized in a web page like in a book on a single column or like in a magazine on multiple columns. The most simple technique is to create headers and paragraphs. The header is a title, for example a chapter name or a sub-title. To emphasize this we use larger characters or a different font for a title.
The paragraphs in a book can start with a larger letter or can be indented several spaces before the first word in the paragraph. One thing is common, paragraphs always start on a new row. The paragraph can contain several sentences. At the end of the row a paragraph can use a hyphen (-) to separate last word into two parts when there is no space to finish the word. On HTML this can happen automatically these days. We do not have to wary about it.
Here are the tags:
These tags are block tags. That means we use one per line or multiple lines of text.
- <h1>…</h1> (this tag define the title)
- <h2>…</h2> (this tag define the subtitle)
- <p>…</p> (this tag define a paragraph)
Note: The header tag usually is a short text and can be on a single line of text. The paragraph content is usually larger and can span several lines of text. Inside a paragraph the font is usually not changing, but the aspect of the text can be emphasized using a text decoration.
Text decoration tags:
These tags are inline tags. That means we can use these tags to mark a small portion of text inside a block of text.
- <i>…</i> (this is italic text),
- <b>…</b> (this is bold text),
- <u>…</u> (this is underlined text),
- <del>…</del> (this text is
- <br> this is used to create a new “line break”.
<i>this is italic text</i><br>
<b>this is bold text</b><br>
<u>this is underlined text</u><br>
<del>this text is strike through</del>
Note:In a WYSIWYG HTML editor we have shortcuts for these things. CTRL+I, CTL+B, CTRL+U.
Sometimes we can enumerate several ideas one under another. These ideas can be nested so we have categories and subcategories of ideas. For example we can create a table of content. We enumerate all the chapters in the book. This can be ordered (using a number or a symbol) or can be un-ordered (using a small dot or a circle in front of the text.
Ordered List Tags:
- <ol>….</ol> (Used one time to contain one ordered list)
- <li> … </li> (Used multiple times to contain one list item)
Unordered List Tags:
- <ul>….</ul> (Used one time to contain one un-ordered list)
- <li> … </li> (Used multiple times to contain one list item)
<h1>Unordered List </h1>
<h1>Ordered List </h1>
Open pen: HTML List Element
Some elements have attributes. These may be style attributes but sometimes the attribute can link to external files or resources. In case of element “img” the attribute src=”” specify immage location.
<img src="https://sagecode.net/wp-content/uploads/2019/07/cropped-new-sage-code.png" alt="#" width="40"/>
- Element <img> is self-closing. It does not have any content,
- Attribute “src” represent the content, it may be a relative URL or full URL,
- Attribute “alt” is useful when the source URL is not available,
- With attribute will resize image. The height can also be specified.
These attributes are common to all HTML elements; they can be used on any element, though they may have no effect on some elements. Each element has several important attributes for its particular usage.
The most important 3 attributes:
- The id :Defines an identifier unique in the whole document. It can be used to create links, scripting, or styling for a particular element,
- The style: Contains CSS styling for the element. Note that it is recommended for styles to be defined in a separate file or files with extension *.css.
Reference: MDN Global attributes
Remember HTML stands for Hypertext Markup Language? One property of HTML is that allows it to point towards another HTML page. This is realized with “link”. It looks like a blue text, sometimes underlined or other color. If you click this text it will open another web location.
To create a link you must use a special tag: <a>…</a> (anchor). This tag contains the text. The link attribute will contain the URL of the new location. There are other attribute specific to <a> element:
- href=”URL”, specify the address of new location,
- target=”_blank”, load URL in a new tab,
- target=”_parent”, load URL in a parent of current tab.
<a href="https://sagecode.net" target="_blank">my home page</a>
An anchor is very similar to a link, that you can use as a bookmark. When you use an anchor in URL, the target page opens and scroll down automatically to specified anchor. An anchor can be invisible, or it can have a representation. It can be a hyperlink or an image. To create an anchor you use tag <a> with mandatory “id” attribute. This is what you use to create a link for it:
Set-up #id for an invisible anchor:
Making an anchor that is also a link in the same time:
<a id="test" href="test">Test Anchor</a>
Making a hyperlink for the anchor #test
Next I give you two examples.
- First example you can open in pen: HTML Anchor & link
- Second is the link to reference page: MDN Anchor Attributes
The HTML Content Division element (<div>) is the generic container for flow content. It has no effect on the content or layout until styled using CSS cascade style sheet.
In this example, <div> element has “class” attribute, used in CSS.
You do not know yet CSS, you will learn it later, but this is how it looks like:
border: solid 2px;
box-shadow: 8px 8px 5px #444;
Open pen: HTML: Bug image
- The <div> element should be used only when no other semantic element (such as <article> or <nav>) is appropriate;
- Div element like most other elements have common attributes available to be used;
- The “align” attribute is obsolete. Use CSS Grid to replace this attribute.
This is a generic inline container for content separation. It can be used to group elements for styling using the class or id attributes. Unlike <p> or <div> that are block element, this is an inline element used for text fragments similar to bold <b> or italic <i>.
<p>This is a <span style="color: #ff00ff;">generic inline container</span> for content separation.</p>
Note: I previous example I have used <span> to change color style of text: “generic inline container”. I could have just associate a class to this short text and use CSS to style it.
Read next: How to create a HTML table