Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

HTML5 code hinting

From: Dreamweaver CS5.5 New Features

Video: HTML5 code hinting

As you might expect, the area most impacted by Dreamweaver's HTML5 support is the coding environment. By adding HTML5 elements and attributes to Dreamweaver's code hinting, the process of hand-coding HTML5 becomes a lot easier. So I have the contact_start.htm from the 02_02 folder open, and I am just going to go ahead and do a save-as. And in the same directory, I am going to save this as contact_structure.

HTML5 code hinting

As you might expect, the area most impacted by Dreamweaver's HTML5 support is the coding environment. By adding HTML5 elements and attributes to Dreamweaver's code hinting, the process of hand-coding HTML5 becomes a lot easier. So I have the contact_start.htm from the 02_02 folder open, and I am just going to go ahead and do a save-as. And in the same directory, I am going to save this as contact_structure.

So we're just going to build the basic structure of our contact page. The first thing I am going to do is go right between the body tags, and I am going to do a technique that's quite common in most web pages today; I'm just going to add a wrapper div tag. So I am just going to open up an angle bracket. My element list comes up, and as I begin to type, it goes through the elements. So if I just type in 'di', I can hit Enter or Return and Dreamweaver will finish my div tag for me. It also supports code hinting for attributes. So if I hit Space and then an i, it will go through all the attributes with an i.

And if I type in id and hit Enter or Return, it will not only finish that attribute for me, but it will also go ahead and finish the attribute syntax. And all I have to do now is give it the ID that I want, which is wrapper. I can then go outside of the quotation marks, close the angle bracket, and then if I want to close the div tag, simply go down to the next line, begin to close the tag, and it will self close for me. That's code hinting. Now, a wrapper div tag is not new to HTML5; people have been using this technique for years as a way to center content and define width, and that's what I am going to use it for here.

What I was really wanting to show you more was code hinting and how Dreamweaver makes it a lot easier for you to hand-code your elements. Now, prior to the release of the HTML5 pack there was no code hinting support for HTML5, so as you hand-coded it, you had to basically just do it the long way. That's usually not a huge burden, but code hinting makes this more efficient. So let's check out how Dreamweaver supports code hinting for HTML5 elements, and we're going to do that by building our contacts page structure. So just inside my wrapper div tag, the first element I want to start with is the new HTML5 header element.

So just inside that, I am going to open up my bracket, begin to type header, and again, I can just hit Return or Enter, and it will finish it for me. Now, Dreamweaver supports all the normal attributes for this as well, so I can do an id for header, and I am just going to call this one mainHeader. I'll go ahead and close that out and close my header element. So you can see how quick and easy it is to add these new HTML5 elements. Now, inside my header is going to be my main site navigation, so for that I'll use the new nav element, so again, just an n and an a brings me nav.

And again, I am just going to do an id here, and that's going to be mainNavigation, and I'll close it. So you can see you can quite rapidly build these elements out. Now, just after the header, I am going to have a new section element. Sections do just that; they create a new section of content, and they also create a new section in the document's outline. So that's going to be section id="mainContent". And we'll close that as well. Now, there's no law against how many headers you can use on your page in HTML5.

So I want my section to have its own header. so right inside my section tag, I am going to add a brand-new header, and that one I am going to go ahead and give it an id of contentHeader. And again, I am just going to close that tag. After my contentHeader, I need an article. Now, articles basically allow us to create sections of content, and generally they are used for any content that you might want to republish or content that can stand on its own.

So this article is going to have an id of mainArticle. And if you're wondering, hey, do I have to give all this HTML5 elements an ID? Absolute not. You certainly don't. I'm simply using it as a way of identifying what that content is going to be to make the structure a little bit clearer. Now, just after that, I am going to go right below the section and create a new aside. Asides are elements that are related to the rest of the page content but aren't germane to the page content. So they're just what they say. They are the sidebars, pull quotes, things like that.

I am going to go ahead and give this an id of secondaryContent. And we're almost done. I am going to go ahead and close that out. And then finally, just underneath the aside, I am going to go ahead and add a footer. So that's another new HTML5 element is the footer. This one is going to have an id of pageFooter. And then I am going to go ahead and close that as well and save this file. So you see how quickly and easily we can code these HTML5 elements with the code hinting editions in Dreamweaver CS5.5.

Now, that's not the only place that they've added support for new elements; in our next movie, we're going to take a look at some of the other locations that you can find support for these new HTML5 elements.

Show transcript

This video is part of

Image for Dreamweaver CS5.5 New Features
Dreamweaver CS5.5 New Features

18 video lessons · 12671 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS5.5 New Features.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.