Thank you for your feedback! 
I was able to address most of them. I wasn’t aware that the <p> tag was a block element. As for the <meta name="format-detection"> I was just a bit paranoid that if I accidentally clicked it I would get charged if my computer had an API that opens it right away and call that number up (because I set the Tel: <a href="tel:123-456-7890">123-456-7890</a>). Not an iOS thing. And not sure how silly it seems now.
Hi @UnorthodoxThing, that all sounds great.
I don’t think your use of <meta name="format-detection"> is silly at all — it is a very good thing to take security seriously on the web, and this shows you are thinking carefully about such issues. I only brought it up because I had never heard of it before and it sounded interesting. And we don’t mention it on our <meta> element reference page. I’m about to file a bug for it so we can add it in the future 
1 Like
I don’t think this will be of much help to me since I’ve probably assessed most of the code myself (passes W3C check as well), but here we go, critique appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Eleanor Gaye">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Letter</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="sender-column">
<p><b>Dr. Eleanor Gaye</b><br>
Awesome Science faculty<br>
University of Awesome<br>
Bobtown, CA 99999,<br>
USA<br>
<b>Tel</b>: 123-456-7890<br>
<b>Email</b>: no_reply@example.com<br>
</p>
<p><time datetime="2016-01-20">20 January 2016</time></p>
</div>
<p><b>Miss Eileen Dover</b><br>
4321 Cliff Top Edge<br>
Dover, CT9 XXX<br>
UK
</p>
<h1>Re: Eileen Dover university application</h1>
<p>Dear Eileen,</p>
<p>Thank you for your recent application to join us at the University of Awesome's science faculty to study as part
of your <abbr title="Philosophiae Doctor">PhD</abbr> next year. I will answer your questions one by one, in the
following sections.</p>
<h3>Starting dates</h3>
<p>We are happy to accommodate you starting your study with us at any time, however it would suit us better if you
could start at the beginning of a semester; the start dates for each one are as follows:</p>
<ul>
<li>First semester: <time datetime="2016-09-09">9 September 2016</time></li>
<li>Second semester: <time datetime="2017-01-15">15 January 2017</time></li>
<li>Third semester: <time datetime="2017-05-02">2 May 2017</time></li>
</ul>
<p>Please let me know if this is ok, and if so which start date you would prefer.</p>
<p>You can find more information about <a href="https://example.com">important university dates</a> on our website.
</p>
<h3>Subjects of study</h3>
<p>At the Awesome Science Faculty, we have a pretty open-minded research facility — as long as the subjects fall
somewhere in the realm of science and technology. You seem like an intelligent, dedicated researcher, and just
the
kind of person we'd like to have on our team. Saying that, of the ideas you submitted we were most intrigued by
are
as follows, in order of priority:</p>
<ol>
<li>Turning H<sub>2</sub>O into wine, and the health benefits of Resveratrol
(C<sub>14</sub>H<sub>12</sub>O<sub>3</sub>.)
</li>
<li>Measuring the effect on performance of funk bassplayers at temperatures exceeding 30°C (86°F), when the
audience
size exponentially increases (effect of 3 × 10<sup>3</sup> increasing to 3 × 10<sup>4</sup>.)</li>
<li><abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr>
constructs for representing musical scores.</li>
</ol>
<p>So please can you provide more information on each of these subjects, including how long you'd expect the
research
to take, required staff and other resources, and anything else you think we'd need to know? Thanks.</p>
<h3>Exotic dance moves</h3>
<p>Yes, you are right! As part of my post-doctorate work, I did study exotic tribal dances. To answer your
question, my
favourite dances are as follows, with definitions:</p>
<dl>
<dt>Polynesian chicken dance</dt>
<dd>A little known but very influential dance dating back as far as 300<abbr title="Before Christ">BC</abbr>, a
whole village would dance
around in
a
circle like chickens, to encourage their livestock to be "fruitful".</dd>
<dt>Icelandic brownian shuffle</dt>
<dd>Before the Icelanders developed fire as a means of getting warm, they used to practice this dance, which
involved
huddling close together in a circle on the floor, and shuffling their bodies around in imperceptibly
tiny,
very
rapid movements. One of my fellow students used to say that he thought this dance inspired modern styles
such as
Twerking.</dd>
<dt>Arctic robot dance</dt>
<dd>An interesting example of historic misinformation, English explorers in the 1960s believed to have
discovered a
new
dance style characterized by "robotic", stilted movements, being practiced by inhabitants of Northern
Alaska
and
Canada. Later on however it was discovered that they were just moving like this because they were really
cold.</dd>
</dl>
<p>For more of my research, see my <a href="https://example.com">exotic dance research page</a>.</p>
<p>Yours sincerely,</p>
<p>Dr Eleanor Gaye</p>
<p>University of Awesome motto: <q cite="The%20memoirs%20of%20Bill%20S%20Preston,%20Esq">Be awesome to each
other.</q> --
<em>Bill S Preston, <abbr title="Esquire">Esq</abbr></em></p>
</body>
</html>Anyone would like to have a look at my first markup and give feedback. Thank You!
Сводка
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles/style.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p class="sender-column">
<strong>Dr. Eleanor Gaye</strong><br>
Awesome Science faculty <br>
University of Awesome <br>
Bobtown, CA 99999, <br>
USA <br>
<strong>Tel:</strong> 123-456-7890 <br>
<strong>Email:</strong> no_reply@example.com <br><br>
<time class="sender-column" datetime="2016-01-20">20 January 2016</time> <br>
</p>
<p>
<strong>Miss Eileen Dover</strong><br>
4321 Cliff Top Edge<br>
Dover, CT9 XXX<br>
UK <br>
</p>
<h1>Re: Eileen Dover university application </h1>
<p>
Dear Eileen, <br><br>
Thank you for your recent application to join us at the University of Awesome's science faculty to study as part <br>
of your PhD next year. I will answer your questions one by one, in the following sections.<br><br>
</p>
<h2>Starting dates</h2>
<p>
We are happy to accommodate you starting your study with us at any time, however it would suit us better if you<br>
could start at the beginning of a semester; the start dates for each one are as follows:
</p>
<ul>
<li>First semester: <time datetime="2016-09-09">9 September 2016</time></li>
<li>Second semester: <time datetime="2016-01-15">15 January 2017</time></li>
<li>Third semester: <time datetime="2017-05-02">2 May 2017</time></li>
</ul>
<p>
Please let me know if this is ok, and if so which start date you would prefer.<br><br>
You can find more information about important university dates <a href="#">on our website</a>.
</p>
<h2>Subjects of study</h2>
<p>
At the Awesome Science Faculty, we have a pretty open-minded research facility — as long as the subjects fall<br> somewhere in the realm of science and technology. You seem like an intelligent, dedicated researcher, and just the kind of person we'd like to have on our team. Saying that, of the ideas you submitted we were most intrigued by are as follows, in order of priority:
</p>
<ol>
<li> Turning H2O into wine, and the health benefits of Resveratrol (C<sub>14</sub>H<sub>12</sub>O<sub>3</sub>.)</li>
<li>Measuring the effect on performance of funk bassplayers at temperatures exceeding 30°C (86°F), when the audience size exponentially increases (effect of 3 × 10<sup>3</sup> increasing to 3 × 10<sup>4</sup>.)</li>
<li> <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Cascading style sheets">CSS</abbr> constructs for representing musical scores.</li>
</ol>
<p>
So please can you provide more information on each of these subjects, including how long you'd expect the research to take, required staff and other resources, and anything else you think we'd need to know? Thanks.
</p>
<h2>Exotic dance moves</h2>
<p>
Yes, you are right! As part of my post-doctorate work, I did study exotic tribal dances. To answer your question, my favourite dances are as follows, with definitions:
</p>
<dl>
<dt>Polynesian chicken dance</dt>
<dd> A little known but very influential dance dating back as far as 300<abbr title="BC BC BC?">BC</abbr>, a whole village would dance around in a circle like chickens, to encourage their livestock to be "fruitful".</dd>
<dt> Icelandic brownian shuffle</dt>
<dd>Before the Icelanders developed fire as a means of getting warm, they used to practice this dance, which involved huddling close together in a circle on the floor, and shuffling their bodies around in imperceptibly tiny, very rapid movements. One of my fellow students used to say that he thought this dance inspired modern styles such as Twerking.</dd>
<dt> Arctic robot dance</dt>
<dd>An interesting example of historic misinformation, English explorers in the 1960s believed to have discovered a new dance style characterized by "robotic", stilted movements, being practiced by inhabitants of Northern Alaska and Canada. Later on however it was discovered that they were just moving like this because they were really cold.</dd>
</dl>
<p> For more of my research, see my <a href="#">exotic dance research</a> page.<br><br>
Yours sincerely,<br><br>
Dr Eleanor Gaye</p><br>
University of Awesome motto:<q>Be awesome to each other.</q> -- The memoirs of Bill S Preston, <abbr title="esq esq">Esq</abbr>
</body>
</html>
Hi @katktv, thanks for sending your code in! I’ve had a look, and this works very well. There is nothing here that I can really comment on. Well done!
1 Like
Hi @goovsy,
Thanks for sending me your code in to look at. This is mostly pretty good; there are just a few things to comment on:
- You should really put
<time class="sender-column" datetime="2016-01-20">20 January 2016</time>in a separate paragraph to separate it from the sender address. This also would mean removing the excess<br>elements from around it.<br>should never be used to separate paragraphs. - In the same way,
Dear Eileen, <br><br>should be in a separate<p>element, and have the<br>s removed - There are other bits later in the code too where you’ve got unneeded
<br>tags where there should be separate<p>s -
H2Oshould have a<sub>element around the 2 -
The memoirs of Bill S Preston, <abbr title="esq esq">Esq</abbr>should have a<cite>element around it, to signify tat it has been quotes from somewhere.
You can see our final code at https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-finished/index.html
Hello, i have finished the assessment and appreciate that MDN provide such a good tutorial to help people like me ! You guys are awosome!
And this is my work , could anyone help me check it and point what could be improve upon or bad habit ?
Thank you very much!
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="author" content="Lei Li" property="i dont know">
<title>回复</title>
<!--copy of css doc-->
<style>
body {
max-width: 800px;
margin: 0 auto;
}
.sender-column {
text-align: right;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.3em;
}
p, ul, ol, dl, address {
font-size: 1.1em;
}
p, li, dd, dt, address {
line-height: 1.5;
}
</style>
</head>
<body>
<header>
<!--the address and contact-->
<p class="sender-column"><em>
中国北京市门头沟区，102300<br>
纽臂大学 纽臂科学院<br>
<strong>李雷 教授</strong><br>
<strong>联系电话：</strong>123-456-7890<br>
<strong>电子邮件：</strong>no_reply@example.com<br></em></p>
<p class="sender-column"><time datetime="2019-02-22">2019 年 2 月 22 日</time></p>
<p><strong><em>韩梅梅 女士</em></strong><br>
<em>中国海南省三亚市亚龙湾</em></p>
</header>
<main>
<article>
<!--the main context-->
<h1>回复：韩梅梅学位申请</h1>
<p>亲爱的韩同学：</p>
<p>感谢你申请纽臂大学科学院的哲学博士学位课程，下面我将就你的问题依次做出解答。</p>
<h2>开学日期</h2>
<p>欢迎你在任意时间来校学习，但在学期开始时来校更理想，每学期开学时间如下：</p>
<ul>
<li>第一学期：<time datetime="2019-09-09">2019 年 9 月 9 日</time></li>
<li>第二学期：<time datetime="2019-01-15">2020 年 1 月 15 日</time></li>
<li>第三学期：<time datetime="2020-05-02">2020 年 5 月 2 日</time></li>
</ul>
<p>请告诉我你是否愿意在学期开始时来校，并告知你选择的学期。</p>
<p>你可以在我们的网站上找到更多关于 <a title="date" href="www.example.com/">学校重要日期</a> 的信息。</p>
<h2>学习科目</h2>
<p>纽臂科学院本着兼容并蓄的原则，课题涉及一些科技领域。欢迎有才智、态度专注的研究人员参加，也欢迎符合我们价值观的朋友加入。我们最感兴趣的课题如下（按优先度排序）：</p>
<ol>
<li>把水（H<sub>2</sub>O）转变为酒的方法，以及白藜芦醇（C<sub>14</sub>H<sub>12</sub>O<sub>3</sub>）对健康的帮助作用。</li>
<li>测量室温 30°C（86°F）时，观众人数呈指数级增加对放克贝斯手表演的影响（3 × 10<sup>3</sup> > 3 × 10<sup>4</sup> 效应）。</li>
<li>使用 <abbr title="超文本标记语言（Hypertext Markup Language）"> HTML</abbr>和 <abbr title="Cascading Style Sheets">CSS</abbr> 构建乐谱。</li>
</ol>
<p>请针对上述课题提供更多的信息。包括研究时长、所需资源，以及其它未尽事宜，谢谢</p>
<h2>异域舞蹈</h2>
<p>你说的没错！异域部落舞蹈是我博士后研究项目的一部分。为了回答你的问题，我在下面列出我个人最喜欢的舞蹈种类和相关介绍：</p>
<dl>
<dt>波利尼西亚小鸡舞</dt>
<dd>一种古老、神秘但影响广泛的舞蹈，可追溯至公元前 300 年，整个村庄围绕着一个小鸡形状的圈跳舞，祈祷牲畜肥美。</dd>
<dt>冰岛布尔曳步舞</dt>
<dd>在冰岛人学会用火取暖之前，他们之间流行着这种舞蹈，舞蹈时人们在地上拥成一个圈，用极小极快的动作晃动身体。我有一个学生说冰岛曳步舞是现代甩臀舞的鼻祖。</dd>
<dt>北极机器人舞</dt>
<dd>一个有趣的历史误传，二十世纪六十年代的英国探险者宣称发现了一种像“机器人跳舞”的舞蹈，这种舞蹈动作僵硬，流行于加拿大和阿拉斯加北部地区。后来人们发现这里的居民是因为天气太冷了才做出这样的动作。</dd>
</dl>
<p>更多信息请查看我的 <a title="wudao" href="https://example.com/ ">异域舞蹈研究</a> 网页。</p>
</article>
</main>
<!--end of the letter-->
<footer>
<p>李雷 教授</p>
<p>纽臂大学校训：人人皆可纽臂 —— <em>诸葛中天</em> 绅士</p>
</footer>
</body>
</html>
By the way can you recommand a good IDE for me ? Thx 
Hello @themailoftd! Thank you for sending me your code!
Looking at it, you have done a very good job here — the HTML is very good. I think the only thing you have missed out is the quote and citation at the bottom of the letter (see the use of <q> and <cite> in our version at https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-finished/index.html)
In terms of good IDEs, I am not sure of an integrated solution. I use Atom, and really like it, but I only really use the code editor part. Other people also really like VSCode.
Sorry for replying too late ! And really thanks for your correction !!
Hi, I’ve completed the first assignment on the HTML “Marking up a Letter” and pasted my HTML code below and I kinda have doubt in body cause I’ve mostly used the section element. If I want to apply the CSS then different elements are having the same element. So, I’m afraid that this could affect the styling process.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Letter</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<meta name="author" content="Dr. Eleanor Gaye">
</head>
<body>
<p class="sender-column">
<strong>Dr. Eleanor Gaye</strong><br>
Awesome Science faculty<br>
University of Awesome<br>
Bobtown, CA 99999,<br>
USA<br>
<strong>Tel</strong>: 123-456-7890<br>
<strong>Email</strong>: no_reply@example.com<br>
<br>
<time datetime="2016-01-20">20 January 2016</time></p>
<p><strong>Miss Eileen Dover</strong><br>
4321 Cliff Top Edge<br>
Dover, CT9 XXX<br>
UK</p>
<article>
<h1>Re: Eileen Dover university application</h1>
<header>
<p>Dear Eileen,</p>
<p>Thank you for your recent application to join us at the University of Awesome's science
faculty to study as part of your <abbr title="Doctorate of Philosophy">PhD</abbr> next
year. I will answer your questions one by one, in the following sections.
</p>
</header>
<section>
<h2>Starting dates</h2>
<p>We are happy to accommodate you starting your study with us at any time, however it would
suit us better if you could start at the beginning of a semester; the start dates for
each one are as follows:
</p>
<ul>
<li>First semester: <time datetime="2016-09-09">9 September 2016</time></li>
<li>Second semester: <time datetime="2017-01-15">15 January 2017</time></li>
<li>Third semester: <time datetime="2017-05-02">2 May 2017</time></li>
</ul>
<p>Please let me know if this is ok, and if so which start date you would prefer.<br>
<br>
You can find more information about <a href="https://www.example.com">important university
dates</a> on our website.
</p>
</section>
<section>
<h2>Subjects of study</h2>
<p>At the Awesome Science Faulty, we have a pretty open-minded research facility — as long as
the subjects fall somewhere in the realm of science and technology. You seem like an
intelligent, dedicated researcher, and just the kind of person we'd like to have on our
team. Saying that, of the ideas you submitted we were most intrigued by are as follows,
in order of priority:
</p>
<ol>
<li>Turning H<sub>2</sub>O into wine, and the health benefits of Resveratrol
(C<sub>14</sub>H<sub>12</sub>O<sub>3</sub>.)</li>
<li>Measuring the effect on performance of funk bassplayers at temperatures exceeding
30°C (86°F), when the audience size exponentially increases
(effect of 3 × 10<sup>3</sup> > 3 × 10<sup>4</sup>.)</li>
<li><abbr title="Hyper Text Markup Language">HTML</abbr> and
<abbr title="Cascading Styling Sheets">CSS</abbr> constructs for representing musical
scores.</li>
</ol>
<p>So please can you provide more information on each of these subjects, including how long
you'd expect the research to take, required staff and other resources, and anything else
you think we'd need to know? Thanks.
</p>
</section>
<section>
<h2>Exotic dance moves</h2>
<p>Yes, you are right! As part of my post-doctorate work, I <em>did</em> study exotic tribal dances.
To answer your question, my favourite dances are as follows, with definitions:
</p>
<dl>
<dt>Polynesian chicken dance</dt>
<dd>A little known but very influential dance dating back as far as
300<abbr title="Before Christ">BC</abbr>, a whole village would dance around in a circle
like chickens, to encourage their livestock to be "fruitful".</dd>
<dt>Icelandic brownian shuffle</dt>
<dd>Before the Icelanders developed fire as a means of getting warm, they used to practice
this dance, which involved huddling close together in a circle on the floor, and shuffling
their bodies around in imperceptibly tiny, very rapid movements. One of my fellow students
used to say that he thought this dance inspired modern styles such as Twerking.</dd>
<dt>Arctic robot dance</dt>
<dd>An interesting example of historic misinformation, English explorers in the 1960s believed
to have discovered a new dance style characterized by "robotic", stilted movements, being
practiced by inhabitants of Northern Alaska and Canada. Later on however it was discovered
that they were just moving like this because they were really cold.</dd>
</dl>
<p>For more of my research, see my <a href="https://www.exoticdance.com">exotic dance research page</a>.</p>
</section>
<p>Yours sincerely,</p>
<p>Dr Eleanor Gaye</p>
</article>
<footer>
<p>University of Awesome motto: <q>Be awesome to each other.</q> -- <cite>Bill S Preston</cite>, <abbr title="Esquire">Esq</abbr></p>
</footer>
</body>
</html>
Thanks in advance for the help.
Hi there @Giriprasath, thanks for sending your code in.
I have had a look, and your code looks really good — well done!
The only small difference I noticed between our final code and yours was that we put the address of the letter in a separate paragraph:
<p class="sender-column"><time datetime="2016-01-20">20 January 2016</time></p>
Whereas you put it as part of the same paragraph as the sender address, etc. But this isn’t really wrong, as such. It is just a different choice of markup structure, which is still fine.
Hi, check my “Marking up a Letter” assignment, please
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<meta name="author" content="Dr. Eleanor Gaye">
<title>Letter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="sender-column"><strong>Dr. Eleanor Gaye</strong><br>
Awesome Science faculty<br>
University of Awesome<br>
Bobtown, CA 99999,<br>
USA<br>
<strong>Tel</strong>: 123-456-7890<br>
<strong>Email</strong>: no_reply@example.com<br>
<time datetime="2016-01-20">20 January 2016</time>
</p>
<p>
<strong>Miss Eileen Dover</strong><br>
4321 Cliff Top Edge<br>
Dover, CT9 XXX<br>
UK<br>
</p>
<h1>Re: Eileen Dover university application</h1>
<p>Dear Eileen,</p>
<p>Thank you for your recent application to join us at the University of Awesome's science faculty to
study as part of your <abbr title="Doctor of Philosophy">PhD</abbr> next year.
I will answer your questions one by one, in the following sections.</p>
<h2>Starting dates</h2>
<p>We are happy to accommodate you starting your study with us at any time,
however it would suit us better if you could start at the beginning of a semester;
the start dates for each one are as follows:</p>
<ul>
<li>First semester: <time datetime="2016-09-09">9 September 2016</time></li>
<li>Second semester: <time datetime="2016-01-15"></time>15 January 2017</li>
<li>Third semester: <time datetime="2016-05-02"></time>2 May 2017</li>
</ul>
<p>Please let me know if this is ok,
and if so which start date you would prefer.</p>
<p>You can find more information about <a href="http://example.com">important university dates</a> on our website.</p>
<h2>Subjects of study</h2>
<p>At the Awesome Science Faculty, we have a pretty open-minded research facility —
as long as the subjects fall somewhere in the realm of science and technology.
You seem like an intelligent, dedicated researcher,
and just the kind of person we'd like to have on our team. Saying that,
of the ideas you submitted we were most intrigued by are as follows, in order of priority:</p>
<ol>
<li>Turning H2O into wine, and the health benefits of Resveratrol (C<sub>14</sub>H<sub>12</sub>O<sub>3</sub>.)</li>
<li>Measuring the effect on performance of funk bassplayers at temperatures
exceeding 30°C (86°F), when the audience size exponentially increases (effect of 3 × 10<sup>3</sup> increasing to 3 × 10<sup>4</sup>.)</li>
<li><abbr title="Hypertext Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr> constructs for representing musical scores.</li>
</ol>
<p> So please can you provide more information on each of these
subjects, including how long you'd expect the research to take, required staff and other resources, and anything else you think we'd need to know? Thanks.</p>
<h2>Exotic dance moves</h2>
<p>Yes, you are right! As part of my post-doctorate work, I did study exotic tribal dances.
To answer your question, my favourite dances are as follows, with definitions:</p>
<dl>
<dt>Polynesian chicken dance</dt>
<dd>A little known but very influential dance dating back as far as 300<abbr title="Before Christ">BC</abbr>,
a whole village would dance around in a circle like chickens, to encourage their livestock to be "fruitful".
Icelandic brownian shuffle</dd>
<dt>Icelandic brownian shuffle</dt>
<dd>Before the Icelanders developed fire as a means of getting warm, they used to practice this dance,
which involved huddling close together in a circle on the floor, and shuffling their bodies around in imperceptibly tiny,
very rapid movements. One of my fellow students used to say that he thought this dance inspired modern styles such as Twerking.</dd>
<dt>Arctic robot dance</dt>
<dd>An interesting example of historic misinformation,
English explorers in the 1960s believed to have discovered a new dance style characterized by "robotic",
stilted movements, being practiced by inhabitants of Northern Alaska and Canada.
Later on however it was discovered that they were just moving like this because they were really cold.</dd>
</dl>
<p>For more of my research, see my <a href="http://example.com">exotic dance research page</a>.</p>
<p>Yours sincerely,</p>
<p>Dr Eleanor Gaye</p>
<p>University of Awesome motto: <q>Be awesome to each other.</q> -- <cite>The memoirs of Bill S Preston, <abbr title="Esquire">Esq</abbr></cite></p>
</body>
</html>
Hello again @nikolaesku!
This code is also really good — well done!
I had a few small points to bring up, but nothing really major:
In the reciver address, you don’t need the last <br> tag, because there’s no line after this one to break onto a new line:
<p>
<strong>Miss Eileen Dover</strong><br>
4321 Cliff Top Edge<br>
Dover, CT9 XXX<br>
UK<br>
</p>
A couple of your <time> elements are not correctly wrapped around the datetimes they are supposed to be marking up:
<li>Second semester: <time datetime="2016-01-15"></time>15 January 2017</li>
<li>Third semester: <time datetime="2016-05-02"></time>2 May 2017</li>
The <a> elements should have titles, according to the the marking guide, but this is not really a big deal as long as the link text is descriptive.
<a href="http://example.com" title="Table of awesome university important dates">important university dates</a>
You missed a <sub> element off the “2” in “H2O”
Hello there, I really appreciate it, if someone could review my code and let me know if it is okay. Many Thanks =)
HTML-Marking Up A Letter
Dr. Eleanor Gaye
Awesome Science faculty
University of Awesome
Bobtown, CA 99999,
USA
Tel:123-456-7890
Email:no_reply@example.com
<address class="receiver-column">
Miss Eileen Dover<br />
4321 Cliff Top Edge<br />
Dover<br />
CT9 XXX<br />
UK<br />
</address>
<h1>Re: Eileen Dover university application</h1>
<p class="introLine">Dear Eileen,</p>
<p>
Thank you for your recent application to join us at the University of Awesome's science faculty to study as part of your <abbr title="Doctor of Philosophy">PhD</abbr>. I will answer your questions one by one, in the following sections.
</p>
<h2>Starting Dates</h2>
<p>
We are happy to accommodate you starting your study with us at any time, however it would suit us better if you could start at the beginning of a semester; the start dates for each one are as follows:
</p>
<ul>
<li>First semester: <time class="dates" datetime="2016-09-09">9<sup>th</sup> September 2016</time></li>
<li>Second semester: <time class="dates" datetime="2017-01-15">15<sup>th</sup> January 2017</time></li>
<li>Third semester: <time class="dates" datetime="2017-04-02"> 2nd May 2017 </time></li>
</ul>
<p>Please let me know if this is <u>ok</u>, and if so which <strong>start date</strong> you would prefer.</p>
<p>
You can find more information about <a href="http://wwww.example.com">important university dates</a> on our website.
</p>
<h2>Subjects of study</h2>
<p>
At the Awesome Science Faculty, we have a pretty open-minded research facility — as long as the subjects fall somewhere in the realm of science and technology. You seem like an intelligent, dedicated researcher, and just the kind of person we'd like to have on our team. Saying that, of the ideas you submitted we were most intrigued by are as follows, in order of priority:
</p>
<ol>
<li>Turning H<sub>2</sub>O into wine, and the health benefits of Resveratrol (C<sub>14</sub>H<sub>12</sub>O<sub>3</sub>.)</li>
<li>Measuring the effect on performance of funk bassplayers at temperatures exceeding 30<sup>°</sup>C (86°F), when the audience size exponentially increases (effect of 3 × 10<sup>3</sup> increasing to 3 × 10<sup>4</sup>.)</li>
<li>HTML and CSS constructs for representing musical scores.</li>
</ol>
<p>
So please can you provide more information on each of these subjects, including how long you'd expect the research to take, required staff and other resources, and anything else you think we'd need to know? Thanks.
</p>
<h2>Exotic dance moves</h2>
<p>
Yes, you are right! As part of my post-doctorate work, I did study exotic tribal dances. To answer your question, my favourite dances are as follows, with definitions:
</p>
<dl>
<dt>Polynesian chicken dance</dt>
<dd>A little known but very influential dance dating back as far as 300BC, a whole village would dance around in a circle like chickens, to encourage their livestock to be "fruitful".</dd>
<dt>Icelandic brownian shuffle</dt>
<dd>Before the Icelanders developed fire as a means of getting warm, they used to practice this dance, which involved huddling close together in a circle on the floor, and shuffling their bodies around in imperceptibly tiny, very rapid movements. One of my fellow students used to say that he thought this dance inspired modern styles such as Twerking.</dd>
<dt>Arctic robot dance</dt>
<dd>An interesting example of historic misinformation, English explorers in the 1960s believed to have discovered a new dance style characterized by "robotic", stilted movements, being practiced by inhabitants of Northern Alaska and Canada. Later on however it was discovered that they were just moving like this because they were really cold.</dd>
</dl>
<p>
For more of my research, see my <a href="http://www.example.com">exotic dance research page.</a>
</p>
<p>
Yours sincerely,<br />
Dr Eleanor Gaye
</p>
<footer>
<blockquote><p>University of Awesome motto: "Be awesome to each other." <cite>-- The memoirs of Bill S Preston, Esq</cite></p></blockquote>
</footer>
Hi there @drgaud!
Thanks for submitting your code. This is not looking too bad at all, but there are a few things to pick up on here:
- The
<address>element is a very confusing HTML element. It is not for marking up postal addresses, but for marking up the contact details of the person who created the current page. So it is not suitable for marking up the receiver address, and arguably it’d be better to just use a<p>for both addresses. Browsers don’t tend to do anything special with addresses. - In the postal addresses, you don’t need the final
<br />— there is nothing after it to break onto a new line. - You could just write
<br />as<br>— there is no reason these days to write XHTML-style empty elements with trailing slashes. - I like the way you’ve used
<sup>elements on the dates! I didn’t do this in my version. But you missed the one off 2nd May 2017
-
<u>is presentational HTML, so you shouldn’t really be using this. For an underline presentational effect, you should really use CSS (something like<span class="under">ok</span>and then.under { text-decoration: underline; }would be better, but I appreciate that we haven’t covered CSS by this position in the course) - You don’t need the
<sup>in30<sup>°</sup>C— this is already a properly positioned degree character.
This is my contribution, i used a free formater, i apologise for the weird indentation.
I also try to use the div element … am I on the right track ?
Résumé
body
{
max-width: 800px;
margin: 0 auto;
}
.sender-column
{
text-align: right;
}
h1
{
font-size: 1.5em;
}
h2
{
font-size: 1.3em;
}
p,ul,ol,dl,address
{
font-size: 1.1em;
}
p, li, dd, dt, address
{
line-height: 1.5;
}
</style><title>Letter</title></head><body><div><p class="sender-column"><I><strong>Dr. Eleanor Gaye <br></strong>
Awesome Science faculty
<br>
University of Awesome
<br>
Bobtown, CA 99999,
<br>
USA
<br><strong>Tel</strong>
: 123-456-7890
<br><strong>e-mail</strong>
: no_reply@example.com
<br></I><br><time datetime="2016-01-20">
20 January 2016
</time><br></p></div><div><p><i><strong>Miss Eileen Dover</strong><br>
4321 Cliff Top Edge
<br>
Dover, CT9 XXX
<br>
UK
</i><br><br></p></div><h1>Re: Eileen Dover university application</h1><div><p>
Dear Eileen,
<br><br>
Thank you for your recent application to join us at the University of Awesome's science faculty to study as part of your
<u>
PhD
</u>
next year. I will answer your questions one by one, in the following sections.
<br></p></div><h1>Starting dates</h1><div><p>
We are happy to accommodate you starting your study with us at any time, however it would suit us better if you could start at the beginning of a semester; the start dates for each one are as follows:
</p></div><div><ul><li>First semester: <time datetime="2016-09-09"> 9 September 2016 </time></li><li>Second semester: <time datetime="2017-01-15"> 15 January 2017</time></li><li>Third semester: <time datetime="2017-05-02"> 2 May 2017 </time></li></ul></div><div><p>
Please let me know if this is ok, and if so which start date you would prefer.
<br>
You can find
<a href="http://example.com"> more information about important university</a>
dates on our website.
</p></div><h1>Subjects of study</h1><div><p>
At the Awesome Science Faculty, we have a pretty open-minded research facility — as long as the subjects fall somewhere in the realm of science and technology. You seem like an intelligent, dedicated researcher, and just the kind of person we'd like to have on our team. Saying that, of the ideas you submitted we were most intrigued by are as follows, in order of priority:
</p></div><div><ol><li>
Turning H
<sub>
2
</sub>
O into wine, and the health benefits of Resveratrol (C
<sub>
14
</sub>
H
<sub>
12
</sub>
O
<sub>
3
</sub>
.)
</li><li>
Measuring the effect on performance of funk bassplayers at temperatures exceeding 30°C (86°F), when the audience size exponentially increases (effect of 3 ×
<var>
10
<sup>
3
</sup></var>
; increasing to 3 ×
<var>
10
<sup>
4
</sup></var>
.)
</li><li><abbr title="Hypetext Markup Language">
HTML
</abbr>
and
<abbr title="Cascading Style Sheets">
CSS
</abbr>
constructs for representing musical scores.
</li></ol></div><div><p>
So please can you provide more information on each of these subjects, including how long you'd expect the research to take, required staff and other resources, and anything else you think we'd need to know? Thanks.
</p></div><h1>Exotic dance moves</h1><div><p>
Yes, you are right! As part of my post-doctorate work, I did study exotic tribal dances. To answer your question, my favourite dances are as follows, with definitions:
</p></div><dl><dt><b>
Polynesian chicken dance
</b></dt><dd>
A little known but very influential dance dating back as far as 300
<abbr title="Before-Christ">
BC
</abbr>
, a whole village would dance around in a circle like chickens, to encourage their livestock to be "fruitful".
</dd><dt><b>
Icelandic brownian shuffle
</b></dt><dd>
Before the Icelanders developed fire as a means of getting warm, they used to practice this dance, which involved huddling close together in a circle on the floor, and shuffling their bodies around in imperceptibly tiny, very rapid movements. One of my fellow students used to say that he thought this dance inspired modern styles such as Twerking.
</dd><dt><b>
Arctic robot dance
</b></dt><dd>
An interesting example of historic misinformation, English explorers in the 1960s believed to have discovered a new dance style characterized by "robotic", stilted movements, being practiced by inhabitants of Northern Alaska and Canada. Later on however it was discovered that they were just moving like this because they were really cold.
</dd></dl><p>
For more of my research, see my
<a href="http://example.com"> exotic dance research page.</a>
Yours sincerely,
</p><br><br><p><strong>Dr Eleanor Gaye</strong><br></p><p>
University of Awesome motto:
<q>
Be awesome to each other.
</q>
--
<cite>
Bill S Preston,
<abbr title="Esquire">
Esq
</abbr></cite></p></div></body></html>
I would highly appreciate some feedbacks, thks
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>纽臂大学科学院的哲学博士学位课程申请回复</title>
<meta charset="utf-8">
<meta name="author" content="cetewhale">
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p class="sender-column italic">
中国北京市门头沟区，102300<br>
纽臂大学 纽臂科学院<br>
<strong>李雷</strong> 教授<br>
<strong>联系电话</strong>：123-456-7890<br>
<strong>电子邮件</strong>：no_reply@example.com<br>
</p>
<p class="sender-column">
<time datetime="2019-02-22">2019年2月22日</time>
</p>
<p class="italic">
中国海南省三亚市亚龙湾<br>
<strong> 韩梅梅 女士</strong>
</p>
<h1>回复：韩梅梅学位申请</h1>
<p>亲爱的韩同学： </p>
<p>感谢你申请纽臂大学科学院的哲学博士学位课程，下面我将就你的问题依次做出解答。</p>
<h2>开学日期</h2>
<p>欢迎你在任意时间来校学习，但在学期开始时来校更理想，每学期开学时间如下：</p>
<ul>
<li>第一学期：<time datetime="2019-09-09">2019 年 9 月 9 日</time></li>
<li>第二学期：<time datetime="2020-01-15">2020 年 1 月 15 日</time> </li>
<li>第三学期：<time datetime="2020-05-02">2020 年 5 月 2 日</time> </li>
</ul>
<p>请告诉我你是否愿意在学期开始时来校，并告知你选择的学期。</p>
<p>你可以在我们的网站上找到更多关于<a href="https://example.com/">学校重要日期</a>的信息。</p>
<h2>学习科目</h2>
<p>纽臂科学院本着兼容并蓄的原则，课题涉及一些科技领域。欢迎有才智、态度专注的研究人员参加，也欢迎符合我们价值观的朋友加入。我们最感兴趣的课题如下（按优先度排序）：</p>
<ol>
<li>把水（H<sub>2</sub>O）转变为酒的方法，以及白藜芦醇（c<sub>14</sub>H<sub>12</sub>O<sub>3</sub> ）对健康的帮助作用。</li>
<li>测量室温 30° C（86° F）时，观众人数呈指数级增加对放克贝斯手表演的影响（3 × 10<sup>3</sup>> 3 × 10<sup>4</sup> 效应）。</li>
<li> 使用 HTML 和 CSS 构建乐谱。</li>
</ol>
<p>请针对上述课题提供更多的信息。包括研究时长、所需资源，以及其它未尽事宜，谢谢。</p>
<h2>异域舞蹈</h2>
<p>你说的没错！异域部落舞蹈是我博士后研究项目的一部分。为了回答你的问题，我在下面列出我个人最喜欢的舞蹈种类和相关介绍：</p>
<dl>
<dt>波利尼西亚小鸡舞</dt>
<dd>一种古老、神秘但影响广泛的舞蹈，可追溯至公元前 300 年，整个村庄围绕着一个小鸡形状的圈跳舞，祈祷牲畜肥美。</dd>
<dt>冰岛布尔曳步舞</dt>
<dd>在冰岛人学会用火取暖之前，他们之间流行着这种舞蹈，舞蹈时人们在地上拥成一个圈，用极小极快的动作晃动身体。我有一个学生说冰岛曳步舞是现代甩臀舞的鼻祖。</dd>
<dt> 北极机器人舞</dt>
<dd>一个有趣的历史误传，二十世纪六十年代的英国探险者宣称发现了一种像“机器人跳舞”的舞蹈，这种舞蹈动作僵硬，流行于加拿大和阿拉斯加北部地区。后来人们发现这里的居民是因为天气太冷了才做出这样的动作。</dd>
</dl>
<p>更多信息请查看我的<a href="https://example.com/" title="异域舞蹈研究">异域舞蹈研究</a>网页。</p>
<p>李雷 教授</p>
<p>纽臂大学校训：“人人皆可纽臂” —— <cite>诸葛中天 绅士</cite></p>
</body>
</html>Hi there @me.8dream, thank you for sending your code into us.
I had a look and, while the end result is not too bad, there are a few improvements I think you could do here:
- For a start, you don’t really need any of the
<div>elements you’ve included here.<p>s and headings (e.g.<h1>) are enough to create the required structure for the letter, and the<div>s are not needed. - Never create a space between paragraphs using two
<br><br>tags. You need<p>elements for paragraphs. - Don’t use presentational markup like
<i>or<u>unless you really have to. Such effects should be added using CSS. - empty elements do not need a trailing slash — so
<br>, not<br />. - You don’t need
<br>elements at the end of paragraphs (<p>) - they create their own separating space by default.
Hello @cetewhale, and welcome! Thank you for sending your code to us.
I have a had a look, and the markup you have used for the letter looks good! It is difficult for me to mark it throughly as I don’t understand the language, but maybe you could have a look at our original version to see how you HTML compares to it? You can find it at https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-finished/index.html
Thank you!
Thanks for your reply！