U2T7 - Components of metadata (MCofHTML Part 2) Flashcards
Explain metadata
Metadata refers to data that provides information about other data. It helps describe, explain, or give context to the actual content, making it easier to understand and manage.
In the context of web development:
- Metadata refers to the information inside the < head> element of an HTML document, such as:
- The page’s title (< title>)
- Character encoding (< meta charset=”UTF-8”>)
- Description of the webpage for search engines (< meta name=”description” content=”…”>)
- Keywords for search engines (< meta name=”keywords” content=”…”>)
- Author of the document
E.g. < meta name=”description” content=”This is a sample webpage about metadata.”>
In general, metadata does not contain actual content, but it describes the content, its structure, and how it should be processed or displayed.
What is a document title in HTML?
The document title in HTML is the text specified within the < title> tag, and it defines the name of the webpage that appears in the browser’s title bar or tab.
Example:
html
< head>
< title>My Awesome Website</title>
< /head>
In this example, “My Awesome Website” is the document title.
What is the purpose of the Document title?
Purpose of the Document Title:
Displayed in the Browser: It shows up in the browser’s tab or window title, helping users identify the page.
Search Engines: The title is often used by search engines as the main link text in search results.
Social Sharing: When sharing a link, the title often appears as the preview or heading on platforms like social media.
Definition of script
scripts are used to add interactivity, functionality, and dynamic behavior to a webpage. Scripts are typically written in JavaScript and can control aspects like user input, animations, content updates, and communication with servers.
Definition of Styles
styles refer to the visual appearance of a webpage, such as its layout, colors, fonts, and spacing. CSS (Cascading Style Sheets) is used to define styles, allowing you to control how HTML elements are displayed.
Definition of Styles in HTML
styles refer to the visual appearance of a webpage, such as its layout, colors, fonts, and spacing. CSS (Cascading Style Sheets) is used to define styles, allowing you to control how HTML elements are displayed.
How to do
Linking to External Images
on html
Linking to External Images: You can link to external image files in the <img></img> tag using the src attribute.
Example html
<img></img>
src=”image.jpg”: Points to the location of the external image file
How to
Linking to External Documents or Pages
?
Linking to External Documents or Pages: The < a> tag is used to link to external documents, websites, or other pages within the same site.
html
< a href=”https://www.example.com”>Visit Example Website< /a>
href=”https://www.example.com”: Points to the URL of the external webpage.
What does the meta tag do?
The < meta> tag is used to provide information about the page, such as the character set used, a description of the page, key words associated with the page and viewport settings. This data is used by the browser to display the page properly, and by search engines to help them understand what the page is about.
What does the character set use of meta do?
Character Set:
The charset attribute within the < meta> tag specifies the character encoding used for the page. UTF-8 is the most commonly recommended character set because it supports a wide range of characters from various languages and symbols, ensuring proper rendering of text.
< meta charset=”UTF-8”>
What does the use of key words do in meta?
Keywords:
The keywords attribute allows you to specify a list of important words or phrases that represent the content of the page. These keywords are used by search engines to help categorize and index the page correctly, which can influence the page’s ranking in search results.
< meta name=”keywords” content=”HTML, CSS, web development, meta tags”>
What does the use of description in meta do?
Description:
The description attribute provides a brief summary of the page’s content. This description is often displayed in search engine results to help users decide whether to click the link. A well-crafted description can improve the page’s visibility and attractiveness in search results.
< meta name=”description” content=”Learn HTML, CSS, and how to use meta tags in web development.”>
What does the use of refresh do in meta?
Refresh:
The refresh attribute instructs the browser to automatically refresh or reload the page after a specified time interval. This is useful for websites that display real-time data, like stock prices or news feeds, which need to be updated frequently.
< meta http-equiv=”refresh” content=”30”>
Example of use of Meta
< head>
< title>Example page head section< /title>
< meta charset=”UTF-8”>
< meta name=”keywords” content=”HTML, head section”>
< meta name=”description” content=”The HTML head section”>
< meta http-equiv=”refresh” content=”90”>
< /head>
WHat is the use of viewpoint in meta
<meta></meta>
```”
“Viewport. This should be included using a <meta></meta> tag. The viewport is the size of the screen that the user is viewing the page on and will vary depending on whether they are using a mobile or a desktop device. The width attribute should be set to device-width so that the width of the page will use the width of the device screen, and the initial-scale attribute should be set to 1. The following code shows an example of this.
< meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
In order to write clear, consistent and easy-to-read HTML, what rules should you follow?
- Write all element names, attributes and values in lower case.
- Many HTML elements are nested. Indenting nested elements makes reading the HTML easier. Allows anyone to see where each element starts and ends, and it is clear where elements have been nested.
- Many attributes need to have their values in quotes. These can be double or single quotes, but for consistency double quotes should be used.
- There are some HTML attributes that accept Boolean values (true, false). However, values of true and false should not be used.
For example, the following:
< div hidden = “true”>
is not valid; it should be:
< div hidden>
If the attribute is false it should be omitted. For example:
< div> - Some tags are known as self-closing in that they don’t require a closing tag. The image tag < img> is an example of this. It is generally regarded as good practice to omit the closing forward slash, so: < img src=”myImage.jpg”>
rather than: < img src=”myImage.jpg”/>
Other self closing tags that you are linkely to encounter include< br>(newline), < hr>(horizontal rule), < meta> and < input> (to input data on a form).
What does the class attribute do?
Class. The class attribute is used to specify a class name for an element. It is most commonly used with styles and is covered in the topic on CSS.
What does the id attribute do?
Id. The id attribute is used to define a unique ID for an HTML element. It is commonly used to identify an element for use within a script and so is covered in the topic on JavaScript. Later in this topic you will see how an id attribute can be used as bookmarks to link to a location on a page. An example of creating an ID for a paragraph is:
< p id=”chapter4”>
What does the style attribute do?
Style. Used to set a CSS style for an element.
What does the access key attribute do?
Access key. Used to set a shortcut key to activate or give focus to the element. The value should be a single keyboard character. With most browsers the shortcut key must be used in combination with the alt key.
An example is:
Click < a href=”linkPage.html” accesskey=”k”>here< /a>
What does the language attribute do?
Lang. Specifies the language for the element’s text content. This is used if an element has text in a different language than the rest of the page. The default language for the page is set in the < html> tag.
< p lang=”es”>Este es un párrafo en español.< /p>
What does the tabindex attribute do?
Tabindex. Specifies the order of navigation through the page when using the tab key. It allows the developer to change the order in which elements on a page receive focus. For example:
< a href=”news.html” tabindex=”2”>Latest news< /a>
< a href=”contacts.html” tabindex=”l”>Contact details< /a>
< a href=”home.html” tabindex=”3”>Home page< /a>
In this example, the tab order for these three links has been changed using the tabindex attribute. The use of links is described in detail later in this topic. Users will expect a logical tab order on a page, so care should be taken and the order should not be changed without a good reason.
What does the data attribute do?
- Allows data to be stored within the web page. This data can then be accessed by JavaScript and used in a variety of ways. For example, the data could contain additional information about the element that could be displayed on request, by the user clicking a ‘more information’ button. The data attribute name must be followed by a dash and then the name the developer wants to give the data, which should be in lower case.
For example:
< ul>
< li data-details=”A citrus fruit”>Orange< /li>
< li data-details=”Yellow in colour”>Banana< /li>
< /ul>
In this example a data attribute called details (the li attribute) has been created within an unordered list (the < ul> tag). Unordered lists are described later in the topic.
What does the hidden attribute do?
Hidden. This attribute will mean that the element is not displayed. For example, it could be used to hide some website content, which is only displayed (by using JavaScript to remove the hidden attribute) when some other condition is met.”
