Explore
For Enterprise
Join for Free
Log In

Parcourir
Rechercher
For Enterprise
Connexion
Inscrivez-vous gratuitement

02.03 - Semantic Tags

Loading...

Introduction to HTML5

Université du Michigan

4.7 (9,065 notes) | 150K étudiants inscrits

Cours 1 de 5 dans Web Design for Everybody: Basics of Web Development & Coding Spécialisation

Thanks to a growing number of software programs, it seems as if anyone can make a webpage. But what if you actually want to understand how the page was created? There are great textbooks and online resources for learning web design, but most of those resources require some background knowledge. This course is designed to help the novice who wants to gain confidence and knowledge. We will explore the theory (what actually happens when you click on a link on a webpage?), the practical (what do I need to know to make my own page?), and the overlooked (I have a page, what do I do now?). Throughout the course there will be a strong emphasis on adhering to syntactic standards for validation and semantic standards to promote wide accessibility for users with disabilities. The textbook we use is available online, “The Missing Link: An Introduction to Web Development and Programming” by Michael Mendez from www.opensuny.org. This course will appeal to a wide variety of people, but specifically those who would like a step-by-step description of the basics. There are no prerequisites for this course and it is assumed that students have no prior programming skills or IT experience. The course will culminate in a small final project that will require the completion of a very simple page with links and images. The focus of this course is on the basics, not appearance. You can see a sample final page at http://intro-webdesign.com/html5-plain.html. This is the first course in the Web Design For Everybody specialization. Subsequent courses focus on the marketable skills of styling the page with CSS3, adding interactivity with JavaScript and enhancing the styling with responsive design. You can see a sample site for the capstone course at http://intro-webdesign.com/

Visualiser le programme de cours

Compétences que vous apprendrez

Web Design, Web Accessibility, Html, Html5

Avis

4.7 (9,065 notes)

5 stars
6,937 ratings
4 stars
1,774 ratings
3 stars
279 ratings
2 stars
34 ratings
1 star
41 ratings

TB

Nov 11, 2017

Good introduction to web development. The teacher (Colleen van Lent) has great attitude and seems interested in getting students themselves interested... she explained the intro topics very clearly.

CR

Jan 31, 2016

Exceptional course, taught by a friendly, talented teacher. Perfect introduction to HTML. While the course seems to be still under development (there is the odd typo or the like) it's a great start.

À partir de la leçon

Week Two

This week you will need to take a deep breath and jump into coding. I will cover a large number of HTML tags, but it is important that you do more than just listen to these video and read the text book material. You need to practice (and fail!) in order to learn. Believe it or not, once you master the basic idea of using tags and attributes you will know everything you need to use any HTML5 tag. The page may not look the way you want it to look yet, but you will be able to use text, links, images, tables, and even music and videos! If you want to refer to a textbook this week for reinforcement of concepts, we will be using the Shay Howe online textbook as a reference. I will include links after the lectures, but some students prefer to read before the videos. (My preferred approach is to read/watch/read again.)

02.02 - HTML5 Tags and Syntax12:10

02.03 - Semantic Tags6:04

02.04 - Template Page7:11

Enseigné par

Colleen van Lent, Ph.D.
Lecturer
Charles Russell Severance
Clinical Professor

Transcription

Hi everybody. Today we're gonna be talking about some of the newer HTML5 tags that I like to refer to as the semantic tags. This is going to continue our conversation about how we're trying to make our webpages the most accessible as possible to as many people. Before we begin talking about specific tags, though, I want to talk to you about the design of your webpage. Really, the most important step in your web design is the design. Once you're down pat with the different tags and typing in files, we're gonna change our focus to how you want to lay out your page. And you need a really clear picture of what you want to create before you can begin coding in earnest. So let's take a look at this sample page. Again, it's just a quick sketch, and it shows that I would like to have a header section, a footer section, and a few other sections embedded in between the two of them. Once I know that that's the kind of design I want, I can begin coding. So you may recall that one of the most common tags used to be the div tag, because in the beginning, kind of dum, dum, dum, you did everything with div. You would go through your page, group it together, and put each group into a div tag. These divs almost always had some sort of special class or ID associated with them. So for instance, one div might have the class of header, another the section, another the footer. This way, you could back to your design and really break it up in a way that worked best for you. The first tag that I'll be talking to you about today is the header tag. The header tag is typically used to group together introductory or navigational aids. So you'd put in your title, perhaps your navigation bar, anything that really lets the user know right off the bat what this page is about. The thing I want you to understand about the header tag is that it is a block tag, and nothing more than that. There's no special formatting or anything along that line. However, it does let the user know that this is the header section. Now, most people will never see the tags. Remember, the browser looks at the tag and doesn't display it, instead formats its content. But for people who are using screen readers or other assistive devices, this is a great way for them to find what they're looking for if they're not using visual clues. Another point I wanna make is that the header tag should not be confused with the head or different heading tags. This is going to happen to you a lot. Just remember that the head tag is for metadata, and the header tag is more of just an aid. The next tag I'm gonna talk to you about today is the nav tag. The nav is basically a section of your page that links to other pages or parts within your page. So, inside your nav you're not going to have links to Facebook, or Google, or your LinkedIn account or anything like that. Instead, it's really just links that go to other parts of your site. So for instance, here I've made unordered list with three links. Each of them go to a different part of your page. There's a lot of debate, for better, for worse, as to whether or not your nav tags should be using lists, but the important thing is to include the nav tag to help people navigate through your page. Oftentimes, you'll find the nav tag embedded inside the header tag. Another tag is the footer tag, and this is a section that contains information that is pretty typical for the bottom of the page, such as copyright data, related documents, your links to social media. And while I say that it's usually at the bottom of the page, this is not required, nor does using the footer tag actually make it that it'll show up at the bottom. So in this example here, I have my footer tag, my special entity to make the copyright symbol, and then my name with a line break. And then I've also included a link back to my main site. Some of our other semantic tags have a little more oomph to them. So for instance, one of the new tags is the figure tag, and it has a lot more semantics than the image tag we've gone over previously. Every figure can include additional information. So you can include an image, you can include multimedia, you can include a combination of all of them. But it also has some additional tags such as the figcaption. So what this is going to do is somebody who, it provides additional information for somebody who may not be able to see it. So the picture normally just floats by itself when its in an image tag, this lets you say, this text goes specifically with this image. Now again, we do have the alt tag, which helps describe the picture, but you have to remember, most of us will never see that. There are a number of other new tags in HTML 5, and it's not really possible for me to go over all of them. Instead, you'll find that as you develop your pages and after you've done your initial web design, you'll logically just head towards these different tags. Some of them are structural elements, such as article, summary, sections, etc. Others you won't be using until we create forms. Another would be input types. Have you ever noticed that sometimes on your phone, when you click on certain buttons, different keyboards will pop up, depending on whether you're typing in an email or a URL? These are all things to the new HTML 5. Email, data, color, etc., tags. We're also gonna be able to talk about graphics elements such as canvas, and also media elements which let you go ahead and put in your movies and music of your choice. The important thing to remember is that if you're developing your page, and you find yourself using a lot of divs, you're going astray. You really want to use the best tag available that will give the most meaning to the users. Semantic guide tags are gonna help guide your users to the information in your page. And that's really what you want to do, you want to make your page the most accessible to as many people as possible.

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2019 Coursera Inc. Tous droits réservés.

Disponible sur Google Play

Coursera
À propos
Direction
Carrières
Catalogue
Certificats
Certificats MasterTrack™
Diplômes
For Enterprise
For Government
Pour le campus

Communauté
Learners
Partners
Developers
Beta Testers
Translators

Se connecter
Blog
Facebook
LinkedIn
Twitter
Instagram
YouTube
Blog Tech

Plus
Conditions
Confidentialité
Aide
Accessibilité
Presse
Contact
Répertoire
Filiales