HTML Tags

index<--

HTML Tags

Tags for HTML can be organized in categories. Learning these tags can be tedious. I was not able to learn HTML for years until I have started working on a website. So the mother of learning is practice. In this article I will use examples for the most significant HTML tags.

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.

Headers & Paragraphs:

These tags are block tags. That means "..." can be replaced with one short text or multiple lines of text. 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.

1. <h1>...</h1> (this tag define the title)
2. <h2>...</h2> (this tag define the subtitle)
3. <p> ...</p>  (this tag define a paragraph)

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. Unlike the block tags, these tags do not break the line so you can use many in a single line of text. That is the difference between the two kind of tags you need to remember in case someone ask.


1. <i>…</i> (this is italic text),
2. <b>…</b> (this is bold text),
3. <u>…</u> (this is underlined text),
4. <del>…</del> (this text is strike through),
5. <br> this is used to create a new "line break".

Example:

In the following example, we demonstrate one paragraph that is a block tag with 4 other in-line tags. This block will not produce 5 lines of text but only one because there is no break between the HTML lines.

<hr>
<p>Demo for in-line tags:
<i>italic text</i>
<b>bold text</b>
<u>underlined text</u>
<del>strike through text</del>
</p><hr>

HTML Rendering Output:

The fragment above will look like next 3 lines, (including the horizontal lines):

Demo for decoration tags: italic text bold text underlined text ~~strike through text~~

Note: In a WYSIWYG HTML editor we have shortcuts for these things. CTRL+I, CTL+B, CTRL+U.

User enumerations

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:

1. <ol>….</ol> (Used one time to contain one ordered list)
2. <li> … </li> (Used multiple times to contain one list item)

Unordered List Tags:

1. <ul>….</ul> (Used one time to contain one un-ordered list)
2. <li> … </li> (Used multiple times to contain one list item)

Example:

<h1>Unordered List </h1>
<ul>
   <li>first item</li>
   <li>second item</li>
   <li>third item</li>
</ul>
<h1>Ordered List </h1>
<ol>
   <li>first item</li>
   <li>second item</li>
   <li>third item</li>
</ol>

Homework: Open with codepen.io: HTML List Element

Using attributes

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 image location.

Example:

<img src="img/page-source.jpg" width="400"/>

Notes:

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.

Global Attributes

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 class: A space-separated list of the classes of the element. Classes enable CSS selectors to access specific elements,
The style Contains CSS styling for the element. It is recommended for styles to be defined in a separate CSS files.

Reference: MDN Global attributes

Hyperlinks

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: … (anchor). This tag contains the text. The link attribute will contain the URL of the new location. There are other attribute specific to 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.

Example:

<a href="https://sagecode.net" target="_blank">my home page</a>

Anchors

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 with mandatory "id" attribute.

Making anchors: These is what you use to create a link for it:

1. Set-up an #id for an invisible anchor:

<a id="test"/>

2. Making an anchor that is also a link to itself in the same time:

<a id="test" href="#test">test anchor</a>

3. Making a hyperlink for the anchor using hash tag "#test"

<a href="#test"/>"go to test"</a>

Homework:

Next examples is an external links to HTML code stored on: codepen.io website. If you click, a new window will be opened in your browser with the example. You can open and run this example to understand what is happening.

Codepen Example: HTML Anchor & link
Documentation: MDN Anchor Attributes

Container Elements

The HTML Content Division element represented by tag: "div" is the generic container that can be used to encapsulate some content. It has no effect on the content or layout until is styled using CSS cascade style sheet. This element has become very popular to organize your content on a web site.

Example:

In this example, the "div" element has "class" attributes, that can be used in CSS.

<div align="center">
 <img src="img/ledy-bug.png" alt="Insect"  style="border:solid; border-radius:10px;">
 <p>Leady Bug</p>
</div>

If you render the previous example you will get this image:

Leady Bug

Using CSS:

You do not know yet CSS, you will learn it later, but this is how it looks like:

.rect {
    border: solid 2px;
    width: 20em;
    box-shadow: 8px 8px 5px #444;
    border-color: silver;
    border-radius: 16px;
    padding: 8px;
    text-align: center;
}

Homework: Open with codepen.io: 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.

Span element

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 paragraph "p" or "div" elements, that are block element, span is an inline element used for text fragments similar to bold <b> or italic <i>.

Example:

<p>This is a <span style="color: #ff00ff;">generic inline container</span> for content separation.</p>

Note: I previous example I have used "span" tag with "style" attribute to change color style of text: "generic inline container". I could have associate a class to "span" tag and use CSS. Most designer prefer to use CSS for style and avoid "style" attribute.

HTML5 video Element

The newly introduced HTML5 <video> element provides a standard way to embed video in web pages. The video element is relatively new, but it works in most of the modern web browsers.

The following example simply inserts a video into the HTML document, using the browser default set of controls, with one source defined by the src attribute.

<video controls="controls" src="https://sagecode.net/html/media/demo.mp4">
    Your browser does not support the HTML5 Video!
</video>

Example:

You can see this element in action below. Of course the example is also using Bootstrap to establish the size of the media. You can inspect this example by hovering mouse over the image then open popup menu by: right click -> Inspect Element.

Iframe:

Next resource explains how to use external videos using iframe element with Bootstrap. This is a CSS style framework that can help you create responsive layouts and style your pages. For details visit: mdbootstrap.com/docs

Read next: HTML Tables