My HTML Cheat Sheet

HTML Attributes

HTML attributes provide additional information about HTML elements.

HTML Attributes

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

The href Attribute

Example

You will learn more about links in our HTML Links chapter.

The src Attribute

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

Example

There are two ways to specify the URL in the src attribute:

1. Absolute URL — Links to an external image that is hosted on another website. Example: src=»https://www.w3schools.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=»https://www.w3schools.com/html/img_girl.jpg». If the URL begins with a slash, it will be relative to the domain. Example: src=»https://www.w3schools.com/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 Attributes

The tag should also contain the width and height attributes, which specify the width and height of the image (in pixels):

Example

The alt Attribute

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

Example

Example

See what happens if we try to display an image that does not exist:

You will learn more about images in our HTML Images chapter.

The style Attribute

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

Example

You will learn more about styles in our HTML Styles chapter.

The lang Attribute

You should always include the lang attribute inside the 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 lang attribute. 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:

You can see all the language codes in our HTML Language Code Reference.

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:

Example

We Suggest: Always Use Lowercase Attributes

The HTML standard does not require lowercase attribute names.

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

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

At W3Schools 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.

Good:

Bad:

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

Example

At W3Schools we always use quotes around attribute values.

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 attributes
• The href attribute of specifies the URL of the page the link goes to
• The src attribute of specifies the path to the image to be displayed
• The width and height attributes of provide size information for images
• The alt attribute of 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 tag declares the language of the Web page
• The title attribute defines some extra information about an element

HTML Exercises

HTML Attribute Reference

A complete list of all attributes for each HTML element, is listed in our: HTML Attribute Reference.

Источник

HTML Cheat Sheet – HTML Elements List Reference

Ihechikara Vincent Abba

In this tutorial, we will go over commonly used HTML tags, elements, and attributes. We’ll also see examples of how these tags, elements, and attributes work.

You can use this article as a reference guide whether you’re a beginner or experienced developer.

What Makes Up an HTML Document?

The following tags define the basic HTML document structure:

• tag – This tag acts as a container for every other element in the document except the html> tag.
• tag– Includes all the document’s metadata.
• tag – Defines the title of the document which is displayed in the browser’s title bar.
• tag – Acts as a container for the document’s content that gets displayed on the browser.

Here’s what all that looks like:

html> specifies that we are working with an HTML5 document.

The following tags give additional information to the HTML document:

• tag – This tag can be used to define additional information about the webpage.
• tag – Used to link the document to an external resource.
• tag – Used for defining styles for the document.
• tag – Used to write code snippets (usually JavaScript) or to link the document to an external script.

      *  

HTML Document Structure

When you’re fleshing out your HTML document, you’ll use certain tags to create the structure.

The to tags show different levels of headings in a document, with being the largest and being the smallest.

 
Heading 1
 
Heading 2
 
Heading 3
 
Heading 4
 
Heading 5
 
Heading 6
 

You use the

tag to create a paragraph.

The tag can be used to divide and style separate sections of the document. It also acts as a parent container for other elements. Here’s how it works:

 
 
This is the news section
 
Welcome to the news section!
 
 
 
This is the contact us section
 
Hello world!
 

We also have the tag. This is similar to but you use it as an inline container.

There’s the
tag, which we use for creating line breaks. This has no closing tag.

The

---

tag is used to create a horizontal line. It also has no closing tag.

Images in HTML

In HTML, we use the tag to display images.

Here are some attributes of the tag:

• src is used to specify the path to the location of the image on your computer or the web.
• alt defines an alternate text that displays if the image cannot be rendered. The alt text is also good for screen readers.
• height specifies the height of the image.
• width specifies the width of the image.
• border specifies the thickness of the borders, which is set to 0 if no border is added.

Text Formatting in HTML

We have many ways to format text in HTML. Let’s go over them now briefly.

• displays text in italics.
• displays text in bold.
• displays text in bold. Used to make important emphasis.
• another emphasis tag that displays text in italics.
• defines subscript text, like the two atoms of oxygen in CO₂.
• defines a superscript like the power of a number, 10².
• reduces the size of text.
• defines deleted text by striking a line through the text.
• defines inserted text which is usually underlined.
• is used to enclose a section of text quoted from another source.
• is used for shorter inline quotes.
• is used for citing the author of a quote.
• is used for showing the author’s contact information.
• denotes an abbreviation.
• displays code snippets.
• highlights text.

 italic text 
 
bold text 
 
 strong text 
 
 strong text 
 
 subscripted text 
 
 superscripted text 
 
 small text 
 
 deleted text 
 
 inserted text 
 
 
quoted text
 
 
 short quoted text 
 
 cited text 
 
 
address
 
 
 inserted text 
 
 code snippet 
 
 marked text 

Links

Here are some attributes of the tag:

• href specifies the URL the link takes the user to when clicked.
• download specifies that the target or resource clicked is downloadable.
• target specifies where the link is to be opened. This could be in the same or separate window.

Lists

tag defines an ordered list while the
tag defines an unordered list.

Forms

The tag is used to create a form in HTML. Forms are used to get user inputs. Here are some attributes associated with the element:

• action specifies where the form information goes when submitted.
• target specifies where to display the form’s response.
• autocomplete can have a value of on or off.
• novalidate specifies that the form should not be validated.
• method specifies the HTTP method used when sending form data.
• name specifies the name of the form.
• required specifies that an input element cannot be left empty.
• autofocus gives focus to the input elements when the page loads.
• disabled disables an input element so the user can longer interact with it.
• placeholder is used to give users a hint on what information is required for an input element.

Here are other input elements associated with forms:

• for getting user text input with multiple lines.
• specifies a list of options the user can choose from.
• creates an option under the select element.
• specifies an input field where the user can enter data. This has a type attribute that specifies what type of data the user can input.
• creates a button.

  First name:  Last name:  Bio: 15-18 19-25 26-30 31-36  

Tables

 
 
 
 
Course
 
Progress
 
 
 
 
 
HTML
 
90%
 
 
 
CSS
 
80%
 
 
 
 
 
JavaScript
 
95%
 
 
 

Tags introduced in HTML5

Here are some tags introduced in HTML5:

• specifies the webpage header
• specifies the webpage footer.
• specifies a main content section.
• specifies an article’s section, usually for content that can stand alone on the webpage.
• is used to create separate sections.
• is usually used to when placing items in a sidebar.
• is used for formatting date and time.
• is used for figures like charts.
• denotes a description of a figure.
• is used to nest navigation links.
• is used to measure data within a range.
• is used as a progress bar.
• is used to create a dialog box.
• is used to embed an audio file in the web page.
• is used to embed video.

Conclusion

In this article, we have seen a lot of HTML tags, elements, and attributes commonly used by developers. This is not all there is, but should serve as a good reference resource.

I hope you found this helpful. Thank you for reading.

Источник