Working with HTML Documents

HTML elements are the building blocks of an HTML document. An HTML element is defined by a start tag, some content, and an end tag. For example, the following code creates an HTML paragraph element.

Refer to the following code snippet.

1
<p>This is a basic HTML5 page.</p>

Let's explore the code.

1. The opening tag<p>: This indicates where the element starts. This consists of the name of the element, wrapped in opening and closing angle brackets.
2. The content: This indicates the text in this case, "This is a basic HTML5 page."
3. The closing tag</p>: This looks exactly like the opening tag except for the extra slash before the name of the element. This tag goes at the end of the element.

The opening tag, the content, and the closing tag together make up the element.

HTML elements can be nested inside each other to create more complex structures. Let's take a look at the example. 

1
<p> We <b> deliver </b> local Food in a radius of <b> 5km </b> ! </p>

The <b> HTML element is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance.

This is the output of the code. 

It's important to note that when using nesting elements, the inner elements must be closed before the outer elements. In the example above, the "b" elements are closed before the "p" element.

In HTML5, elements can be categorized as either block-level, inline, or inline-block elements.

1234
<ul>
<li>These are block level Elements</li>
<li>We use an li Element in a ul Element to create a list</li> 
</ul>

This is the output of the code. 

1
<p> Today is <em>Burger</em> <b>Day.</b>

This is the output of the code. 

Not all elements follow the pattern with an opening tag, the content, and a closing tag. Some elements only need a single tag, which is often used to embed something on a page. The <img> element, as an example, is one of these empty elements, which is used to embed an image file. It is self-closing and does not have a closing tag.

Here is an example from an empty tag to embed an Image:

1
<img src="Beach.jpg" alt="Sample Text ">

An empty element is an element that cannot have any child nodes.

Attributes are used to provide additional information about an HTML element and modify its behavior or appearance. They are added to the opening tag of an element.

Attributes should possess the following:

• A space between the element name and the attribute name - for an element with more than one attribute, the attributes should also be separated by spaces
• The attribute name, followed by an equal sign
• An attribute value, wrapped with opening and closing quote marks

In this example, we use the <a> element to embed a link. The href attribute from the <a> element is used to specify the URL of a hyperlink that links to another web page or resource.

1
<a href="https://www.learning.sap.com">Free SAP Training</a>

This is the output of the code. 

When the user clicks on the link, the URL that is in the href attribute opens.

When we deal with CSS later, we can use selectors to determine to which elements the respective CSS rule should apply. This can be done, for example, with the help of the attribute ID. The HTML id attribute is used to specify a unique id for an HTML element.

HTML attributes can be added to HTML elements to provide additional information, structure, or functionality to a web page. Attributes are defined by a name-value pair, where the name of the attribute indicates the type of information it provides, and the value contains the specific information.

Here are some commonly used HTML attributes:

• id: Used to uniquely identify an HTML element on a web page.

• class: Used to group HTML elements together and apply CSS styles to them.

• href: Used to specify the URL of a link.

• src: Used to specify the source URL of an image, audio, or video file.

• alt: Used to provide a text alternative for images that cannot be displayed.

• title: Used to provide additional information about an HTML element when the user hovers over it.

• style: Used to apply inline CSS styles to an HTML element.

• data-*: Used to store custom data attributes for an HTML element, which can be accessed using JavaScript.

Here's an example of how HTML attributes can be used to create a link with an image.

123
<a href="https://www.learning.sap.com">
<img src="image.jpg" alt="Sample Image" title="Click here to go to learning.sap.com">
</a>

In this example, the href attribute is used to specify the URL of the link, while the src, alt, and title attributes are used to specify the source of the image, provide a text alternative for the image, and provide additional information when the user hovers over the image.

Overall, HTML attributes are an important part of creating structured and functional web pages, allowing web developers to add additional information and functionality to HTML elements.

Objects and nodes represent web pages, such as HTML, XHTML, and XML in a programming interface known as the Document Object Model (DOM). This interface allows programs to change the content, design, and structure of a document. Developers can change these features on a web page using scripting languages, such as JavaScript.

When an HTML document is loaded into a web browser, the browser creates a corresponding DOM representation of the document.

Refer to the following code snippet.

1234567891011
<!DOCTYPE html>
<html>
  <head>
    <title>Document Object Model</title>
  </head>
<body>
  <h1>DOM Example</h1>
  <p id="demo">This is a demonstration of the DOM.</p>
  <button onclick="changeText()">Click me!</button>
</body>
</html>

The DOM allows developers to create web pages that are dynamic, interactive, and respond to user actions in real time. This standard was defined by the World Wide Web Consortium (W3C) and has been integrated into all current web browser technologies.

Here are some of the key features of the HTML DOM:

• Dynamic content: With the DOM, developers can create dynamic and interactive web pages that respond to user input or other events. JavaScript code can be used to manipulate the contents of the page and update it in real time, without needing to reload the page.

• Separation of structure and style: The DOM allows for a clear separation of the structure of the HTML document and its presentation through CSS. This makes it easier to maintain and update the code because changes can be made to the style without affecting the structure, and vice versa.

• Accessibility: The DOM allows for the creation of accessible web pages. It provides a way to add alternative text for images and other media and to create semantic tags that make it easier for screen readers and other assistive technologies to navigate the page.

• Cross-browser compatibility: The DOM provides a standardized way to interact with HTML documents across different web browsers and platforms. This means that developers can write code that will work on multiple browsers without needing to worry about browser-specific quirks or inconsistencies.

• Interoperability: The DOM is not specific to HTML, and can be used with other markup languages, such as XML. This allows for greater interoperability between different web technologies and platforms.

The encouragement of web standards and best practices has greatly improved the stability and security of the web, which is directly related to the standardization of the DOM. This standard has been widely adopted by various software platforms and web browsers, giving developers the ability to write code that interacts consistently with the DOM, regardless of platform or device.

Several elements are coordinated to create the organization and content of a web page in an HTML5 document.

<!DOCTYPE html>, the declaration that the HTML document must begin with to inform the browser that it is HTML5, follows several required elements, such as the <html>, <head>, and <body> tags.

Here is a sample of a basic HTML5 document.

123456789101112
<!DOCTYPE html>
<html>
<head>
  <title>My HTML5 Document</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h1>Welcome to my HTML5 Document!</h1>
  <p>This is a paragraph of text in my document.</p>
</body>
</html>

Let's break down this example.

• <!DOCTYPE html> declares that this is an HTML5 document.

• <html> is the root element of the document, and contains all other elements.

• <head> contains information about the document, such as the document title and metadata.

• <title> specifies the title of the document, which is displayed in the browser's title bar.

• <meta charset="UTF-8"> specifies the character encoding used in the document.

• <meta name="viewport" content="width=device-width, initial-scale=1.0"> specifies the viewport settings for the document, which affects how the document is displayed on different devices.

• <body> contains the visible content of the document.

• <h1> is a heading element, and specifies the main heading of the document.

• <p> is a paragraph element, and contains a paragraph of text.

This is the output.

You can see the title in the browser tab bar and text.

The following video explains each element of an HTML document.

The <a> (anchor) element is an important part of the web. It allows users to move between different websites and web pages via hyperlinks formulated with HTML.

Here's an example of how to create a hyperlink.

1
<a href="https://www.learning.sap.com">Click here to for Free SAP Training</a>

In this example, the href attribute is used to specify the destination URL of the hyperlink, which in this case is https://www.learning.sap.com. The text "Click here to for Free SAP Training" is displayed as the clickable text of the hyperlink.

This is the output.

You can also use relative URLs to create hyperlinks to other pages or resources on your website. For example:

1
<a href="JavaScript.html">JavaScript Chapter </a>

Overall, hyperlinks are a critical part of creating usable and accessible web pages, and can be easily created, styled, and interacted with using HTML and CSS.