diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/nl/web/html/element | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip |
initial commit
Diffstat (limited to 'files/nl/web/html/element')
-rw-r--r-- | files/nl/web/html/element/a/index.html | 313 | ||||
-rw-r--r-- | files/nl/web/html/element/abbr/index.html | 150 | ||||
-rw-r--r-- | files/nl/web/html/element/b/index.html | 82 | ||||
-rw-r--r-- | files/nl/web/html/element/div/index.html | 146 | ||||
-rw-r--r-- | files/nl/web/html/element/figcaption/index.html | 123 | ||||
-rw-r--r-- | files/nl/web/html/element/html/index.html | 113 | ||||
-rw-r--r-- | files/nl/web/html/element/index.html | 110 | ||||
-rw-r--r-- | files/nl/web/html/element/marquee/index.html | 203 | ||||
-rw-r--r-- | files/nl/web/html/element/p/index.html | 113 |
9 files changed, 1353 insertions, 0 deletions
diff --git a/files/nl/web/html/element/a/index.html b/files/nl/web/html/element/a/index.html new file mode 100644 index 0000000000..3c3fc3a0b8 --- /dev/null +++ b/files/nl/web/html/element/a/index.html @@ -0,0 +1,313 @@ +--- +title: <a> +slug: Web/HTML/Element/a +translation_of: Web/HTML/Element/a +--- +<p><span class="seoSummary">Het <strong>HTML <code><a></code> element</strong> (of <em>anker</em> element) maakt een hyperlink naar andere web pagina's, bestanden, lokaties binnen dezelfde pagina, email-adressen of een andere URL.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content </a>categorieën</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#interactive_content">interactive content</a>, tastbare content.</td> + </tr> + <tr> + <th scope="row">Toegestane content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Transparent_content_model">Transparent</a>, bevat ofwel <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a> ( exclusief <a href="/en-US/docs/Web/Guide/HTML/Content_categories#interactive_content">interactive content</a>) of <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag verzuim</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Toegestane ouders</th> + <td>Ieder element dat <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a> accepteert, of ieder element dat <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a> accepteert, maar altijd <a> elementen uitsluit ( volgens het logische principe van symmetrie dat als een <a> tag, als ouder, geen <a href="/en-US/docs/Web/Guide/HTML/Content_categories#interactive_content">interactive content</a> kan bevatten, deze <a> content dus niet deze <a> tag als zijn ouder kan hebben).</td> + </tr> + <tr> + <th scope="row">Toegestane ARIA roles</th> + <td>{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLAnchorElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element's attributes include the <a href="/en-US/docs/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</dt> + <dd>This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). There are no restrictions on allowed values, though <code>/</code> and <code>\</code> are converted to underscores. Most file systems limit some punctuation in file names, and browsers will adjust the suggested name accordingly. + <div class="note"><strong>Notes:</strong> + <ul> + <li>This attribute only works for <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin URLs</a>.</li> + <li>This attribute can be used with <a href="/en-US/docs/Web/API/URL.createObjectURL"><code>blob:</code> URLs</a> and <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URLs</a> to download content generated by JavaScript, such as pictures created in an image-editor Web app.</li> + <li>If the HTTP header <a href="/en-US/docs/Web/HTTP/Headers/Content-Disposition"><code>Content-Disposition:</code></a> gives a different filename than this attribute, the HTTP header takes priority over this attribute.</li> + <li>If <code>Content-Disposition:</code> is set to <code>inline</code>, Firefox prioritizes <code>Content-Disposition</code>, like the filename case, while Chrome prioritizes the <code>download</code> attribute.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("href")}}</dt> + <dd>Contains a URL or a URL fragment that the hyperlink points to.</dd> + <dd>A URL fragment is a name preceded by a hash mark (<code>#</code>), which specifies an internal target location (an <a href="/en-US/docs/HTML/Global_attributes#attr-id">ID</a> of an HTML element) within the current document. URLs are not restricted to Web (HTTP)-based documents, but can use any protocol supported by the browser. For example, <a class="external" href="https://en.wikipedia.org/wiki/File_URI_scheme"><code>file:</code></a>, <code>ftp:</code>, and <code>mailto:</code> work in most browsers.</dd> + <dd>This attribute may be omitted (as of HTML5) to create a placeholder link. A placeholder link resembles a traditional hyperlink, but does not lead anywhere. + <div class="note"> + <p><strong>Note:</strong> You can use <code>href="#top"</code> or the empty fragment <code>href="#"</code> to link to the top of the current page. <a href="https://www.w3.org/TR/html5/single-page.html#scroll-to-fragid">This behavior is specified by HTML5</a>.</p> + </div> + </dd> + <dt>{{htmlattrdef("hreflang")}}</dt> + <dd>This attribute indicates the human language of the linked resource. It is purely advisory, with no built-in functionality. Allowed values are determined by <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt" title="Tags for Identifying Languages">BCP47</a>.</dd> + <dt>{{htmlattrdef("ping")}}</dt> + <dd>Contains a space-separated list of URLs to which, when the hyperlink is followed, {{HTTPMethod("POST")}} requests with the body <code>PING</code> will be sent by the browser (in the background). Typically used for tracking.</dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>Indicates which <a href="/en-US/docs/Web/HTTP/Headers/Referer">referrer</a> to send when fetching the URL: + <ul> + <li><code>'no-referrer'</code> means the <code>Referer:</code> header will not be sent.</li> + <li><code>'no-referrer-when-downgrade'</code> means no <code>Referer:</code> header will be sent when navigating to an origin without HTTPS. This is the default behavior.</li> + <li><code>'origin'</code> means the referrer will be the <a href="/en-US/docs/Glossary/Origin">origin</a> of the page, not including information after the domain.</li> + <li><code>'origin-when-cross-origin'</code> meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path.</li> + <li><code>'unsafe-url'</code> means the referrer will include the origin and path, but not the fragment, password, or username. This is unsafe because it can leak data from secure URLs to insecure ones.</li> + </ul> + </dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>Specifies the relationship of the target object to the link object. The value is a space-separated list of <a href="/en-US/docs/Web/HTML/Link_types">link types</a>.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>Specifies where to display the linked URL. It is a name of, or keyword for, a <em>browsing context</em>: a tab, window, or <code><iframe></code>. The following keywords have special meanings: + <ul> + <li><code>_self</code>: Load the URL into the same browsing context as the current one. This is the default behavior.</li> + <li><code>_blank</code>: Load the URL into a new browsing context. This is usually a tab, but users can configure browsers to use new windows instead.</li> + <li><code>_parent</code>: Load the URL into the parent browsing context of the current one. If there is no parent, this behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: Load the URL into the top-level browsing context (that is, the "highest" browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this behaves the same way as <code>_self</code>.</li> + </ul> + + <div class="note"> + <p><strong>Note:</strong> When using <code>target</code>, consider adding <code>rel="noopener noreferrer"</code> to avoid exploitation of the <code>window.opener</code> API.</p> + </div> + </dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Specifies the media type in the form of a {{Glossary("MIME type")}} for the linked URL. It is purely advisory, with no built-in functionality.</dd> +</dl> + +<h3 id="Obsolete">Obsolete</h3> + +<dl> + <dt>{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>This attribute defined the <a href="/en-US/docs/Glossary/character_encoding">character encoding</a> of the linked URL. The value should be a space- and/or comma-delimited list of character sets defined in <a class="external" href="https://tools.ietf.org/html/rfc2045">RFC 2045</a>. The default value is <code>ISO-8859-1</code>. + <div class="note"> + <p><strong>Usage note:</strong> This attribute is obsolete in HTML5 and <strong>should not be used by authors</strong>. To achieve its effect, use the HTTP <a href="/en-US/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type:</code></a> header on the linked URL.</p> + </div> + </dd> + <dt>{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>For use with the below <code>shape</code> attribute, this attribute used a comma-separated list of numbers to define the coordinates of the link on the page.</dd> + <dt>{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>This attribute was required for anchors defining a possible target location within a page. In HTML 4.01, <code>id</code> and <code>name</code> could be used simultaneously on a <code><a></code> element as long as they have identical values. + <div class="note"> + <p><strong>Usage note:</strong> This attribute is obsolete in HTML5, use the <a href="/en-US/docs/HTML/Global_attributes#attr-id">global attribute <code>id</code></a> instead.</p> + </div> + </dd> + <dt>{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>This attribute specified a reverse link, the inverse relationship of the <strong>rel</strong> attribute. It was deprecated for being very confusing.</dd> + <dt>{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>This attribute was used to define a region for hyperlinks to create an image map. The values are <code>circle</code>, <code>default</code>, <code>polygon</code>, and <code>rect</code>. The format of the <strong>coords</strong> attribute depends on the value of shape. For <code>circle</code>, the value is <code>x,y,r</code> where <code>x</code> and <code>y</code> are the pixel coordinates for the center of the circle and <code>r</code> is the radius value in pixels. For <code>rect</code>, the <strong>coords</strong> attribute should be <code>x,y,w,h</code>. The <code>x,y</code> values define the upper-left-hand corner of the rectangle, while <code>w</code> and <code>h</code> define the width and height respectively. A value of <code>polygon</code> for <strong>shape</strong> requires <code>x1,y1,x2,y2,...</code> values for <strong>coords</strong>. Each of the <code>x,y</code> pairs defines a point in the polygon, with successive points being joined by straight lines and the last point joined to the first. The value <code>default</code> for shape requires that the entire enclosed area, typically an image, be used. + <div class="note"><strong>Note:</strong> Use the <a href="/en-US/docs/Web/HTML/Element/img#attr-usemap"><code>usemap</code> attribute</a> for the {{HTMLElement("img")}} element and the associated {{HTMLElement("map")}} element to define hotspots instead of the <code>shape</code> attribute.</div> + </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Linking_to_an_external_location">Linking to an external location</h3> + +<pre class="brush: html"><!-- anchor linking to external file --> +<a href="https://www.mozilla.com/"> +External Link +</a> +</pre> + +<h4 id="Result">Result</h4> + +<p><a class="external" href="https://www.mozilla.com/">External Link</a></p> + +<h3 id="Linking_to_another_section_on_the_same_page">Linking to another section on the same page</h3> + +<pre class="brush: html"><!-- links to element on this page with id="attr-href" --> +<a href="#attr-href"> +Description of Same-Page Links +</a> +</pre> + +<h4 id="Result_2">Result</h4> + +<p><a href="#attr-href">Description of Same Page Links</a></p> + +<h3 id="Creating_a_clickable_image">Creating a clickable image</h3> + +<p>This example uses an image to link to the MDN home page. The home page will open in a new browsing context, that is, a new page or a new tab.</p> + +<pre class="brush: html"><a href="https://developer.mozilla.org/en-US/" target="_blank"> + <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" + alt="MDN logo" /> +</a> +</pre> + +<h4 id="Result_3">Result</h4> + +<figure> +<p>{{EmbedLiveSample("Creating_a_clickable_image", "320", "64")}}</p> +</figure> + +<h3 id="Creating_an_email_link">Creating an email link</h3> + +<p>It's common to create links that open in the user's email program to allow them to send a new message. This is done with a <code>mailto:</code> link. Here's a simple example:</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a></pre> + +<h4 id="Result_4">Result</h4> + +<p><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a></p> + +<p>For additional details about the <code>mailto</code> URL scheme, such as including the subject, body, or other predetermined content, see <a href="/en-US/docs/Web/Guide/HTML/Email_links">Email links</a> or {{RFC(6068)}}.</p> + +<h3 id="Creating_a_phone_link">Creating a phone link</h3> + +<p>Offering phone links is helpful for users viewing web documents and laptops connected to phones.</p> + +<pre class="brush: html"><a href="tel:+491570156">+49 157 0156</a></pre> + +<p>For additional details about the <code>tel</code> URL scheme, see {{RFC(3966)}}.</p> + +<h3 id="Using_the_download_attribute_to_save_a_<canvas>_as_a_PNG">Using the <code>download</code> attribute to save a <code><canvas></code> as a PNG</h3> + +<p>If you want to let users download an HTML {{HTMLElement("canvas")}} element as an image, you can create a link with a <code>download</code> attribute and the canvas data as a file URL:</p> + +<pre class="brush: js">var link = document.createElement('a'); +link.textContent = 'download image'; + +link.addEventListener('click', function(ev) { + link.href = canvas.toDataURL(); + link.download = "mypainting.png"; +}, false); + +document.body.appendChild(link);</pre> + +<p>You can see this in action at <a href="https://jsfiddle.net/codepo8/V6ufG/2/">jsfiddle.net/codepo8/V6ufG/2/</a>.</p> + +<h2 id="Notes">Notes</h2> + +<p>HTML 3.2 defines only the <code>name</code>, <code>href</code>, <code>rel</code>, <code>rev</code>, and <code>title</code> attributes.</p> + +<h3 id="Accessibility_recommendations">Accessibility recommendations</h3> + +<p>Anchor tags are often abused with the <code>onclick</code> event to create pseudo-buttons by setting <strong>href</strong> to <code>"#"</code> or <code>"javascript:void(0)"</code> to prevent the page from refreshing. These values cause unexpected behavior when copying/dragging links, opening links in a new tabs/windows, bookmarking, and when JavaScript is still downloading, errors out, or is disabled. This also conveys incorrect semantics to assistive technologies (e.g., screen readers). In these cases, it is recommended to use a {{HTMLElement("button")}} instead. In general you should only use an anchor for navigation using a proper URL. </p> + +<h3 id="Clicking_and_focus">Clicking and focus</h3> + +<p>Whether clicking on an {{HTMLElement("a")}} causes it to become focused varies by browser and OS.</p> + +<table> + <caption>Does clicking on an {{HTMLElement("a")}} give it focus?</caption> + <tbody> + <tr> + <td>Desktop Browsers</td> + <th>Windows 8.1</th> + <th>OS X 10.9</th> + </tr> + <tr> + <th>Firefox 30.0</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: LawnGreen;">Yes</td> + </tr> + <tr> + <th>Chrome ≥39<br> + (<a href="https://code.google.com/p/chromium/issues/detail?id=388666" title="Issue 388666: Focus anchor (A) elements on mousedown">Chromium bug 388666</a>)</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: LawnGreen;">Yes</td> + </tr> + <tr> + <th>Safari 7.0.5</th> + <td style="background-color: silver;">N/A</td> + <td style="background-color: yellow;">Only when it has a <code>tabindex</code></td> + </tr> + <tr> + <th>Internet Explorer 11</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: silver;">N/A</td> + </tr> + <tr> + <th>Presto (Opera 12)</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: LawnGreen;">Yes</td> + </tr> + </tbody> +</table> + +<table> + <caption>Does tapping on an {{HTMLElement("a")}} give it focus?</caption> + <tbody> + <tr> + <td>Mobile Browsers</td> + <th>iOS 7.1.2</th> + <th>Android 4.4.4</th> + </tr> + <tr> + <th>Safari Mobile</th> + <td style="background-color: yellow;">Only when it has a <code>tabindex</code></td> + <td style="background-color: silver;">N/A</td> + </tr> + <tr> + <th>Chrome 35</th> + <td>???</td> + <td style="background-color: yellow;">Only when it has a <code>tabindex</code></td> + </tr> + </tbody> +</table> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Added the <code>referrer</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-a-element', '<a>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-a-element', '<a>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.a")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other elements conveying <a href="/en-US/docs/HTML/Text_level_semantics_conveying_elements">text-level semantics</a>: {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/nl/web/html/element/abbr/index.html b/files/nl/web/html/element/abbr/index.html new file mode 100644 index 0000000000..a13e5cb177 --- /dev/null +++ b/files/nl/web/html/element/abbr/index.html @@ -0,0 +1,150 @@ +--- +title: <abbr> +slug: Web/HTML/Element/abbr +tags: + - Element + - HTML + - HTML tekst-niveau semantiek + - Referentie + - Web + - abbr +translation_of: Web/HTML/Element/abbr +--- +<h2 id="Samenvatting">Samenvatting</h2> + +<p>Het <em>HTML Abbreviation element</em> (<strong><abbr></strong>) geeft de mogelijkheid om een afkorting aan te geven en geeft optioneel de mogelijkheid voor het geven van een volledige omschrijving. Indien het <code>title</code> attribuut wordt opgegeven in het element, hoort deze de volledige omschrijving te bevatten en niets anders.</p> + +<pre class="brush: html"><p>Ik kan <abbr title="Hypertext Markup Language">HTML</abbr></p></pre> + +<p style="margin-top: -1.5em;"><small>Bekijk meer verdiepende voorbeelden in het artikel <em><a href="https://developer.mozilla.org/en-US/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">Hoe markeer je afkortingen om ze te verduidelijken.</a></em></small></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">DOM Interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Inhoud categorieën</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content</td> + </tr> + <tr> + <th scope="row">Toegestaande inhoud</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a></td> + </tr> + <tr> + <th scope="row">Toegstaande parent elementen</th> + <td>Elk element dat <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a> toestaat.</td> + </tr> + </tbody> +</table> + +<h2 id="Attributen">Attributen</h2> + +<p><span style="line-height: 21px;">Dit element bevat alleen de mogelijkheid voor gebruik van de </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale attributen</a><span style="line-height: 21px;">.</span></p> + +<p>Gebruik het {{htmlattrxref("title")}} attribuut om de volledige omschrijving van de afkorting op te geven. Veel user agents geven de inhoud van dit attribuut namelijk weer als een tooltip.</p> + +<div class="note"> +<p><strong>Note: </strong>In talen met grammaticale nummers (vooral talen met meer dan twee nummers, zoals Arabisch) gebruik je hetzelfde in het <code>title </code>attribuut als in het <code><abbr></code> element.</p> +</div> + +<h2 id="Specifications" name="Specifications">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificaties</th> + <th scope="col">Status</th> + <th scope="col">Commentaar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.0</td> + <td>{{CompatGeckoDesktop(1.0)}} [1]</td> + <td>7.0</td> + <td>1.3</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Up to Gecko 1.9.2 (Firefox 3.6), Firefox implemented the {{domxref("HTMLSpanElement")}} interface for this element instead of the {{domxref("HTMLElement")}} interface.</p> + +<h2 id="Standaard_opmaak">Standaard opmaak</h2> + +<p>Het doel van dit element is puur voor het gemak van de auteur en alle browsers geven het standaard inline weer ({{cssxref('display')}}<code>: inline</code>) , toch verschilt de opmaak per browser:</p> + +<ul> + <li>Sommige browsers, zoals Internet Explorer, geven dit element geen andere stijl dan het {{HTMLElement("span")}} element.</li> + <li>Opera, Firefox, en sommige andere browsers geven een stippellijn weer bij de inhoud van het <code><abbr></code> element.</li> + <li>Een aantal andere browsers voegen niet alleen een stippellijn toe, maar veranderen het font ook in kleine blokletters. Om dit te voorkomen kun je aan het CSS {{cssxref('font-variant')}}<code>: none</code> toevoegen.</li> +</ul> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li><a href="/en-US/Learn/HTML/Element/abbr">Gebruik het <abbr> element</a></li> + <li>Andere elementen die op <a href="/en-US/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">tekst-niveau semantiek</a> toepassen: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/nl/web/html/element/b/index.html b/files/nl/web/html/element/b/index.html new file mode 100644 index 0000000000..bc24fbfca1 --- /dev/null +++ b/files/nl/web/html/element/b/index.html @@ -0,0 +1,82 @@ +--- +title: b +slug: Web/HTML/Element/b +translation_of: Web/HTML/Element/b +--- +<h2 id="Samenvatting">Samenvatting</h2> + +<p>Het HTML B-element (<code><b></code>) representeert een stuk tekst dat qua stijl verschilt van gewone tekst, maar zonder dat het enig belang of relevantie toevoegt. Het is gebruikelijk dat het element wordt toegepast om sleutelwoorden in een samenvatting of productnamen in een recensie vetgedrukt weer te geven. Het element voor datzelfde ook gebruikt voor andere tekst die normaal vetgedrukt wordt weergegeven. Een laatste voorbeeld is het gebruik om de eerste zin van een artikel vetgedrukt te laten zien.</p> + +<div class="note"> +<p><strong>Opmerkingen bij het gebruik:</strong></p> + +<ul> + <li>Verwar het <code><b></code> element niet met de elementen {{ HTMLElement("strong") }}, {{ HTMLElement("em") }} of {{ HTMLElement("mark") }}. Het <code><strong></code> element geeft tekst weer met een bepaald <em>belang; </em><code><em></code> legt enige <em>nadruk</em> op de tekst en <code><mark></code> geeft tekst aan met een zekere <em>relevantie</em>. Het <code><b></code> element geeft geen betekenis mee; gebruik het daarom alleen als de andere elementen niet passen.</li> + <li>Gebruik het <code><b></code> element niet om koppen aan te geven; voor dit doel kunt u de elementen {{ HTMLElement("h1") }} tot en met {{ HTMLElement("h6") }} gebruiken.</li> + <li>Houd er rekening mee dat <code><b></code> tags niet <em>per sé</em> vetgedrukt weergegeven hoeven te worden, omdat de stijl kan worden aangepast met stijlbladen.</li> + <li>Het is een goed idee om <code><b></code> tags een <code><strong>class</strong></code> attribuut mee te geven, zodat de stijl van verschillende <code><b></code>-tags in een document kan worden aangepast met stijlbladen zonder de HTML-code te wijzigen. Bijvoorbeeld <code><b class="artikelEersteAlinea"></code> voor de eerste alinea (Engels: paragraph) van een artikel.</li> + <li>Oorspronkelijk was het <code><b></code> element bedoeld om tekst vetgedrukt te maken. Omdat opmaaktags sinds HTML 4 afgekeurd ("deprecated") zijn, is de betekenis van het <code><b></code>-element echter veranderd.</li> +</ul> +</div> + +<h2 id="Gebruikscontext">Gebruikscontext</h2> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">Inhoudscategorieën</a></td> + <td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">Flow content</a>, <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">phrasing content</a></td> + </tr> + <tr> + <td>Toegestane inhoud</td> + <td>Phrasing content</td> + </tr> + <tr> + <td>Weg te laten tags</td> + <td>Geen, zowel de begin- als eindtag zijn verplicht</td> + </tr> + <tr> + <td>Toegestane ouderelementen</td> + <td>Elk element dat phrasing content toestaat</td> + </tr> + <tr> + <td>Normatief document</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-b-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-b-element">HTML5, section 4.6.16</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/present/graphics.html#edef-B" title="http://www.w3.org/TR/REC-html40/present/graphics.html#edef-B">HTML4.01, section 15.2.1</a>)</td> + </tr> + </tbody> +</table> + +<h2 id="Attributen">Attributen</h2> + +<p>Zoals alle andere HTML-elementen heeft dit element de <a href="/nl/HTML/Globale_attributen" title="Element">globale attributen</a>.</p> + +<h2 id="DOM_Interface">DOM Interface</h2> + +<p>Dit element implementeert de <code><a href="/nl/DOM/element" title="nl/DOM/element">HTMLElement</a></code> interface.</p> + +<div class="note"><strong>Opmerking betreffende implementatie: </strong>Tot en met Gecko 1.9.2 implementeert Firefox de <a href="/nl/DOM/span" title="nl/DOM/span"><span style="font-family: Courier New;">HTMLSpanElement</span></a> interface voor dit element.</div> + +<h2 id="Voorbeeld">Voorbeeld</h2> + +<pre class="script"><p> + Dit artikel beschrijft verschillende <b>tekst-niveau</b> elementen. Het verklaart hun gebruik in een <b>HTML-document</b>. +</p> +Sleutelwoorden zijn weergegeven met de standaardopmaak van het &lt;b> element, normaal gesproken is dat vetgedrukt. +</pre> + +<h4 id="Resultaat">Resultaat</h4> + +<p>Dit artikel beschrijft verschillende <strong>tekst-niveau</strong> elementen. Het verklaart hun gebruik in een <strong>HTML-document</strong>.</p> + +<p>Sleutelwoorden zijn weergegeven met de standaardopmaak van het <b> element, normaal gesproken is dat vetgedrukt.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>Others elements conveying <a href="/en/HTML/Text_level_semantics_conveying_elements" title="en/HTML/Text level semantics conveying elements">text-level semantics</a>: {{ HTMLElement("a") }}, {{ HTMLElement("em") }}, {{ HTMLElement("strong") }}, {{ HTMLElement("small") }}, {{ HTMLElement("cite") }}, {{ HTMLElement("q") }}, {{ HTMLElement("dfn") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("time") }}, {{ HTMLElement("code") }}, {{ HTMLElement("var") }}, {{ HTMLElement("samp") }}, {{ HTMLElement("kbd") }}, {{ HTMLElement("sub") }}, {{ HTMLElement("sup") }}, {{ HTMLElement("i") }}, {{ HTMLElement("mark") }}, {{ HTMLElement("ruby") }}, {{ HTMLElement("rp") }}, {{ HTMLElement("rt") }}, {{ HTMLElement("bdo") }}, {{ HTMLElement("span") }}, {{ HTMLElement("br") }}, {{ HTMLElement("wbr") }}.</li> + <li><a class="external" href="http://www.w3.org/International/questions/qa-b-and-i-tags">Using <b> and <i> elements (W3C)</a></li> +</ul> + +<p>{{ languages( { "en": "en/HTML/Element/b", "de": "de/HTML/Element/b", "pl": "pl/HTML/Element/b"} ) }}</p> + +{{HTMLRef}} diff --git a/files/nl/web/html/element/div/index.html b/files/nl/web/html/element/div/index.html new file mode 100644 index 0000000000..74a1240509 --- /dev/null +++ b/files/nl/web/html/element/div/index.html @@ -0,0 +1,146 @@ +--- +title: <div> +slug: Web/HTML/Element/div +tags: + - Element + - HTML + - HTML Flow + - HTML Groep + - Referentie + - Web +translation_of: Web/HTML/Element/div +--- +<p>{{HTMLRef}}</p> + +<p>Het HTML <div> element is een algemene container voor flow content, en heeft geen specifieke betekenis.<br> + Het kan gebruikt worden om elementen te groeperen voor stijl-doeleinden (doormiddel van een <strong>class</strong> of <strong>id</strong>), of omdat ze attribuutwaarden delen, zoals <strong>lang</strong>. Het mag alleen gebruikt worden als er geen alternatief semantisch element is (zoals {{HTMLElement("article")}} of {{HTMLElement("nav")}}).</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLDivElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Attributen</h2> + +<p>Dit element bevat de '<a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>'.</p> + +<p>Het '<strong>align'</strong> attribuut is verouderd; niet meer gebruiken.</p> + +<h2 id="Examples" name="Examples">Voorbeelden</h2> + +<pre class="brush: html"><div> + <p>Een willekeurige tekst hier.</p> +</div> +</pre> + +<h3 id="Result" name="Result">Resultaat</h3> + +<p>Een willekeurige tekst hier.</p> + +<h2 id="Specifications" name="Specifications">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Commentaar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Geen veranderingen sinds laatste snapshot.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><strong>align </strong>verouderd</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibiliteit</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basis support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basis support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Bekijk ook</h2> + +<ul> + <li>Semantische sectie elementen: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li> + <li>{{HTMLElement("span")}} element voor het stijlen van content</li> +</ul> + +<div> </div> diff --git a/files/nl/web/html/element/figcaption/index.html b/files/nl/web/html/element/figcaption/index.html new file mode 100644 index 0000000000..e10953ea78 --- /dev/null +++ b/files/nl/web/html/element/figcaption/index.html @@ -0,0 +1,123 @@ +--- +title: <figcaption> +slug: Web/HTML/Element/figcaption +translation_of: Web/HTML/Element/figcaption +--- +<p>{{HTMLRef}}</p> + +<p>Het <strong>HTML <code><figcaption></code> element</strong> vertegenwoordigt een bijschrift/opschrift of een legende die bij een figure of afbeelding hoort en die de rest van de data omschrijft van het {{HTMLElement("figure")}} element, wat zijn directe voorouder is.</p> + +<p>Dit betekent dat <code><figcaption></code> het eerste of het laatste element kan zijn binnen een {{HTMLElement("figure")}} blok. Ook is het <em>HTML Figcaption Element </em>optioneel. Indien dat niet het geval is dan zal het hoodelement van de figuur geen bijschrift/opschrift hebben.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">I</a>nhoudscategorieën</th> + <td>Geen.</td> + </tr> + <tr> + <th scope="row">Toegestaande inhoud</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Bovenliggende toegestaande elementen</th> + <td>Een {{HTMLElement("figure")}} element; het<code><figcaption></code> element moet het eerste of het laatste child zijn.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributen">Attributen</h2> + +<p><span style="line-height: 21px;">Dit element bevat ook de </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<p>Ga naar de {{HTMLElement("figure")}} pagina voor voorbeelden van <code><figcaption></code>.</p> + +<h2 id="Specifications" name="Specifications">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-figcaption-element', '<figcaption>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figcaption-element', '<figcaption>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>8</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.1 (iOS 5.0)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>Het {{HTMLElement("figure")}} element.</li> +</ul> diff --git a/files/nl/web/html/element/html/index.html b/files/nl/web/html/element/html/index.html new file mode 100644 index 0000000000..131593197a --- /dev/null +++ b/files/nl/web/html/element/html/index.html @@ -0,0 +1,113 @@ +--- +title: <html> +slug: Web/HTML/Element/html +tags: + - Element + - HTML + - HTML root-element + - Naslagwerk + - Reference + - Referentie + - Web +translation_of: Web/HTML/Element/html +--- +<p>{{HTMLRef}}</p> + +<p>Het <strong><code><html></code>-element</strong> representeert de 'root' (het element op het hoogste niveau) van een HTML-document. Er wordt daarom naar verwezen als het <em>root-element</em>. Alle andere elementen moeten nakomelingen zijn van dit element.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td>Geen.</td> + </tr> + <tr> + <th>Permitted content</th> + <td>Een {{HTMLElement("head")}}-element, gevolgd door een {{HTMLElement("body")}}-element.</td> + </tr> + <tr> + <th>Tag omission</th> + <td> + <p>Het beginlabel mag worden weggelaten als het eerste object binnen het <code><html></code>-element geen commentaar is.<br> + Het eindlabel mag worden weggelaten als het <code><html></code>-element niet direct wordt gevolgd door commentaar, en als het een {{HTMLElement("body")}}-element bevat dat niet leeg is of waarvan het beginlabel aanwezig is.</p> + </td> + </tr> + <tr> + <th>Permitted parents</th> + <td>Als het root-element van een document, of waar een fragment van een subdocument is toegestaan in een samengesteld document.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Geen.</td> + </tr> + <tr> + <th>DOM interface</th> + <td>{{domxref("HTMLHtmlElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributen">Attributen</h2> + +<p>Dit element kan <a href="/en-US/docs/Web/HTML/Global_attributes">algemene attributen</a> bevatten.</p> + +<dl> + <dt>{{htmlattrdef("manifest")}} {{obsolete_inline}}</dt> + <dd>Specificeert de URI van een bronnenmanifest die bronnen aanduidt die lokaal moeten worden gecacht. Zie <a href="/en-US/docs/Web/HTML/Using_the_application_cache">De application cache gebruiken</a> voor details.</dd> + <dt>{{htmlattrdef("version")}} {{obsolete_inline}}</dt> + <dd>Specificeert de versie van de {{glossary("DTD", "documenttype-definitie")}} van HTML die het huidige document bestuurt. Dit attribuut is niet nodig, omdat het overbodig is naast de versieinformatie in de verklaring van het documenttype.</dd> + <dt>{{htmlattrdef("xmlns")}} </dt> + <dd>Specificeert de Namespace van XML in het document. De standaardwaarde is <code>"http://www.w3.org/1999/xhtml"</code>. Dit is vereist in documenten die worden verwerkt door XML-vewerkers, en is optioneel in text/html-documenten.</dd> +</dl> + +<h2 id="Voorbeeld">Voorbeeld</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head>...</head> + <body>...</body> +</html> +</pre> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Commentaar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Toegevoegde ondersteuning voor het <code>manifest</code>-attribuut (later afgeschaft).<br> + Verouderd in het <code>version</code>-attribuut.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '<html>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Verouderd in het <code>version</code>-attribuut.</td> + </tr> + </tbody> +</table> + +<h2 id="Browsercompatibiliteit">Browsercompatibiliteit</h2> + +<div class="hidden">De compatibiliteitstabel op deze pagina is gegenereeerd met gestructureerde gegevens. Als u wilt bijdragen aan de gegevens, ga dan naar <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and stuur ons een pull request.</div> + +<p>{{Compat("html.elements.html")}}</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>Het element op het hoogste niveau in MathML: {{MathMLElement("math")}}</li> + <li>Het element op het hoogste niveau in SVG: {{SVGElement("svg")}}</li> +</ul> diff --git a/files/nl/web/html/element/index.html b/files/nl/web/html/element/index.html new file mode 100644 index 0000000000..f9d4a515c8 --- /dev/null +++ b/files/nl/web/html/element/index.html @@ -0,0 +1,110 @@ +--- +title: Element +slug: Web/HTML/Element +tags: + - Element + - HTML + - HTML root-element + - Naslagwerk + - Referentie + - Web +translation_of: Web/HTML/Element +--- +<p> </p> + +<p>{{HTMLSidebar("Elements")}}<br> + Deze pagina geeft alle {{Glossary("HTML")}}-{{Glossary("Element","elementen")}} weer. Ze zijn gegroepeerd op functie om u te helpen met te vinden wat u zoekt.</p> + +<div class="note"> +<p>Bekijk <a href="/en-US/docs/Web/Guide/HTML/Introduction#Elements_%E2%80%94_the_basic_building_blocks">de sectie over elementen in het artikel Een inleiding op HTML</a> voor meer informatie over de basis van HTML-elementen en -attributen.</p> +</div> + +<h2 id="Hoofdelement">Hoofdelement</h2> + +<p>{{HTMLRefTable("HTML Root Element")}}</p> + +<h2 id="Document-metadata">Document-metadata</h2> + +<p>Metadata bevat informatie over de pagina, zoals stijlen, scripts, en gegevens om software ({{Glossary("zoekmachine", "zoekmachines")}}, {{Glossary("Browser","browsers")}}, etc.) te helpen de pagina te gebruiken en renderen. Metadata voor stijlen en script kunnen worden gedefinieerd in de pagina of kunnen verwijzen naar een ander bestand dat die informatie bevat.</p> + +<p>{{HTMLRefTable("HTML Document Metadata")}}</p> + +<h2 id="Hoofdelement_voor_segmentatie">Hoofdelement voor segmentatie</h2> + +<p>{{HTMLRefTable("Sectioning Root Element")}}</p> + +<h2 id="Inhoud_segmenteren">Inhoud segmenteren</h2> + +<p>Segmentatie-elementen zorgen ervoor dat u de inhoud van het document kunt indelen in logische stukjes. Gebruik de segmentatie-elementen om een uitgebreid stramien te maken voor uw pagina-inhoud, met bijvoorbeeld navigatie in de header en footer, en elementen die de segmenten van de inhoud identificeren.</p> + +<p>{{HTMLRefTable("HTML Sections")}}</p> + +<h2 id="Tekstinhoud">Tekstinhoud</h2> + +<p>Gebruik HTML-elementen voor tekstinhoud om blokken of segmenten van inhoud te organiseren tussen de openings- en sluitingstags van het {{HTMLElement("body")}}-element. Deze elementen identificeren het doel en de structuur van die inhoud, wat belangrijk is voor {{Glossary("toegankelijkheid")}} en {{Glossary("SEO")}}.</p> + +<p>{{HTMLRefTable("HTML Grouping Content")}}</p> + +<h2 id="Inline_tekstsemantiek">Inline tekstsemantiek</h2> + +<p>De inline tekstsemantiek kan worden gebruikt om de betekenis, structuur of stijl van een woord, regel of een willekeurig stuk te tekst te definiëren.</p> + +<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p> + +<h2 id="Afbeeldingen_en_multimedia">Afbeeldingen en multimedia</h2> + +<p>HTML ondersteund verschillende multimediabronnen, zoals afbeeldingen, audio en video.</p> + +<p>{{HTMLRefTable("multimedia")}}</p> + +<h2 id="Ingebedde_inhoud">Ingebedde inhoud</h2> + +<p>HTML kan naast normale multimediainhoud ook verschillende andere soorten inhoud bevatten, zelfs als deze inhoud niet altijd even interactief is.</p> + +<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> + +<h2 id="Scripten">Scripten</h2> + +<p>HTML ondersteunt het gebruik van scripttalen om dynamische inhoud en webapplicaties te maken, waarbij JavaScript de meest bekende is. Sommige elementen ondersteunen deze mogelijkheid.</p> + +<p>{{HTMLRefTable("HTML Scripting")}}</p> + +<h2 id="Bewerkingen_afbakenen">Bewerkingen afbakenen</h2> + +<p>Deze elementen geven u de mogelijkheid om aan te geven dat bepaalde stukken van de tekst zijn aangepast.</p> + +<p>{{HTMLRefTable("HTML Edits")}}</p> + +<h2 id="Tabelinhoud">Tabelinhoud</h2> + +<p>Deze elementen worden gebruikt om tabelgegevens te maken en verwerken.</p> + +<p>{{HTMLRefTable("HTML tabular data")}}</p> + +<h2 id="Formulieren">Formulieren</h2> + +<p>HTML versterkt een aantal elementen dat kan samen kan worden gebruikt om formulieren te maken, die een gebruiker kan invullen en kan opsturen naar de website of applicatie. In de <a href="/nl/docs/Web/Guide/HTML/Forms">Gids voor HTML-formulieren</a> staat veel meer informatie over formulieren.</p> + +<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p> + +<h2 id="Interactieve_elementen">Interactieve elementen</h2> + +<p>HTML biedt een aantal elementen waarmee objecten voor een interactieve gebruikersomgeving kunnen worden gemaakt.</p> + +<p>{{HTMLRefTable("HTML interactive elements")}}</p> + +<h2 id="Web_Components">Web Components</h2> + +<p>Web Components is een HTML-gerelateerde technologie, die het mogelijk maakt om aangepaste elementen te maken en gebruiken alsof het gewone HTML is. Daarnaast kunt u aangepaste versies maken van standaard HTML-elementen.</p> + +<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p> + +<h2 id="Verouderde_en_afgeschafte_elementen">Verouderde en afgeschafte elementen</h2> + +<div class="warning"> +<p><strong>Waarschuwing:</strong> Dit zijn oude HTML-elementen die zijn afgeschaft zijn en niet horen te worden gebruikt. <strong>U moet ze nooit gebruiken in nieuwe projecten, en u moet ze zo snel mogelijk vervangen in oude projecten.</strong> Ze worden hier alleen genoemd voor informatiedoeleinden.</p> +</div> + +<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> + +<p> </p> diff --git a/files/nl/web/html/element/marquee/index.html b/files/nl/web/html/element/marquee/index.html new file mode 100644 index 0000000000..5c91b2f377 --- /dev/null +++ b/files/nl/web/html/element/marquee/index.html @@ -0,0 +1,203 @@ +--- +title: <marquee> +slug: Web/HTML/Element/marquee +tags: + - Element + - HTML + - Referentie + - lichtkrant + - verouderd +translation_of: Web/HTML/Element/marquee +--- +<div>{{HTMLRef}}</div> + +<div>{{obsolete_header}}</div> + +<h2 id="Summary" name="Summary">Samenvatting</h2> + +<p>Het HTML <code><marquee></code> element wordt gebruikt voor het invoegen van een scrollende lichtkrant met tekst.</p> + +<h2 id="Eigenschappen">Eigenschappen</h2> + +<dl> + <dt>{{htmlattrdef("behavior")}}</dt> + <dd>Bepaald hoe de tekst scrollt in de lichtkrant. Mogelijke waarden zijn: <code>scroll</code>, <code>slide</code> en <code>alternate</code>. Als er geen waarde is gespecificeerd, is de standaardwaarde <code>scroll</code>.</dd> + <dt>{{htmlattrdef("bgcolor")}}</dt> + <dd>Stelt de achtergrondkleur in door middel van de kleurnaam of hexadecimale waarde.</dd> + <dt>{{htmlattrdef("direction")}}</dt> + <dd>Stelt de richting van het scrollen in binnen de lichtkrant. Mogelijke waarden zijn <code>left</code>, <code>right</code>, <code>up</code> en <code>down</code>. Als er geen waarde is gespecificeerd, is de standaardwaarde <code>left</code>.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Stelt de hoogte in pixels of percentage in.</dd> + <dt>{{htmlattrdef("hspace")}}</dt> + <dd>Stelt de horizontale marge in.</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>Stelt het aantal keer dat de lichtkrant scrollt in. Als er geen waarde is gespecificeerd, is de standaardwaarde −1, wat betekent dat de lichtkrant oneindig zal scrollen.</dd> + <dt>{{htmlattrdef("scrollamount")}}</dt> + <dd>Stelt de hoeveelheid scrolls in op elke interval in pixels. De standaardwaarde is 6.</dd> + <dt>{{htmlattrdef("scrolldelay")}}</dt> + <dd> + <p>Stelt de interval tussen elke scroll beweging in, in milliseconden. De standaardwaarde is 85. Merk op dat elke waarde kleiner dan 60 wordt genegeerd en de waarde 60 wordt in plaats daarvan gebruikt, tenzij <code>truespeed </code>is gespecificeerd.</p> + </dd> + <dt>{{htmlattrdef("truespeed")}}</dt> + <dd>Normaalgesproken worden <code>scrolldelay </code>waarden lager dan 60 genegeerd. Als <code>truespeed </code>wordt gespecificeerd, worden deze waarden niet genegeerd.</dd> + <dt>{{htmlattrdef("vspace")}}</dt> + <dd>Stelt de verticale marge in pixels of percentage in.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Stelt de breedte in pixels of percentage in.</dd> +</dl> + +<h2 id="Event_handlers" name="Event_handlers">Event handlers</h2> + +<dl> + <dt>{{htmlattrdef("onbounce")}}</dt> + <dd>Wordt uitgevoerd wanneer de lichtkrant het einde van het scrollgebied bij <code>loop </code>heeft bereikt. Het kan alleen worden uitgevoerd wanneer <code>behavior </code>is ingesteld als <code>alternate</code>.</dd> + <dt>{{htmlattrdef("onfinish")}}</dt> + <dd>Wordt uitgevoerd wanneer de lichtkrant de hoeveelheid scrolls die is ingesteld bij <code>loop</code>, zijn voltooid. Het kan alleen geactiveerd wanneer het <code>loop </code>element is ingesteld als een getal dat groter is dan 0.</dd> + <dt>{{htmlattrdef("onstart")}}</dt> + <dd>Wordt uitgevoerd wanneer de lichtkrant start met scrollen.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<dl> + <dt>start</dt> + <dd>Start het scrollen van de lichtkrant.</dd> + <dt>stop</dt> + <dd>Stopt het scrollen van de lichtkrant.</dd> +</dl> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<pre class="brush: html"><marquee>Deze tekst zal van links naar rechts scrollen.</marquee> + +<marquee direction="up">Deze tekst zal van beneden naar boven scrollen.</marquee> + +<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> + <marquee behavior="alternate"> + Deze tekst zal stuiteren. + </marquee> +</marquee></pre> + +<p>{{EmbedLiveSample("Voorbeelden", 600, 450)}}</p> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Opmerking</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'obsolete.html#the-marquee-element-2', '<marquee>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Maak het verouderd in het voordeel van CSS, maar definiëer het verwachte gedrag, voor terugwerkende compatibiliteit.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'obsolete.html#the-marquee-element-0', '<marquee>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Maak het verouderd in het voordeel van CSS, maar definiëer het verwachte gedrag, voor terugwerkende compatibiliteit.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Kenmerk</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2.0</td> + <td>7.2</td> + <td>1.2</td> + </tr> + <tr> + <td><code>truespeed</code> element</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>4.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>hspace/vspace</code> element</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>loop</code> element</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Kenmerk</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobiel</th> + <th>Opera Mobiel</th> + <th>Safari Mobiel</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>truespeed</code> element</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hspace/vspace</code> element</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>loop</code> element</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/nl/web/html/element/p/index.html b/files/nl/web/html/element/p/index.html new file mode 100644 index 0000000000..cfeb4103bf --- /dev/null +++ b/files/nl/web/html/element/p/index.html @@ -0,0 +1,113 @@ +--- +title: <p> +slug: Web/HTML/Element/p +tags: + - Element + - HTML + - HTML inhoud groeperen + - Naslagwerk + - Web +translation_of: Web/HTML/Element/p +--- +<div>{{HTMLRef}}</div> + +<p>Het<strong> <code><p></code>-element</strong> <strong>van HTML </strong>vertegenwoordigt een paragraaf van tekst. Paragrafen worden meestal vertegenwoordigd in visuele media als blokken tekst, die worden gescheiden van aangrenzende blokken door verticale witruimte en/of inspringing op de eerste regel. Paragrafen zijn <a href="/docs/HTML/Block-level_elements">elementen op blokniveau</a>.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/nl/docs/Web/HTML/Content_categories">Inhoudscategorieën</a></th> + <td><a href="/nl/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, waarneembare inhoud.</td> + </tr> + <tr> + <th scope="row">Toegestane inhoud</th> + <td><a href="/nl/docs/Web/HTML/Content_categories#Phrasing_content">Verwoorde inhoud</a>.</td> + </tr> + <tr> + <th scope="row">Tags weglaten</th> + <td>De begintag is verplicht. De eindtag mag worden weggelaten als het {{HTMLElement("p")}} element onmiddelijk wordt gevolgd door een {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}} of een ander {{HTMLElement("p")}}-element, of als er geen andere inhoud meer in het ouderelement is en het ouderelement geen {{HTMLElement("a")}}-element is.</td> + </tr> + <tr> + <th scope="row">Toegestane ouderelementen</th> + <td>Elk element dat <a href="/docs/Web/HTML/Content_categories#Flow_content">stromende inhoud</a> accepteert.</td> + </tr> + <tr> + <th scope="row">Toegestane ARIA-rollen</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM-interface</th> + <td>{{domxref("HTMLParagraphElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributen">Attributen</h2> + +<p>Dit element omvat de <a href="/docs/Web/HTML/Global_attributes">globale attributen</a>.</p> + +<div class="note"> +<p><strong>Opmerking:</strong> Het <code>align</code>-attribuut op <code><p></code>-tags is verouderd en moet niet meer worden gebruikt.</p> +</div> + +<h2 id="Voorbeeld">Voorbeeld</h2> + +<pre class="brush: html"><p>Dit is de eerste paragraaf met tekst. Dit is de eerste paragraaf met tekst. + Dit is de eerste paragraaf met tekst. Dit is de eerste paragraaf met tekst.</p> + +<p>Dit is de tweede paragraaf met tekst. Dit is de tweede paragraaf met tekst. + Dit is de tweede paragraaf met tekst. Dit is de tweede paragraaf met tekst.</p></pre> + +<div><span style="line-height: 1.5;">De bovenstaande HTML geeft deze uitvoer:</span></div> + +<div> </div> + +<p>Dit is de eerste paragraaf met tekst. Dit is de eerste paragraaf met tekst. Dit is de eerste paragraaf met tekst. Dit is de eerste paragraaf met tekst.</p> + +<p>Dit is de tweede paragraaf met tekst. Dit is de tweede paragraaf met tekst. Dit is de tweede paragraaf met tekst. Dit is de tweede paragraaf met tekst.</p> + +<h2 id="Opmerkingen">Opmerkingen</h2> + +<p>Om de afstanden tussen paragrafen aan te passen gebruikt u de <a href="/en-US/docs/Web/CSS">CSS</a>-eigenschap {{cssxref("margin")}}. <strong>Plaats geen</strong> lege alineaelementen of {{HTMLElement("br")}} ertussen.</p> + +<h2 id="Specifications" name="Specifications">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Opmerking</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Geen veranderingen sinds het laatste W2C-snapshot {{SpecName("HTML5 W3C")}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><code>align</code>-attribuut is verouderd.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '<p>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Aanvankelijke definitie</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browsercompatibiliteit</h2> + +<div class="hidden">De compatibiliteitstabel in deze pagina is gegenereerd door middel van gestructureerde data. Als u wil bijdragen aan de data, bekijk dan <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> en stuur ons een pull request.</div> + +<p>{{Compat("html.elements.p")}}</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>{{HTMLElement("hr")}}</li> + <li>{{HTMLElement("br")}}</li> +</ul> |