HTML (or HyperText Markup Language) is the basic structure for web design and uses tags to identify and present content onto webpages. Similar to cataloguing and MARC21, HTML tells the web browser how to display data onto webpages. HTML is also used to describe the structure of a webpage, through nesting and hierarchies.
HTML revolves around elements, and an element is defined by a start tag, some content, and an end tag:
<p>This is an HTML element</p>
In this example we have an opening paragraph tag (<p>), content (This is an HTML element), and a closing tag (</p>).
Some HTML elements have no content (like the <br> element). These elements are called empty elements, or self-closing tags, and they do not use a closing tag.
HTML elements can also have elements within an element, which is known as nesting:
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
In this example we have three HTML elements, two of which are nested within the body element. Nesting can also occur in the same line of HTML code:
<button><a href="https://guides.hsict.library.utoronto.ca/SMH/Find/Journals">Journals</a></button>
In this example the link element is nested within the button element.
HTML elements can be used throughout LibGuides in the HTML editors, however HTML follows a hierarchical (or family) structure, for example:
<body> (grandparent level)
<div> (parent level)
<h1>It's div's child and body's grandchild</h1> (children level)
<h2>It's h1's sibling</h2> (children level)
</div>
</body>
This structure informs the web browser how to read the code and present it on the webpage.
HTML Tags are like keywords, or MARC21 field codes, they inform the web browser on what the content is and how to display it. HTML Attributes provide additional information to the HTML element and always exist within an opening HTML tag.
<a href="https://guides.hsict.library.utoronto.ca/SMH/Find/Journals">Journals</a>
In this example we are using the "HREF" attribute, which specifies the URL of the page the link goes to, and it is a part of the opening tag for a link (<a>).
<img src="https://libapps-ca.s3.amazonaws.com/accounts/128319/images/michael.png">
In this example we are using the SRC attribute, which specifies the URL of the media file, and it is a part of the opening tag for image (<img>)
You can use the Image Manager in LibGuides to turn any image into a link that can be used in HTML
