HTML Tutorial

HTML HomeIntroduction Editors Basic Elements Attributes Headings Paragraphs Styles Formatting Quotations Comments Colors CSS in HTMLLinks Images Favicon Tables Lists Block & Inline Classes Id Iframes JavaScript in HTML File Paths Head Layout Responsive Computercode Semantics Style Guide Entities Symbols Emojis Charset URL Encode HTML vs.XHTML

HTML Forms

Forms Form Attributes Form Elements Input Types Input Attributes Input Form Attributes

HTML Media

MediaVideo Audio Plug-Ins YouTube

HTML Examples

Examples
HomeHTMLCSSJavaScript

HTML Formatting

PreviousNext

HTML Formatting

  • All HTML elements can have Formatting
  • Formatting provide additional information about elements
  • Formatting are always specified in the start tag
  • Formatting usually come in name/value pairs like: name="value"

The href Attribute

The <a> tag defines a hyperlink. Thehref attribute specifies the URL of the page the link goes to:

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:

There are two ways to specify the URL in the srcattribute:

1. Absolute URL - Links to an external image that is hosted on another website. Example: src="https://www.google.com/images/img_girl.jpg".

Notes: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.

2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example: src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you change domain.

The width and height Formatting

The <img> tag should also contain thewidth and height Formatting, which specifies the width and height of the image (in pixels):

The alt Attribute

The required alt attribute for the <img>tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute, or if the user uses a screen reader.

The style Attribute

The style attribute is used to add styles to an element, such as color, font, size, and more.

The lang Attribute

You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

Country codes can also be added to the language code in the langattribute. So, the first two characters define the language of the HTML page, and the last two characters define the country.

The following example specifies English as the language and United States as the country:

The title Attribute

The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse over the element:

We Suggest: Always Use Lowercase Formatting

The HTML standard does not require lowercase attribute names.

The title attribute (and all other Formatting) can be written with uppercase or lowercase like title or TITLE.

However, W3C recommends lowercase Formatting in HTML, and demandslowercase Formatting for stricter document types like XHTML.

At DevCrib we always use lowercase attribute names.

We Suggest: Always Quote Attribute Values

The HTML standard does not require quotes around attribute values.

However, W3C recommends quotes in HTML, and demands quotes for stricter document types like XHTML.

Sometimes you have to use quotes. This example will not display the title attribute correctly, because it contains a space:

Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but single quotes can also be used.

In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:

Chapter Summary

  • All HTML elements can have Formatting
  • The href attribute of <a> specifies the URL of the page the link goes to
  • The src attribute of <img> specifies the path to the image to be displayed
  • The width and height Formatting of <img> provide size information for images
  • The alt attribute of <img> provides an alternate text for an image
  • The style attribute is used to add styles to an element, such as color, font, size, and more
  • The lang attribute of the <html> tag declares the language of the Web page
  • The title attribute defines some extra information about an element
â €

Feedback

TERMS OF SERVICE | ABOUT

â €

DevCrib is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using DevCrib, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 2022 by Michael Okwuosah. All Rights Reserved.

DevCrib