你是否意识到用户与Web应用程序直接交互的唯一渠道是通过Web页面？对于用户来说，Web页面实现得不好，服务端将变得与用户毫不相干！如今用户对Web页面之外有更多的期待：必须加载够快、传递需要的服务、舒适的在各个设备上浏览：从台式电脑到移动手机。 在本门课程中，我们将学习每个Web页面程序员需要知道的基本工具。我们将从最基本的如何用HTML、CSS实现现代的Web页面学习开始。然后我们将进一步学习如何编写页面代码，例如根据用户屏幕的大小来自动调整组件位置和它们的大小。你将能够自己编写一个台式电脑和移动手机都能用的网页。不需要“捏和缩放”！最后，我们将对网络上最普遍、最受欢迎的、令人难以置信的强大语言：Javascript，进行深入的介绍。用Javascript，你将能够建立一个全功能的Web应用程序，通过利用Ajax传递服务端的功能和数据给最终用户。
Lecture 6: Heading Elements (and some new HTML5 semantic comments)
Loading...
來自 Johns Hopkins University 的課程
面向 Web 开发者的 HTML、CSS 与 Javascript 课程
4023 個評分
從本節課中
Introduction to HTML5
In this module we will learn the basics of HTML5. We'll start with instructional videos on how to set up your development environment, go over HTML5 basics like valid document structure, which elements can be included inside other elements and which can not, discuss the meaning and usefulness of HTML5 semantic tags, and go over essential HTML5 tags.
與講師見面
Yaakov ChaikinAdjunct Professor, Graduate Computer Science
Whiting School of Engineering
[SOUND] Okay, so in this lecture,
we're going to talk about heading elements and some new HTML5 semantic elements.
First of all, what does the word semantic mean?
Well, definition of semantic is relating to meaning in language or logic.
In other words,
it has some inherent meaning, the names have some inherent meaning.
Now when it applies to HTML, what does semantic html element mean?
Well, a semantic html element is an element that implies some
meaning to the content.
In other words, it's an element that tells you something about the content,
whether its importance, whether it's a little bit of its description,
it basically hints to you to that meaning.
Now the reason that's important is because us, humans, and
machines can understand the meaning of that content surrounded by a semantic
tag much better than if we just surround it with some tag that doesn't really
tell us anything other than this is some sort of a division within the document.
And also, it may help search engine rankings.
In other words, SEO and SEO stands for search engine optimization.
Now I stress may here because there is some controversy and
disagreement among experts if this is really true.
Now experts who disagree with this say that modern search engines are so
sophisticated nowadays that just about
nothing other than the content itself affects the ranking of the page.
So you're welcome to go and Google for the words, do semantic HTML5
tags help SEO, and you could see a lot of discussion on this topic.
Now let's take a look at an example of the first type of semantic tags
that we're going to look at, the headings.
Okay, so here, I'm in Sublime Text and I'm in the examples Lecture06 folder
looking at the file called headings.html, and this is a very simple HTML document.
It has all the h1 elements, h1, h2, h3 and all the way to the h6 element,
well, basically, all the available heading elements.
And what these headings are trying to convey is that the heading content
between opening h1 and the closing h1 element is the most
important heading in the document, and on, and on, and on.
So h6 would be also a heading of the document, but
it's the least important one of them all.
So, let's take a look at what this document looks like in the browser,
and here it is.
So we can see the browser defaulted to styling that basically,
visually tells us that this is the main heading.
Heading number 2 is a little less important and on and
on all the way to Subheading 6, which is the least important of the headings.
Couple of important points to understand about these elements.
First, even though their default rendering in the browser appears to give them
visual distinction, these should not be used for styling.
These elements are only meant to convey structure of your HTML page, nothing more.
With CSS,
any regular development can be styled to look like any one of these heading tags.
So, why not just use a div?
Because if we did, we would lose the meaning of what a heading is.
Second, something that's marked h1 is obviously the most important and
generalized description of the content of this page.
And while there are disagreements among the SEO experts about how effective
these semantic tags are for helping your search engine rank in general,
everyone agrees that when it comes to the heading tags, and specifically the h1 tag,
that it is of utmost importance to use it and that it should contain the wording,
which truly conveys the central topic of the rest of the content.
Okay, so let's take a look at another HTML document called semantic-elements.html.
And that file is located in the examples Lecture06 folder right
next to the headings.html file that we just looked at.
And in this document, I introduced a whole bunch of new HTML5 semantic tags.
And so, let's go over them right now.
So the first thing you see here is the new header tag, and
the header tag basically contains some header information about the page.
So usually, it consists of company logo, some tagline, sometimes, navigation.
Actually, often, navigation is contained within the header as well.
As you can see, this is exactly what we have right here.
The nav tag signifies some content that is used for navigation within our website.
Afterwards, we have our familiar h1 tag and
you should absolutely always have that.
And then we have a couple of set of section tags here.
And within each section tag, we have a bunch of article elements.
If you look at the HTML5 specification, you'll see that the way the section
element is defined and the way the article element is defined is that it's usual or
it makes sense that the article should go inside the section element.
However, that is not always the case and there's certainly no hard rule about it.
It's very possible that the article can also have sections within that.
So, you're certainly not constrained to have this structure.
We scroll down, we see we have an aside tag.
An aside tag is basically an element that communicates that there's something
that is inside of this element that is related to the main content of the page,
but not as direct a relationship as the main content.
And finally, we have the footer tag, which, just like it sounds,
has the footer information in it.
Now, the thing to note about all of these tags is they're all block level elements.
So as far as we're concerned,
visually we might as well have just used the div tags everywhere.
However, if you look at the code, it is obvious how much easier it is to read and
understand what's going on structurally in this HTML page.
For example, you can easily see that Article 1, 2 and
3 are somehow related and are somehow different from Articles 4,
5 and 6 since they live in two different sections.
That's the power of the semantic elements.
They inherently convey some meaning.
Let's take a look at this page in the browser.
As you can see, here's our header element and
the nav element is sitting right inside of it.
And as you can see, the section article, the footer, they're all block level
elements since every single one of them is actually on their own new line.
So in summary, well chosen content for h1 element is crucial
to search engine optimization, and you should definitely take advantage of that.
And remember, semantic elements do allow you for
more meaningful expression of the structure of your HTML code, HTML page,
but they don't really give you any more functionality than a regular div or
regular span would without it.
Next, we're going to talk about Structuring Content with Lists.
