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>
Categorized List of HTML Element Tags
| Category | Tags | Closing | Tag Example |
|---|---|---|---|
Document | |||
!DOCTYPE html | no | <!DOCTYPE html> | |
<! Comments --> | no |
| |
html |
| ||
Meta Data | |||
base | no | default target for links | |
head | <head>...</head> | ||
link | no | link to CSS file | |
meta | no |
| |
style | local CSS | ||
title | title appears in the tab of the browser | ||
Structure | |||
address |
| ||
article |
| ||
aside |
| ||
body |
| ||
div |
| ||
footer |
| ||
h1 |
| ||
h2 |
| ||
h3 |
| ||
h4 |
| ||
h5 |
| ||
h6 |
| ||
header |
| ||
paragraph |
| ||
nav |
| ||
section |
| ||
span |
| ||
Grouping | |||
blockquote |
| ||
dd | definition contained in description list | ||
dl | description list | ||
dt | term contained in description list | ||
figure | contain photos, diagrams, code, figcaption | ||
figcaption |
| ||
hr | no | horizonal rule | |
li | list item contained in ordered or unordered list | ||
ol | ordered list | ||
pre | preformatted text | ||
ul | unordered list | ||
Embedding | |||
area | no | defines coordinates inside image map | |
audio | contains source for audio files | ||
canvas | area on web page for drawing graphics | ||
embed | no | container for external source like video | |
iframe | container to embed a web page from another server | ||
img | no | image | |
map | make clickable areas in different parts of a single image | ||
object | embed external source like video player, web page | ||
param | no | define parameters in an object | |
picture | contain images for responsive web pages | ||
source | no | media sources for video, audio and pictures | |
track | no | used for subtitles and caption in video and audio | |
video |
| ||
Forms | |||
button |
| ||
datalist | list of selectable options | ||
fieldset | group related form elements | ||
form |
| ||
input | no |
| |
label |
| ||
legend | caption for a fieldset | ||
meter | renders a bar showing a measurement | ||
optgroup | group related options in a select | ||
option | option contained by optgroup, select or datalist | ||
output | output of a calculation | ||
progress | progress bar | ||
select | select from a list of options | ||
textarea | multiline text input | ||
Tabular | |||
caption | table caption | ||
col | no | properties for a colgroup | |
colgroup | contains a set of cols | ||
table |
| ||
tbody | body of the table | ||
td | table detail is a cell in the table | ||
tfoot | table footer | ||
th | table header cell | ||
thead | table header | ||
tr | table is made of of rows containing cells table row | ||
Interactive | |||
details | container for interactive content that can be opened and closed by user | ||
summary | heading you see for details <summary>...</summary> | ||
dialog | container where you show content by adding an "open" attribute | ||
Script | |||
noscript | alternate content if you brower doesn't support javascript | ||
script | JavaScript rendered on the web page | ||
template | hidden content container that can be rendered later using JavaScript |
Resources
Last updated
