U2T7 - MAIN COMPONENTS OF HTML Flashcards
What should an HTML file end and start with?
An HTML file should:
Start with:
<!DOCTYPE html> → Declares the document as HTML5.
<html> → The root element of the HTML document.
<head> → Contains metadata like the title and styles.
<body> → Contains the visible content of the webpage.
End with:
</body> → Closes the body section.
</html> → Closes the HTML document.
<!DOCTYPE html>
<html>
<head>
<meta></meta>
<title>My Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</head></html>
Explain what are tags and how they look like.
Tag:
A tag in HTML is a keyword or label used to mark the beginning or end of an HTML element. Tags are enclosed in angle brackets (< >). Tags tell the browser how to interpret and display the content inside them.
Opening tag: <tagname>
Closing tag: </tagname>
Example of a tag:
<h1> is an opening tag for a heading.
</h1>
is a closing tag.
A tag is part of an element.
Explain what are elements and how they look like.
Element:
An element is a complete HTML structure that consists of an opening tag, content, and a closing tag. It represents a piece of content on the webpage, like a paragraph, image, or heading.
Example of an element:
html
<h1>Welcome to My Website</h1>
In this example, <h1> and </h1> are the tags, and the entire <h1>Welcome to My Website</h1> is the element.
An element is the combination of tags and the content they enclose.
Most elements end with a closing tag, which
includes a forward slash and the element name, for example </html>. Omitting the end tag
can lead to unpredictable results, so try not to forget it!
What does the < !DOCTYPE html > declaration tell the browser?
The < !DOCTYPE html > declaration **tells the browser **that the document is written in HTML5, the latest version of HTML. It informs the browser to render the page using HTML5 rules and standards, ensuring proper interpretation and display of the content.
Why is the < !DOCTYPE html > declaration important?
Why is it important?
Ensures Compatibility: Without it, browsers may fall back to older rendering modes **(like quirks mode), which *could lead to inconsistent page layouts.
Standardized Rendering: By declaring < !DOCTYPE html >, it ensures that the browser uses modern HTML and CSS features *correctly.
- Define attributes
- Where are they always written?
- What do they consist of?
- attributes are additional information or properties added to HTML elements to provide extra details about how they should behave or be displayed.
- Attributes are always written inside the opening tag of an element and
- consist of a name and a value.
Examples of the Structure of an attribute.
Structure of an Attribute:
< tagname attribute=”value”>Content< /tagname >
Example:
< a href=”https://www.example.com”>Visit Example</a >
List all the common HTML attributes
1. Global Attributes (can be used on any HTML element)
id: Specifies a unique identifier for an element.
class: Defines one or more class names for an element, used for CSS styling or JavaScript targeting.
style: Applies inline CSS styling to an element.
title: Provides additional information about an element, often displayed as a tooltip when the user hovers over it.
lang: Specifies the language of the element’s content (e.g., en for English).
2. Image and Media Attributes
src: Specifies the source URL for an image (in the < img > tag).
alt: Provides alternative text for an image if it cannot be displayed (in the < img> tag).
width / height: Sets the dimensions of an image (in the < img> tag).
3. Link and Navigation Attributes
href: Specifies the URL for a hyperlink (in the < a> tag).
target: Determines where to open the linked document (e.g., _blank to open in a new tab).
What does the language attribute of an HTML document do?
The language of the document, specified by the lang attribute in the <html> tag, tells the browser (and search engines, accessibility tools, etc.) what language the content of the page is written in. This helps with proper rendering, translation, and accessibility.
< html lang=”en”>
Benefits of Using the lang Attribute:
Accessibility: Screen readers can adjust pronunciation based on the specified language, improving accessibility for visually impaired users.
Search Engine Optimization (SEO): Helps search engines understand the content language, which can improve search results targeting specific languages or regions.
Text Rendering: Browsers can adjust font rendering, hyphenation, and language-specific features (like spelling and grammar checks).
Language Switching: It helps translate tools or browsers offer to switch content to the preferred language.
Where can you find the code for different languages?
By searching the internet for’IANA language subtag reigstry’
