Notes: HTML

HTML is an acronym for Hypertext Markup Language. It is a declarative language that instructs by providing code that tells the browser how to organize and render content. Content may be text, images, video, audio, and other types of media.

Browsers

Browsers interpret HTML. Not all browsers are the same. The chart below from Statista shows that Google Chrome has the most market share, followed by Apple Safari and Microsoft Edge.

The HTML language is always evolving. To find out if the HTML you are using will work in the browsers you support, visit the Caniuse page. In the picture below, Caniuse reports that the HTML table tag element is supported in all browsers.

Containment

The word containment refers to the way in which an HTML element may or may not contain other HTML elements or text. Many elements will include other elements or text.

The examples below show elements that contain text.

<h1>Title at the Top of the Page</h1>

<p>This is a paragraph.</p>

The example below shows an element-ordered list that contains other elements, which are list items.

<ol>

<li>Item 1</li>

<li>Item2</li>

</ol>

In the code below, the figure contains an image and a figure caption. The image element, img, will not contain any other elements. The figure caption, figcaptionelement contains text.

<figure>

<img src="dog.jpg">

<figcaption>This is my dog</figcaption>

</figure>

In the table at the bottom of this page, elements that don't use closing tags will not contain other elements. These elemen are marked "no" for closing.

Block and Inline HTML Elements

Block and Inline HTML concepts are essential in setting up page layout. As CSS is added to a page, knowing which elements are blocked and which are inline will become more critical.

For now, it's helpful to understand that block elements use the entire page width, and therefore, any elements following them will be rendered on the next line. Inline elements will be rendered on the same line.

Images are inline elements. If we want images to be rendered on a line by themselves, we need to contain them in a block element. Here is an example of containing them in a div element.

<div>

<img src="dog.jpg">

</div>

Just because an HTML tag element has a closing tag doesn't make it a block element. For example a span tag contains text that will be rendered on the same line.

<span>This is important text.</span>

Semantic HTML

Just like spoken languages evolve so has HTML. Years ago div and span were used as containers for most web pages. Semantic HTML tag elements were introduced to so that the structure that HTML provides would also have meaning. This is important for accessibility. While it is possible to style a div element to look like a button element, the meaning is not the same. The word "semantic" is defined as "meaning in a language".

Screen readers that read web pages for visually impaired users can take advantage of semantic HTML. For example, if a developer uses an article element instead of a div element, it can inform the user that it is reading an article. Visually, the browser would render the article and element the same, so in that respect, these tags are interchangeable. However, if the developer is thinking about accessibility, then these tags are very different.

HTML Attributes

The HTML language is made up of tags that render elements in the browser. HTML attributes are bits of language markup that supplement the rendered element's behavior and/or look. Attributes are words followed by an equal sign and quoted text or numbers.

In the example below, the images have sources, src, height and width attributes. The source attribute tells the browser where to get the image, and the height and width tell it how to size it on the web page. In this example dog.jpg refers to image files with a name dog.jpg that is in the same directory as the HTML file. The width attribute is set to 400px. A px is a unit of measure that is shorthand for pixel. You can think of a pixel as a unit of light emitted on a computer screen. This means that the width of the image will be rendered as 400 of these units wide. To put this in perspective, a mobile device averages 350 pixels, and a laptop averages about 1920 pixels. The height attribute is set to "auto". This ensures the image won't look funny due to stretching and removing the aspect ratio.

<img src="dog.jpg" width="400px" height="auto">

Here's another example of attributes being used. In this example, an anchor tag renders a clickable link. The href attribute is set to a URL that the user can go to just by clicking on the link. The href attribute name is shorthand for hypertext reference. The term "web," used to describe the Internet, came about because sites all over the world are connected by these links.

<a href="https://www.example.com">Example Link</a>

Notes: HTML

Browsers

Containment

Block and Inline HTML Elements

Semantic HTML

HTML Attributes

Categorized List of HTML Element Tags

Browsers

Containment

Block and Inline HTML Elements

Semantic HTML

HTML Attributes

Categorized List of HTML Element Tags