Html/tutorials/html5/element, tag and attribute

HTML files consist of the normal text that the visitor of the web page will see later on. Hinzu kommt der Code, der den Text semantisch (nach seiner Bedeutung) markiert, also definiert, was beispielsweise ein Absatz oder eine uberschrift ist.

Dieses Markup uses plain text, i.e. characters from the normal character set and no invisible control characters like word processors do.

Inhaltsverzeichnis

Elemente und Tags [ Bearbeiten ]

Der Inhalt von HTML-Dateien wird mit HTML elements excellent. HTML elements are represented by so-called Tags (English for Etiketten) markiert. Fast alle HTML-Elemente werden durch ein einleitendes und ein abschliebendes Tag markiert. The content in between is the "scope" of the corresponding element. Tags are noted in angle brackets.

Nesting of elements [ edit]

Elements can be nested inside each other. In this way, a hierarchical structure is created. Komplexere HTML-Dateien enthalten sehr viele Verschachtelungen. That’s why experts also talk about structured markup.

    <em> HTML</em> – the language of the web

alleinstehende Elemente [ Bearbeiten ]

There are also some elements with "Standalone tags". These are empty elements, which have no content and therefore consist of only one tag instead of start and end tag.

Since the img element as a standalone tag has no content, further information, such as which image to load and display, must be noted in attributes contained in the tag.

Digression: XHTML [ edit]

optional tags [ edit]

There are several in HTML optionale Tags, die im Markup weggelassen werden konnen. They are then automatically inserted by the browser when parsing.

Elements with optional closing tag [ edit ]

For some elements, z. B. p or li , you may leave out the closing tag. Browsers will add the closing tag. Allerdings muss das nicht immer mit der Intention des Autors ubereinstimmen.

elements are mandatory, tags are optional [ edit ]

Die Elemente html , head und body sind auch bei HTML Pflicht und werden, wenn der HTML-Autor eines von ihnen weggelassen hat, vom Browser erganzt. By the way, this is not a new feature of HTML5, but was true for earlier HTML versions as well.

Optional-tags.png

Of course, they are not automatically written into the HTML file, but the browser adds them to its internal representation of the DOM. That is, you can refer to these elements when writing CSS or JavaScript, even if they were omitted when writing the associated HTML file.

You also don’t have to follow a consistent line when writing and omitting optional tags. So it is technically correct to use z. B. <html> to omit it (d. h. by the browser), but still</html> to be added. But this is unnecessarily confusing and should be avoided.

HTML5: Restrictions on HTML comments [ edit ]

The W3C HTML5 specification indicates that the opening<html> -tag can be omitted only if the first thing in the html element is, no HTML comment and that the closing</html> -tag can be omitted if the html element is not directly followed by an HTML comment [1]. (The same applies to the head and body elements).)

These restrictions may be confusing, as they are worded a bit misleadingly. It is not forbidden to use z. B. to write the following:

You can easily convince yourself of the formal correctness of the above code with a validator.

The specification here refers to the internal representation of the browser. Omitting tags like<html> is allowed because the browser can normally determine without doubt where the html element begins. If the doctype is immediately followed by a<head> -tag, then the browser knows – because at this point the head element is not allowed to follow – that it must first have read the<html> tag -tag must be added.

The only small problem here are HTML comments, which can be inserted anywhere in the structure. Since the HTML comment at this point:

is quite correct, the browser will never put the<html> -add tag. So if for some reason it is important for the HTML author that the HTML comment is the first thing in the browser’s internal representation of the html -element, then he has to change the<html> -tag, otherwise the HTML comment will land before the html element.

Likewise, the browser will always position the comment at the end of the HTML file within the body element. Again, if you want the comment to be placed at the end of an HTML file outside the body element, then must be one should note the</body tag.

The same applies to the other optional tags that characterize the basic structure of an HTML document.

best practice[ edit]

The traditional recommendation, which SELFHTML has also always advocated, is to write down all optional tags. The advantage is, provided one writes valid HTML, that the HTML code then always matches the browser’s internal representation, reducing the likelihood of misunderstandings. Also, of course, you can’t give attributes to an element without an opening tag.

The Google HTML/CSS Style Guide, on the other hand, recommends consistently omitting all optional tags:

This serves a quick overview of the HTML and optimizes it immediately with regard to the file size. On the other hand, it will take some time to implement, because it deviates significantly from what web developers typically learn (like SELFHTML).

Attributes in tags[ edit]

Introductory tags and standalone tags can contain additional information in the form of attributes and associated attribute values. In addition to attributes that can only occur in certain HTML elements, there are also so-called Universal Attributes, which are allowed in all HTML elements.

There are the following types of attributes in HTML elements:

  • attributes with assignment of given values,
    z. B. at<input type="text"> or<input type="number> ,
    an input field for simple text or numbers – only certain values are allowed here.
  • Attributes with free value assignment, but a specific data type or convention is expected,
    z. B. for<input type="number" maxlength="10">
    – an input field in which the user can enter up to 10 characters – here a numeric specification is expected.
  • attributes with free value assignment without further conventions, e.g. B. <p title="statement with caveat"> – any text can be assigned here.

HTML5 requires quotation marks only if in the attribute value" ‘ ` =< > and spaces are included.

  • to be written in camelCase or completely lowercase. So topLeft or topleft instead of top_left
  • but it does not matter (for HTML and CSS) whether the attribute names are written in lower or upper case letters. However, in JavaScript, which is case-sensitive, already.

Digression: SVG [ edit ]

The wiki often has examples of inline SVG in HTML5 documents. Here all SVG attributes are lowercase. However, if you use these code examples in SVG documents, these attributes must be written in an XML-compliant way.

For example, the lowercase viewbox attribute in an SVG document is ignored because it expects the viewBox attribute in case-sensitive notation.

Boolean attributes [ edit]

Boolean attributes can only specify two states: true or false. This means that they are either present (equivalent to the state true) or not (corresponds to the condition false). In XML-compliant notation, an attribute value must be noted, which is why, according to the specification, either the canonical name (i.e., the attribute name itself) is noted in lowercase, or an empty value (see the last two video elements in the following example):

Comments [ edit]

HTML includes the possibility to insert comments at almost any place within an HTML file. These are ignored by the browser, d. h. not displayed.

Comments are z. B. meaningful,

  • to place internal information about author and creation date in a file,
  • to make internal annotations to certain parts of the text or
  • Comment out parts of the document internally during development.

Comments are replaced by the string<!– introduced. This is followed by arbitrarily long comment text or HTML markup, which is not interpreted as HTML.

Comments can be noted anywhere you might note other HTML elements or text. Within the angle brackets of a tag, a comment is not allowed, or. inside the quotes of an attribute value or in a CDATA area, it is treated as normal text content.

In the past, specially marked comments, so-called Conditional Comments, were used by Internet Explorer as browser switches.

Good HTML style [ edit ]

HTML documents marked up in this way are read by the browser and then parsed: the HTML markup is recognized and translated into the document structure, the DOM. Then this is rendered on the screen. In screen readers the process is identical, but the document is not rendered on the screen, but read aloud.

Since browsers that punish faulty HTML pages with a crash would have no chance on the broad market, because they and not the web page creator would be held responsible, the HTML parsers of today’s widespread browsers are rather good-natured creatures that swallow pretty much everything that is put in front of them and make something out of it, mostly even quite what the author of the web page wanted to achieve.

Nevertheless, you should try to stick to established conventions so that your HTML code is clear to you, other developers, and browsers, and easy to maintain for later changes.

Like this post? Please share to your friends:
Leave a Reply

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: