Meeting 2
Building a Sound Structure
2.1 Homework Discussion
Professor: I am anxious to see what yo u have written since our last meeting. Did you
have any trouble?
Mike: At the beginning, y es. I had to read about lists and tables to complete the
homework.
Professor: No offense, but I am sort of glad you mention tables because that’s a sure
signal you did it wrong. Don’t panic, though. That mistake will help you tremendously
with mastering basic HTML principles. What about yo u, Maria?
Maria: I don’t know
.... It wasn’t as easy as it looked and I have some questions.
Professor: Good. So we have material to talk about. Mike, what did you use a table
for?
Mike: I haven’t found any other way to wrap text around the picture. And honestly, I
had that annoying feeling that this is not the way to go. Namely, I had to split the text
between two cells of the table in order to wrap it around the image. Th e whole thing
only looked good till I resized the window. So how can this be done properly?
Professor: As I already mention ed in o ur previous meeting, HTML is used to give a
document a structure rather than a look . So there is always one very important ques-
tion to bear in m ind when constructing an HTML document: is what I’m trying to
do in any way affecting the structure of th e document or is it merely a matter of pre-
sentation? Indeed, wrapping a text around a picture has nothing to do with structure.
A paragraph is a paragraph a nd a picture is a pictu re, no matter how they are posi-
tioned and formatted. You do n’t have to worry about whether a paragraph is w rapped
around a picture when writing an HTML. That’s work for CSS. I’ve deliberately pre-
sented you with a doc ument that will tempt you to think about how it looks, which is
completely irrelevant at this point.
Mike: So it’s not possible to wrap text using pure HTML?
15
Professor: No.
Maria: Why not? I managed to find an attribute called align, which aligns a picture
to one side (left or right) and wraps text around it nicely. Have I missed something?
Professor: You missed one thing. The align attribute is deprecated since HTM L4.01
and o bsolete since HTML5, and not w ithout a r eason. Nearly all elements and at-
tributes that were historically used for presentational purposes are considered obsolete
in HTML5. That doesn’t m ean th ey don’t work, th ough. Worse still, they will work
for quite some time for backward compatibility. Browsers are r eally forgiving when
rendering a markup. You won’t notice that you did something wrong because the mis-
take won’t show. It is entirely up to you whethe r you con form to the rules or no t. If
you want to build sound web pages, the HTML is the mo st important thing to do right
because it serves as a foundation of your whole web page. Sticking to plain, simple
HTML is also important because it keeps search engines happy. The old HTM L’s a p-
proach of using formatting elements like <font>, or tables to lay out a page , stands in
the way of a search engine’s job.
Mike: Is there really no way of testing whether your HTML is wr itten properly?
Professor: In fact there is. When in doubt, you can resort to one of many on-line
HTML validators ( for examp le ,
validator.w3.org). You can upload your document to a
validator and it will alert you to any errors you may have in your HTML document.
Maria: I think I see th ings more clearly now and meanwhile you also answered some
of my questions. I even discovered a nother mistake I made: I used the <h2> element
for the m ain heading (Common Wombat) since the <h1> seem ed to o big to me. If
I understand correctly, I shouldn’t have done this because I was actually concerned
about presentation. In fact I should have u sed <h1> because this is the main heading.
Professor: Exactly! When writing HTML, you shouldn’t worry about font size.
Maria: What still puzzles me are the elements <b> (b old) and <i> (italic), whic h I
found in the reference you gave us. Is this not presentation?
Professor: If you use them properly, then th e answer is no. Those two elements
survive from the past but with a different, more semantic interpretation. In modern
HTML, it would be wrong to use <b> and <i> elements merely for the purpose of
making text bold o r italic. It is also wrong to think of <b> and <i> elements as being
old elements now re placed by the <strong> and <em> elements only because they
are rendered in the same way by many browsers. The <strong> element is used to
express strong importance of its content and th e <em> element is used to emphasize
its content. The <b> and <i> elements are not used to stress importance or emphasis.
Rather, they are considered a s generic bold and italic elements used in cases when
normally—but not necessarily—bold and italic fo nts are used. Because the meaning
of these two elements is not evident fro m their names, authors often use the class
attribute to clearly identify their semantic mean ing. For examp le :
<i class="latin-taxonomy">Vombatus ursinus ursinus</i>
<b class="english-definition">bare-nosed wombat</b>
16 Meeting 2. Building a Sound Structure
The class attribute not only gives a clear meaning to both elements but also allows
CSS to access these elements for formatting purposes—but m ore on th at later.
Mike: T here’s one more qu estion bothering me. I have found an element for writing
unordered lists (<u l>) and I’m not quite sure whether I shou ld put it inside a paragraph
or not. A list, in my opinion , is a part of a paragraph but visually it is represented as
a separate blo ck. I know that I am mix ing two concepts, which you’ve just cle arly
separated, but in this case my thinking is a bit blurred.
Professor: I a gree that it is a matter of debate whether a list is a separate pa ragraph
or not. In p ractice, things are sometimes not as clear as in theory. Lu ckily, in this
special case we have recourse to the additional rules concerning context in which
certain HTML elemen ts can appear, and the content that they are allowed to include.
One or both of the terms also appear with some of the element descr iptions in the
concise reference at the end of this boo k. For example, you will find that the <p>
element should only contain text and inline elements. Because the <ul> eleme nt is a
block element, you shouldn’t put it inside a <p> element.
Mike: You have already told us about the block-inline categorization of elements
based o n their default display setting, but I’m still confused. When y ou are talking
about display, isn’t that presentation?
Professor: You couldn’t be more right about tha t. In HTML5, a disp la y has be-
come purely a CSS term since it define s the visual behavior of an element. In the
past, the categorization of bloc k and inline elements helped auth ors in deciding which
element is allowed a s a c ontent (descendant) of the other. In HTML5, this binary cat-
egorization has been replaced by a more complex one and you will hear terms like
the flow content, sectioning content, phrasing content, and so on. If you are inter-
ested in studying these (which I don’t actually recomm end at this stage), I sug gest
that you visit the site
developer.mozilla.org, which is written on a higher technica l
level than
www.w3schools.com, but still more understandable fo r a beginner than the
World Wide Web Consortium’s (W3C) page,
www.w3.org , which publishes original
web stand ards and is quite a demand ing read.
To keep things simple, some authors equate the flow content category roughly with
the block displa y category and the phrasing content category roughly with the inline
display ca tego ry. This block-inline categorization is easier to und erstand. That’s wh y
it is still used by some authors.
As a rule of thumb, an inline element can only conta in inline elements while a block
element can contain inline elements as well as block elements. A notable exception
to the rule are elements <p> and <h1> to <h6>, which are block elements but cannot
contain block elements. Again , when in doubt, you can use an HTML validator.
OK, that’s it. He re is a possible final solution of your ho mework:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
2.1. Homework Discussion 17
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.