User Guide Cancel

Work with head content for pages

Search
Dreamweaver

Dreamweaver

Open app
  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

View and edit content in a Dreamweaver web page, set the meta properties and the page title, specify keywords and descriptions for a page, and more.

Pages contain elements that describe the information on the page, which is used by search browsers. You can set the properties of head elements to control how your pages are identified.

View and edit head content

You can view the elements in the head section of a document in Code view, or by using the Code inspector.

Insert an element into the head section of a document

  1. Select a head tag from Insert > HTML.

  2. Enter options for the element in the dialog box that appears, or in the Property inspector.

Edit an element in the head section of a document

You can edit Head elements by directly typing in the code in Code view, or in the Property Inspector.

To edit elements in the head section using the Property Inspector:

  1. Select the head element in the DOM panel (Window > DOM panel). 

    The Property Inspector displays the properties for the selected element.

  2. Set or modify the properties of the element in the Property inspector.

Set the meta properties for the page

A meta tag is a head element that records information about the current page, such as the character encoding, author, copyright, or keywords. These tags can also be used to give information to the server, such as the expiration date, refresh interval, and POWDER rating for the page. (POWDER, the Protocol for Web Description Resources, provides a method for assigning ratings, such as movie ratings, to web pages.)

Add a meta tag

  1. Select Insert > HTML > Meta.

  2. Specify the properties in the dialog box that appears.

Edit an existing meta tag

You can edit meta elements by directly typing in the code in Code view, or in the Property Inspector.

To edit elements in the meta section using the Property Inspector:

  1. Select the head element in the DOM panel (Window > DOM panel). 

    The Property Inspector displays the properties for the selected element.

  2. Select a meta tag from the DOM panel.

  3. Specify the properties in the Property inspector.

    Attribute

    Specifies whether the meta tag contains descriptive information about the page (name) or HTTP header information (http-equiv).

    Value

    Specifies the type of information you’re supplying in this tag. Some values, such as description, keywords, and refresh, are already well defined (and have their own individual Property inspectors in Dreamweaver), but you can specify practically any value (for example, creationdate, documentID, or level).

    Content

    Specifies the actual information. For example, if you specified level for Value, you might specify beginner, intermediate, or advanced for Content.

Set the page title

There is only one title property: the title of the page. You can edit the page title using one of the following methods:

  • Edit the title in the code directly (in Code view)
  • Select the title tag in the DOM panel, and edit the title in the Property Inspector

Specify keywords for the page

Many search-engine robots (programs that automatically browse the web gathering information for search engines to index) read the contents of the Keywords meta tag and use the information to index your pages in their databases. Because some search engines limit the number of keywords or characters they index, or ignore all keywords if you go beyond the limit, it’s a good idea to use just a few well-chosen keywords.

Add a Keywords meta tag

  1. Select Insert > HTML > Keywords.

  2. Specify the keywords, separated by commas, in the dialog box that appears.

Edit a Keywords meta tag

You can edit the keywords meta descriptions using one of the following methods:

  • Edit the keyword in the code directly (in Code view)
  • Select the meta tag for the keyword in the DOM panel, and view, modify, or delete the keywords in the Property Inspector.
Note:

Keywords must be separated by commas.

Specify descriptions for the page

Many search-engine robots (programs that automatically browse the web gathering information for search engines to index) read the contents of the Description meta tag. Some use the information to index your pages in their databases, and some also display the information on the search results page (instead of displaying the first few lines of your document). Some search engines limit the number of characters they index, so it’s a good idea to limit your description to a few words (for example, Pork barbecue catering in Albany, Georgia, or Web design at reasonable rates for clients worldwide).

Add a Description meta tag

  1. Select Insert > HTML > Description.

  2. Enter descriptive text in the dialog box that appears.

Edit a Description meta tag

You can edit the meta descriptions using one of the following methods:

  • Edit the description in the code directly (in Code view)
  • Select the meta tag for the description in the DOM panel, and edit the description in the Property Inspector.

Set the refresh properties of the page

Use the Refresh element to specify that the browser should automatically refresh your page—by reloading the current page or going to a different one—after a certain amount of time. This element is often used to redirect users from one URL to another, often after displaying a text message that the URL has changed.

Add a Refresh meta tag

  1. Select Insert > HTML > Meta.

  2. Specify the properties as follows in the dialog that is displayed:

    Attribute

    Specifies that the meta tag contains HTTP header information (http-equivalent).

    Value

    Specifies the type of information you’re supplying in this tag is refresh.

    Content

    Specify the time in seconds to wait before the browser refreshes the page. To make the browser refresh the page immediately after it finishes loading, enter 0 in this box.

Edit a Refresh meta tag

You can edit the refresh meta tag using one of the following methods:

  • Edit the properties in the code directly (in Code view)
  • Select the meta tag for refresh in the DOM panel or in the code, and edit the properties in the Property Inspector.

Edit a Base meta tag

You can edit the Base element that is used to set the base URL that all document-relative paths in the page are considered relative to.

  1. Select the Base element in the DOM panel.

  2. In the Property inspector, specify the Base meta tag properties.

    Href

    The base URL. Click the Browse button to browse to and select a file, or type a path in the box.

    Target

    Specifies the frame or window in which all linked documents should open. Select one of the frames in the current frameset, or one of the following reserved names:

    • _blank loads the linked document in a new, unnamed browser window.

    • _parent loads the linked document into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, then this is equivalent to _top; the linked document loads into the full browser window.

    • _self loads the linked document in the same frame or window as the link. This target is the default, so you usually don’t have to specify it.

    • _top loads the linked document in the full browser window, thereby removing all frames.

Edit a Link meta tag

You can edit a link tag that defines a relationship between the current document and another file.

Note:

The link tag in the head section is not the same thing as an HTML link between documents in the body section.

  1. Select the Link element in DOM panel or Code view.

  2. In the Property inspector, specify the Link meta tag properties.

    Href

    The URL of the file that you are defining a relationship to. Click the Browse button to browse to and select a file, or type a path in the box. Note that this attribute does not indicate a file that you’re linking to in the usual HTML sense; the relationships specified in a Link element are more complex.

    ID

    Specifies a unique identifier for the link.

    Title

    Describes the relationship. This attribute has special relevance for linked style sheets; for more information, see the External Style Sheets section of the HTML 4.0 specification on the World Wide Web Consortium website at www.w3.org/TR/REC-html40/present/styles.html#style-external.

    Rel

    Specifies the relationship between the current document and the document in the Href box. Possible values include Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help, and Bookmark. To specify more than one relationship, separate values with a space.

    Rev

    Specifies a reverse relationship (the opposite of Rel) between the current document and the document in the Href box. Possible values are the same as those for Rel.

 Adobe

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links

Legal Notices    |    Online Privacy Policy