Go on. Explore!

lvl 0 • 0 xp

lvl 1

Home Market Decks Interests

HTML

memorize.ai (lvl 286)

(0)

32 cards

()

Section 1

Preview this deck

Opening Links in a New Window

Front

1 / 32

HTML Web Dev

0.0

0 reviews

5			0
4			0
3			0
2			0
1			0

Active users

All-time users

Favorites

Last updated

6 years ago

Date created

Mar 14, 2020

Cards (32)

Section 1

(32 cards)

Opening Links in a New Window

Front

To trigger the action of opening a link in a new window, use the target attribute with a value of _blank. The target attribute determines exactly where the link will be displayed, and the _blank value specifies a new window. <a href="http://shayhowe.com/" target="_blank">Shay Howe</a>

Back

Block vs. Inline Elements

Front

Most elements are either block- or inline-level elements. What's the difference? Block-level elements begin on a new line, stacking one on top of the other, and occupy any available width. Block-level elements may be nested inside one another and may wrap inline-level elements. We'll most commonly see block-level elements used for larger pieces of content, such as paragraphs. Inline-level elements do not begin on a new line. They fall into the normal flow of a document, lining up one after the other, and only maintain the width of their content. Inline-level elements may be nested inside one another; however, they cannot wrap block-level elements. We'll usually see inline-level elements with smaller pieces of content, such as a few words.

Back

Semantics Overview

Front

So what exactly are semantics? Semantics within HTML is the practice of giving content on the page meaning and structure by using the proper element. Semantic HTML is easier to manage and work with, as it shows clearly what each piece of content is about.

Back

Aside

Front

The <aside> element holds content, such as sidebars, inserts, or brief explanations, that is tangentially related to the content surrounding it. When used within an <article> element, for example, the <aside> element may identify content related to the author of the article. We may instinctively think of an <aside> element as an element that appears off to the left or right side of a page. We have to remember, though, that all of the structural elements, including the <aside> element, are block-level elements and as such will appear on a new line, occupying the full available width of the page or of the element they are nested within, also known as their parent element.

Back

HTML

Front

HTML documents are plain text documents saved with an .html file extension rather than a .txt file extension. Two of the more popular plain text editors for writing HTML and CSS are Dreamweaver and Sublime Text. Free alternatives also include Notepad++ for Windows and TextWrangler for Mac.

Back

<html> </html>

Front

Following the document type declaration, the <html> element signifies the beginning of the document.

Back

<span>

Front

A <span>, on the other hand, is an inline-level element commonly used to identify smaller groupings of text within a block-level element.

Back

<div>

Front

A <div> is a block-level element that is commonly used to identify large groupings of content, and which helps to build a web page's layout and design.

Back

Article

Front

The <article> element is used to identify a section of independent, self-contained content that may be independently distributed or reused. We'll often use the <article> element to mark up blog posts, newspaper articles, user-submitted content, and the like.

Back

Wrapping Block-Level Elements with Anchors

Front

By nature the anchor element, <a>, is an inline element, and, according to web standards, inline-level elements may not wrap block-level elements. With the introduction of HTML5, however, anchor elements specifically have permission to wrap either block-, inline-, or any other level elements. This is a break from the standard convention, but it's permissible in order to enable entire blocks of content on a page to become links.

Back

Encoding Special Characters

Front

Each encoded character will begin with an ampersand, &, and end with a semicolon, ;. What falls between the ampersand and semicolon is a character's unique encoding, be it a name or numeric encoding.

Back

Validating

Front

Validating our code not only helps it render properly across all browsers, but also helps teach us the best practices for writing code. The W3C has built both HTML and CSS validators that will scan code for mistakes.

Back

Deciding Between <article>, <section>, or <div> Elements

Front

At times it becomes fairly difficult to decide which element—<article>, <section>, or <div>—is the best element for the job based on its semantic meaning. The trick here, as with every semantic decision, is to look at the content.If the content adds to the document outline and it can be independently redistributed or syndicated, use the <article> element. If the content adds to the document outline and represents a thematic group of content, use the <section> element.

Back

Attributes

Front

Attributes are properties used to provide additional information about an element. The most common attributes include the id attribute, which identifies an element; the class attribute, which classifies an element; the src attribute, which specifies a source for embeddable content; and the href attribute, which provides a hyperlink reference to a linked resource.

Back

<strong> vs <b>

Front

The <strong> element is semantically used to give strong importance to text, and is thus the most popular option for bolding text. The <b> element, on the other hand, semantically means to stylistically offset text, which isn't always the best choice for text deserving prominent attention.

Back

Identifying Divisions & Spans

Front

Divisions, or <div>s, and <span>s are HTML elements that act as containers solely for styling purposes. As generic containers, they do not come with any overarching meaning or semantic value.

Back

Linking to an Email Address

Front

To create an email link, the href attribute value needs to start with mailto: followed by the email address to which the email should be sent. To add a subject line, we'll include the subject= parameter after the email address. The first parameter following the email address must begin with a question mark, ?, to bind it to the hyperlink path. Multiple words within a subject line require that spaces be encoded using %20. <a href="mailto:shay@awesome.com?subject=Reaching%20Out&body=How%20are%20you">Email Me</a>

Back

href

Front

<a href="http://shayhowe.com/">Shay Howe</a>

Back

Section

Front

The <section> element is used to identify a thematic grouping of content, which generally, but not always, includes a heading. The grouping of content within the <section> element may be generic in nature, but it's useful to identify all of the content as related. The <section> element is commonly used to break up and provide hierarchy to a page.

Back

<header> vs. <head> vs. <h1> through <h6> Elements

Front

It is easy to confuse the <header> element with the <head> element or the heading elements, <h1> through <h6>. They all have different semantic meanings and should be used according to their meanings. For reference... The <header> element is a structural element that outlines the heading of a segment of a page. It falls within the <body> element. The <head> element is not displayed on a page and is used to outline metadata, including the document title, and links to external files. It falls directly within the <html> element. Heading elements, <h1> through <h6>, are used to designate multiple levels of text headings throughout a page

Back

Elements

Front

Elements are designators that define the structure and content of objects within a page. Some of the more frequently used elements include multiple levels of headings (identified as <h1> through <h6> elements) and paragraphs (identified as the <p> element); the list goes on to include the <a>, <div>, <span>, <strong>, and <em> elements, and many more.

Back

<body> </body>

Front

All of the visible content within the web page will fall within the <body>

Back

<meta>

Front

Back

Navigation

Front

The <nav> element identifies a section of major navigational links on a page. The <nav> element should be reserved for primary navigation sections only, such as global navigation, a table of contents, previous/next links, or other noteworthy groups of navigational links.

Back

choosing name

Front

We'll commonly see <div>s and <span>s with class or id attributes for styling purposes. Choosing a class or id attribute value, or name, requires a bit of care. We want to choose a value that refers to the content of an element, not necessarily the appearance of an element.

Back

Self-Closing Elements

Front

<br> <embed> <hr> <img> <input> <link> <meta> <param> <source> <wbr>

Back

comments

Front

HTML comments start with . CSS comments start with / and end with /.

Back

HTML Structure

Front

All HTML documents have a required structure that includes the following declaration and elements: <!DOCTYPE html>, <html>, <head>, and <body>.

Back

Building Structure

Front

For the longest time the structure of a web page was built using divisions. The problem was that divisions provide no semantic value, and it was fairly difficult to determine the intention of these divisions. Fortunately HTML5 introduced new structurally based elements, including the <header>, <nav>, <article>, <section>, <aside>, and <footer> elements.

Back

<!DOCTYPE html>

Front

The document type declaration, or <!DOCTYPE html>, informs web browsers which version of HTML is being used and is placed at the very beginning of the HTML document. Because we'll be using the latest version of HTML, our document type declaration is simply <!DOCTYPE html>.

Back

<em> vs <i>

Front

The <em> element is used semantically to place a stressed emphasis on text; it is thus the most popular option for italicizing text. The other option, the <i> element, is used semantically to convey text in an alternative voice or tone, almost as if it were placed in quotation marks. Again, we will need to gauge the significance of the text we want to italicize and choose an element accordingly.

Back

Linking to Parts of the Same Page

Front

We can create an on-page link by first setting an id attribute on the element we wish to link to, then using the value of that id attribute within an anchor element's href attribute. <body id="top"> ... <a href="#top">Back to top</a> ... </body>

Back