Section 1

Preview this deck

Semantic HTML

Front

Star 0%
Star 0%
Star 0%
Star 0%
Star 0%

0.0

0 reviews

5
0
4
0
3
0
2
0
1
0

Active users

0

All-time users

0

Favorites

0

Last updated

6 years ago

Date created

Mar 1, 2020

Cards (31)

Section 1

(31 cards)

Semantic HTML

Front

The use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation or look.

Back

<a>

Front

The <a> SVG element creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.

Back

element

Front

the opening tag, the closing tag, and the content together comprise the element

Back

metadata

Front

contains information about the page. This includes information about styles, scripts amd data to help software (search engines, browsers, etc.) use and render the page.

Back

<head>

Front

The HTML <head> element provides general information (metadata) about the document, including its title and links to its scripts and style sheets.

Back

src

Front

source attribute contains the path to our image file

Back

<footer role="contentinfo">

Front

your site's footer

Back

HTML

Front

The HTML <html> element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.

Back

<html></html>

Front

the <html> element. This element wraps all the content on the entire page and is sometimes known as the root element.

Back

<base>

Front

The HTML <base> element specifies the base URL to use for all relative URLs contained within a document. There can be only one <base> element in a document.

Back

HTML (Hypertext Markup Language)

Front

Back

<title></title>

Front

the <title> element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favourite it.

Back

href

Front

(Hypertext REFerence); specifies the URL of the linked page or file

Back

<img>

Front

image element, embeds an image into our page in the position it appears. It does this via the src attribute, which contains the path to our image file.

Back

boilercode

Front

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <img src="images/firefox-icon.png" alt="My test image"> </body> </html>

Back

<body></body>

Front

the <body> element. This contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.

Back

<body>

Front

The HTML <body> element represents the content of an HTML document. There can only be one <body> element in a doc.

Back

<link>

Front

The HTML External Resource Link element (<link>) specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and mobile home screen/app icons) among other things.

Back

<nav role="navigation">

Front

navigation elements

Back

class

Front

Here, class is the attribute name, and editor-note is the attribute value. The class attribute allows you to give the element an identifier that can be used later to target the element with style information and other things.

Back

<!DOCTYPE html>

Front

<!DOCTYPE html> — The doctype. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, these days no one cares about them, and they are just a historical artifact that needs to be included for everything to work right. For now, that's all you need to know.

Back

<video>

Front

embeds a media player which supports video playback into the document. You can use <video> for audio content as well, but the <audio> element may provide a more appropriate user experience

Back

<meta charset="utf-8">

Front

This element sets the character set your document should use to UTF-8, which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.

Back

<header role="banner">

Front

site wide headers

Back

<meta

Front

The meta description is an HTML attribute that provides a brief summary of a web page. Search engines such as Google often display the meta description—typically up to 160 characters long—in search results where they can highly influence user click-through rates. Example Code:

Back

header, nav, main, footer, section HTML 5 to ARIA Role

Front

Back

<head></head>

Front

the <head> element. This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.

Back

class attirbute

Front

Attributes contain extra information about the element that you don't want to appear in the actual content. An attribute should always have the following: A space between it and the element name (or the previous attribute, if the element already has one or more attributes). The attribute name, followed by an equals sign. The attribute value, wrapped by opening and closing quotation marks.

Back

<main role="main">

Front

for main elements

Back

alt

Front

alt (alternative) attribute specify descriptive text for users who cannot see the image, possibly because of visual impairment or issue with path. alt attribute is used to define alternative text describing the image. If the image can't be loaded for some reason, users will see the alternative text displayed in its place. Even more importantly, the alt text is read aloud by screen readers, which makes your images accessible to visually impaired users

Back

nesting elements

Front

Back