You don’t need to try to remember any of this. There’s no quiz at the end. If you don’t have any curiosity as to what’s “under the hood” of a web page it probably won’t interest you. But if you’d like a general idea of how it works, read on.
As mentioned in Part 1, Every webpage/HTML file has two parts, a HEAD and a BODY. Part 1 of this blog described the HEAD; parts 2 & 3 will descrbe the BODY. The portion of the diagram above that’s outlined in red defines it’s start.
The tag <body> (line 25), tells the browser that’s displaying the page on your screen, that it’s now in the BODY portion of the file. Ditto to the screen reader software that people who have vision problems use to have the computer read aloud to them what’s on a screen.
The tag <article> (line 26), is optional, and somewhat vague, but it tell the browser and screen reader that what’s betweem <article> and </artical> is in some sense, a unit, that makes sense if it “stands alone.” And roles are present because some screen reader programs prefer to get their instructions that way.
If you look at web pages you will notice that most have a heading area at the top, a footing area at the bottom, a menu area (usually at the top, bottom, or along the left side), and the main content of the page in between. Outlined in blue in our listing above is our pages heading, consisting of heading line 1, <h1> …</h1>, and heading line 2, <h2> … </h2>.
The code for the main section of our webpage is outlined in yellow. It has two components. Outlined in orange a photo of the news clip and a caption for the photo. Outlined in pink, is aparagraph of text about Joseph Walker and the photo.
<div> … </div> (for ‘division’) doesn’t signify anything in particular. It just tells the browser (and screen reader) to treat the contents as a unit.
<fig> … </fig> (for figure) helps screen readers know the contents are a photo or drawing. And <figcaption> — </figcaption> contains, suprise, the caption for the photo. And <img> (image) is for the photo or drawing. The src=”…” portion (source) is for the ame of the computer file containing the image. You browser will diplay the photo/drawing on the screen of your device, but of course, screen reader software can’t do that. So., the alt=”…” (alternate) portion contains text the reader will read to the user to let them know what the image was an image of. And the style=”text-align:center;” tells the browser where it should display the image.
The paragaph of text (that’s what <p> … </p> stands for) is pretty imple. Except that the words Joseph Hoyt Walker are to be a link to the web URL for his profile in WikiTree.
Congratulatioins if you’ve read this far. And Part 3 will be coming shortly if you’re wonkish.