Menu Close

Articles

Most significant 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.

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 strike through),
  • <br> this is used to create a new “line break”.

Example:

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:

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

Example:

Open pen: 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 immage location.

Example:

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:

  1. The id :Defines an identifier unique in the whole document. It can be used to create links, scripting, or styling for a particular element,
  2. The class: A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selector,
  3. 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

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: <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.

Example:

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 <a> with mandatory “id” attribute. This is what you use to create a link for it:

Pattern:

Set-up #id for an invisible anchor:

Making an anchor that is also a link in the same time:

Making a hyperlink for the anchor #test

Examples:

Next I give you two examples.

Container element 

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.

Example:

In this example, <div> element has “class” attribute, used in CSS.

CSS:

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

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.

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

Example:

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