Unit 1 - HTML and the Web
How do you place images on a webpage?
<body> <img src="mydog.jpg" alt="My dog" title="My very smart dog"/> </body> The src attribute tells the browser where the image to be displayed is located (the folder and file name). The alt attribute contains the alternate text that the browser will display if it is not able to find and load the designated image. This is also the text that will be read aloud to those using a screen reader. To create a tool tip (text the browser displays when a user pauses over an image with the mouse), the optional title attribute is used.
How to select a web host: support
Finally, determine what kind of support is needed from the website host. -Will e-mail addresses that have the website's domain name in them be needed? -Will access to the website host for questions be necessary at any hour of the day? -How extensive of a control panel, or location of login and website control, will be needed? -How much storage space is needed such as for large document uploads or transfers? -Will customers be making secure transactions on the website?
How do you create hyperlinks?
HTML uses the <a></a> tag to create hyperlinks. The tag name "a" stands for "anchor". <body> <a href="http://www.w3schools.com">Click to visit W3Schools.com</a> </body>
HTML stands for
Hypertext Markup Language
What is HTML?
Hypertext Markup Language (HTML), is called "display markup" because the tags tell the browser how to display the marked-up text. An HTML document may also contain instructions for the browser about where to find other files needed to render the page properly, such as image files, JavaScript code, and cascading style sheets (CSS).
Define hypertext meaning in HTML
Hypertext, which is simply text containing hyperlinks that can be used to go to other hypertext (web) pages
what is margin?
Margin describes how much space there is between the content in the selector and the other elements on the page. Left, right, top, or bottom margins can be styled individually.
What is an empty element?
Some HTML elements do not have content and are called empty elements. Here the start and end tags are combined into a single tag. For example, <hr /> inserts a straight line.
static positioning
Static positioning is the HTML default. Elements appear according to normal page flow in HTML. They are not affected by top, bottom, left, and right properties.
What is the href attribute?
The anchor tag uses the href attribute (for "hypertext reference") to tell the browser the link's destination or target. The content between the anchor start and end tags appears on the web page and, when clicked, causes the browser to go to the href target.
What are tags?
The annotations used by markup languages are called tags, and consist of a tag name surrounded by angle brackets, such as <p>.
what is the property?
The property is the type of style you want to apply, such as color or font size.
what is text-align?
The text-align property controls the alignment of text within an element using values such as left, right, and center.
How to create a pointer:
You create the pointer using the self-closing link tag <link />, as shown below. This is similar to the way an <img> tag points to a picture's source file. Ex: <head> <title>Page Title</title> <link rel="stylesheet" href="style.css" type="text/css"/> </head>
CSS position property
body { position: relative; left: 50px; top: 50px; }
how do you determine width?
Likewise, the total width of a box is the sum of the left and right margins, borders, padding, plus the content width.
css box model
In CSS, the term box model is used to describe the layout of elements on an HTML page. Each element can be thought of as a box consisting of margins, borders, padding, and the actual content (text, images, etc.) nested inside each other.
The benefits of placing layout and style information in a separate file are many, and include:
-more than one HTML page in a website can use the same CSS file -global style changes to a website can be made by editing the CSS -different CSS files can be used to enable a page to display well on different devices, such as laptops and smartphones
What are key elements that go into web design?
-no glaring gaps in the content, such as a site selling clothing that neglects to include images or sizes -navigation and search are well thought out, making it -easier to find desired information -a consistent theme appropriate to the audience is used throughout
What are some common tags for emphasizing text?
<body><p>This sentence has <em>italicized text</em>, <strong>bolded text</strong>, <u>underlined text</u>, <big>bigger text</big>, and <small>smaller text</small>.</p></body>
What is a server side programming language?
A Server Side Programming Language is a program that physically runs on the web host's computer. A Server Side Programming Language is always required to make a website work with a database.
What is the box layout?
A box layout consists of three or five well-placed boxes. Three or five boxes like these provide a simple way to make images the focal point of a web page. The majority of the page is taken up by three or five photos that could be a combination of text, graphics, or slideshows. This type of layout is popular with news websites that want to showcase the day's top news stories, photos, and links to additional stories.
what is a class?
A class is a grouping of HTML tags. CSS lets you declare style properties and values for the class in the same way as with an individual HTML tag selector. ex: .ClassName {property: value;} class="ClassName"
website host
A website host is an Internet hosting service that gives individuals and organizations the ability to make their websites accessible via the Internet. Website hosts provide a way to transfer files to a server and offer server space that can be purchased or leased. They also have professional systems administrators that monitor the servers to make sure they are consistently up and running.
absolute positioning
Absolute positioning puts an element at a specific place on the web page, outside the normal flow. Other elements move and behave as if the absolutely positioned element is not there, which means that absolutely positioned elements can overlap other elements.
What are the minimum HTML tags on a webpage?
At a minimum, all HTML documents contain the following tags. <html><head><title>My page title here</title></head><body>All page content here</body></html>
What do cascading style sheets do?
By using cascading style sheets, you can provide a browser with a structured scheme of rules for which style rule takes precedence over another. This enables the browser to present a web page in a cohesive style.
what is id?
CSS allows you to customize another special selector called id. While classes can be used multiple times with different elements throughout an HTML file, the id selector is used for a uniquely defined style. The id selector is defined with a # and uses the id attribute of the HTML element. ex: #idName {property: value;}
what are declarations?
Declarations go between curly brackets and indicate style changes. Each declaration consists of a property and a value.
How to put a word in italics in HTML
For example, to display a word in italics, the <em> tag is used. The HTML below shows this tag as it appears in the markup (tagged text document), followed by how it appears when displayed in a browser. Note that the browser does not display the tags, just the results. ex: This is a <em>formatted</em> word.
What are 2 markup languages?
HTML, or Hypertext Markup Language XML, or EXtensible Markup Language
How to select a web host: construction
Next decide if the website will be built by someone who knows programming languages or if a website host that offers an easy site builder system is the better solution. -Will the website be built by a programmer at a company? -Will the website be built by an individual who does not know any HTML and will need to use a visual or WYSIWYG, or "what you see is what you get," editor? -Does the website host have written or video tutorials explaining how to build and edit the website?
what is color?
The color property controls text color. It takes values such as red, yellow, blue, orange, and purple, among others.
what is the div tag?
The div tag, <div></div>, defines a division, or section, of an HTML document. It is most often used with CSS to apply style attributes to a block of content defined with <div> tags.
what is font style?
The font-style property is most often used to style text in italics, but it has three possible values: normal, italic, and oblique. Oblique is a lot like italic, but this value is not supported as widely in different browsers.
what is the selector?
The selector is the HTML element that you want to style. Normally this is an HTML tag, such as <p> or <body>. The rule affects all elements with the selected tag in the HTML code. (Outside the curly brackets)
what is text transform?
The text-transform property lets you style text in the selector tag as all lowercase, all uppercase, or capitalized (the first letter of each word capitalized).
how do you determine height?
The total height of a box is the sum of the top and bottom margins, borders, and padding in addition to the content height.
what is the value?
The value declares the style itself, such as the actual color or a point size for the font. A value must always be followed by a semicolon.
How to select a web host: purpose
To figure out what website host would work best, first determine the purpose of the website. Decide if the web pages will be used for personal, business, nonprofit organization, educational, or entertainment purposes. It could even be created for a combination of these purposes.
web servers
Web servers are the hardware or software that delivers content through the Internet. The primary job of a web server is to respond to requests from web client computers and provide the web pages and content that is requested.
what is width?
Width describes how wide a selector is. With one CSS rule, for example, you can set all of the <div> blocks on a page to the same width.
What issues can arise when using wrong syntax in HTML?
-inability of the web browser to display the web page at all -failure of items to appear -formatting problems such as the incorrect display of text, tables, or lists
What is accessibility?
Accessibility refers to the degree a website can be used by people with differing ability levels. For example: -people with severe visual impairment can use software like JAWS (freedomscientific.com), which reads the page content to them. -people with seizure disorders can safely use a site without being exposed to rapidly flashing page elements that are known to trigger seizures. -people with less acute vision can resize the font used on a page. -people with motor difficulties who cannot use a mouse well can use the Tab and Enter keys to smoothly move through a web page.
What is Adobe Flash?
Adobe Flash is a multimedia technology that is considered a rich Internet application or RIA. This means that Adobe Flash allows web developers to incorporate animations and interactive content into their websites such as for web videos and games.
What is AJAX?
Ajax is a group of technologies that can be used to produce a web-based application or "app." Ajax stands for asynchronous JavaScript and XML, and makes it possible to create applications that allow interactivity, such as instant messaging and forms for logging in. Ajax makes it possible to exchange data with a server and update parts of a web page without reloading the whole page. Ajax is used for web-based applications such as Gmail and Facebook.
additive color wheel
An additive color wheel shows the color behavior of light, which is different from pigment or paint. The primary colors of light are red, green, and blue; when these three are added together, they form white light. Light-emitting computer monitors use these colors to create all other colors.
What is a hyperlink?
a clickable link that takes you to another web page
What is the <body></body> element?
The <body></body> element contains everything intended for display on the web page.
What is the <head></head> element?
The <head></head> element contains special information for the browser, such as the page title.
What is a browser?
a program used to access the Internet and connect to the web
What is the World Wide Web? (WWW)
an information space where a collection of web pages are available online
What is the World Wide Web Consortium? (W3C)
an international community where member organizations and the public work together to develop web standards. W3C's standards help define and determine what makes the World Wide Web work efficiently
What is an element?
An element is the combination of a start and end tag, together with the tagged content. HTML syntax permits nesting, which means elements may contain other elements as their content.
fixed positioning
Fixed positioning is relative to the browser window. The element will stay in place in the window, even when you scroll.
web design innovation:
Innovation: Within the constraints of a comprehensive plan, design innovation is still possible. What constitutes good design depends on the audience and, like fashion, preferences tend to change over time. In general, modern designs often include: -animated rather than static elements. -two-dimensional rather than flat art. -the incorporation of video. -page elements that actively update with new information as it becomes available. -tie ins to social networking sites.
What is sans serif?
Sans serif means that there are no serifs, or points, on the ends of the characters. Sans serif typefaces are popular for use on the web because they can be easier to read using different computer configurations or smaller mobile devices.
What is serif?
Serif means the ends of the characters have finishing points. Newspapers and magazines use serif typefaces because it allows more room for characters and they can fit in more words. Serifs are also used to increase spacing between letters and words to increase legibility because their points, or tails, guide a reader's eyes from one character to the next on printed documents.
What is a markup language?
a standardized way of annotating, or "marking up" a document so programs reading the document can easily tell the difference between the document text and the markup annotations.
What are parts of a webpage?
-Graphics are icons, screenshots, logos, and pictures contained on a web page. -Links are clickable text and graphics that can connect different parts of one long web page, one web page to another web page, or different pages of the same website. -Text refers to the content (the words) used on a web page to present a particular topic.
different parts of the box model
-In the box model, content is the center portion where text and images appear. -Padding is a clear space around the content. This property takes the background color of the box. -The border encloses padding and content. This property also takes the background color. -Finally, the margin is a clear area around the border. It is always transparent and does not take a background color.
What are common flaws in website design?
-Poor navigation and user orientation: site users must be able to easily find what they seek and know where they are in a site. -Poor page load time: web pages that take too long to load drive users away from your site. A common cause of slow-loading pages is too many images, or images that have not been properly downsized for delivery over the web. In general, use a compressed image format such as JPG, a resolution of 72 dpi (dots per inch), and image dimensions (height and width) that fit inside the dimensions of the web page. -Information overload: do not overload any one page with too much information -Dead hyperlinks: all hyperlinks on a web page should work correctly. Be sure to test them from time to time after your website is public. Also, be careful to specify whether clicking a hyperlink should open the link's target in a new browser window or not. -Auto music or video: most users dislike sites that automatically play music or video when loaded.
How themes interact with target audience:
-a vibrant "teen theme" for a site aimed at skateboard enthusiasts that employs lots of bright colors, action photos, videos, and a smaller type font -a relaxed "senior theme" for retired people that uses soft colors and a larger type font -a formal "business theme" that uses dark colors, a news ticker, and lots of graphs
Factors to take into consideration when deciding website's purpose
-a website's message can be thought of as all of the content it delivers to its target audience. Websites deliver a wide variety of content such as information, entertainment, news, sports, product sales, education, file storage, photo albums, videos, weather reports, and social networking — to name just a few. -website audiences vary widely in characteristics such as age, gender, education, interests, needs, languages spoken, ability to read or see well, and computer hardware used to access a site.
What features make web pages successful?
-an obvious and self-explanatory purpose -a clear structure, practical visual clues, and easily recognizable links for navigation -short and concise phrases that get to the point as quickly as possible using objective language -designs that meet current web standards such as ensuring a visitor's information will be kept secure and using markup languages correctly
web design elements
-components: items such as icons, text boxes, lines, tables, lists, images, and video -placement: where the components are laid out on a page -styling: how the items are rendered, including size, color, and behavior
common expectations of web design:
-readability: the site uses a readable type font that is large enough and displayed on an appropriate background. An unacceptable example would be small type displayed in red on a black background. -navigation: the site menu is complete, clearly labeled, and understandable. An unacceptable example would be a menu that uses "mystery buttons" that display no text revealing their destination. -element placement: most users expect certain elements to appear in a certain place — for example, a company logo in the top left corner, the navigation menu above or to the left, and a search box in the top right corner.
common menu designs:
-rows of horizontal or vertical hyperlinks (or buttons). -clickable folder tabs. -links that expand when a user pauses over them with the mouse, revealing more choices (drop-down and fly-out menus).
What must be planned out before building a website?
-the content to be offered on the site. -the target audience. -the desired theme. -the content to be displayed on each page on the site, anticipating what users will want to see and do on each page. -a comprehensive navigation plan that links all the pages together in a logical way. -a site template, to ensure consistent placement of all the important elements on each page.
Advantages of clearly specifying website theme before building:
-visual consistency and harmony is ensured -global site goals can be guaranteed — for example, making the text easily readable throughout the entire site by specifying a clear type font (e.g., Tahoma or Arial) -elements that appear on many pages, such as navigation menus, can be designed once and used over and over -design teams can work more efficiently, since each team member knows what is expected
Examples of top level domains:
.com = company .org = non-profit organization .edu = educational institution .biz = business .net = network .gov = government .uk = england .ca = canada
What is a client side programming language?
A Client Side Programming Language is a language that physically runs on the website visitor's own computer. Because not all website visitors allow JavaScript to run on their computer, website designers often need to provide alternative ways to use websites.
RGB color values
A color value can range from 0 (0% of the color) to 255 (100% of the color). The closer RGB color values are to 255, the lighter and brighter the colors will be. RGB color values are written as shown at right. The first number in parentheses is the red value; the second is green, and the third is blue.
What is a font?
A font is one member of a type family and is any variant in a typeface's size and style. For example, Calibri is a typeface, not a font. But Calibri Bold and 11pt. Calibri Italic are both fonts of the Calibri typeface.
what is a rule?
A rule is a single CSS statement made up of a selector and one or more declarations. A rule is formed like this: selector { property: value; }
What is a theme?
A theme is an overall design as applied to an entire website. It harmonizes all parts of the site and helps convey the site's purpose. Themes are implemented by the consistent use of colors, graphics, type fonts, element placement, and navigation on a page.
What is a web-based application?
A web-based application is a computer-based software package that can be accessed through the web browser and is specifically designed to help the user perform a task such as updating a shared online calendar.
what is an attribute?
An attribute is used to include such additional information in an HTML element. For some elements, HTML syntax specifies one or more required attributes. For example: <img src="mydog.jpg" alt="My dog" /> Here the <img /> element contains two required attributes: src (for "source" or image location), and alt (for "alternate" text). Attribute keywords, always lowercase, are added after a start tag's tag name, and must be followed by an equals sign and the needed additional information in quotes.
How to remember the difference between HTML & XML:
An easy way to remember the difference is to remember that HTML is about displaying information and XML is about carrying information. XML is often used to mark up and exchange data files, such as a plain text file. An XML document can be easily read by different applications and operating systems.
What are external styling sheets used for?
An external style sheet is the best method to use when you have many pages to be styled, because you need to work with only one file. Each time you save the .css file with your changes, those changes affect every HTML file that has a pointer to the CSS.
What is an internal style sheet?
An internal style sheet is a section of CSS code that is added directly to an HTML file. This method is useful when you have a single HTML document with a unique style, such as a newsletter or a single-page website. The internal style sheet affects only its own HTML file. You cannot point to an internal style sheet from other HTML files. All of the CSS code is placed between style tags <style></style>, which are nested in the <head></head> tags.
Advantages of HTML
Becoming comfortable with HTML helps you understand the structure of any HTML page or website, no matter who created it. You can look at the source code to figure out how the markup affects the function and look of the finished site. Plus, when you write HTML code directly, creating multiple pages in the same format can be as simple as copying the code and replacing the content.
What is CSS?
Cascading style sheets (CSS) is a simple computer language that is used to describe how a marked-up document, such as an HTML or XML file, should be displayed. The style instructions are stored in a simple text file with a .css file extension. They can be used to control such things as the layout of page elements, fonts, colors, and backgrounds.
color theory
Color theory for web design deals primarily with the following concepts: -Primary colors are the three main colors used to create all other colors. You can combine these colors to create any other color. -The way we see colors in relation to other colors is known as color complements. Complementary colors can be thought of as opposites that work together. -The use of contrast makes elements stand out visually, especially text on a colored background.
What is XML?
EXtensible Markup Language (XML) is called semantic markup because the tags tell the browser what the marked-up text is, not how to display it. For example, <first_name> or <birthdate> tags can be used to mark up a first name and birth date.
Disadvantages of HTML
First, you need to know at least some HTML. Basic HTML is fairly simple, but you need a solid grip on HTML logic to create complex pages by hand. Second, when you code HTML manually, you cannot see how the finished product will look until you have finished writing the code. Every time you make a change, you will need to save the file and refresh the web browser if you want to see the effect of the change.
How do webpages get formatted?
HTML is a markup language that uses tags and elements to write web pages. The collection of these tags and elements is often referred to as code. A browser interprets the HTML code including text, graphics, links, and JavaScript. After rendering the HTML code, browsers like Microsoft Internet Explorer or Mozilla Firefox process or "read" a web page, and then the browser displays a formatted page.
How is HTML formatted
HTML tags consist of a keyword (the tag name), in lowercase, surrounded by angle brackets. For example: <title>My Web Page Title</title>HTML tags consist of a keyword (the tag name), in lowercase, surrounded by angle brackets. For example: <title>My Web Page Title</title>
what is a fluid layout?
In a fluid layout, the elements have percentage widths, and they adjust to whatever the page width is based on the viewer's screen resolution. This method can make sites accessible to a wider range of viewers. The fluid layout can be visually appealing for text-rich sites without a lot of graphics or videos.
what is a static layout?
In a static layout, the page has a fixed width, and all the elements on the page have either percentage or fixed widths. Designers usually set page widths at sizes from 760 or 1,000 pixels based on contemporary screen sizes and resolutions. A static layout gives you more design control, but often at the expense of unused space at the left and right on higher-resolution screens.
What is interactive media?
Interactive media are electronic or web-based applications and features that allow people to participate by creating and editing the content. Interactive media is the combination of digital media such as graphics, moving images, and electronic text in an organized environment, such as the Internet, where people interact with the media in various ways. Examples of interactive media are video games and websites that allow you to post information.
What is java script?
JavaScript is an example of a programming language that is supported in all browsers and is the most frequently used Client Side Programming Language
Define language meaning in HTML
Language, which signifies that HTML consists of a defined set of "words" and rules for using them correctly. Tags are the "words" used in HTML, and the rules for using them correctly are called syntax.
Define markup meaning in HTML
Markup, which refers to the fact that HTML is used to mark the information on a web page, such as text or images, with the instructions a browser needs to display it as desired
What is PHP?
PHP is an example of a programming language that is frequently used to develop websites with existing databases and is a Server Side Programming Language.
What tags do paragraphs and lists use in HTML?
Paragraphs and lists use the tags shown below. The tag name "ol" stands for "ordered (numbered) list" while "ul" stands for "unordered (bulleted) list." The tag name "li" stands for "list item." <body> <p>First paragraph.</p> <p>Next paragraph.</p> <ol> <li>Item one.</li> <li>Item two.</li> </ol> <ul> <li>first item.</li> <li>second item.</li> </ul> </body>
relative positioning
Relative positioning moves an element up, down, left, or right from where the element would normally be. For example, you could move an <h1> element to the right of its default position.
Disadvantages of WYSIWYG
Some WYSIWYG editors create HTML code that is not valid or that contains superfluous code. WYSIWYG editors will not help you learn how HTML works, and they will not show you how to read HTML code to find and fix problems. WYSIWYG editors also do not work as well with preexisting HTML. For example, a web page that was written elsewhere and opened in the WYSIWYG editor may show odd formatting.
What is the root element?
The <html></html> element, also called the root element, is the outermost container, and tells the browser that the document is an HTML document. All of the other elements that make up the document are nested inside.
background image
The background-image property uses a URL value to locate an image file and place the image in the background of the HTML tag. The background-repeat property repeats the background image.
What is the featured graphic layout?
The featured graphic layout is useful for showing off icons, screenshots, or logos that look great in a big circle or square. This type of layout is popular with businesses that have a logo that can be recognized by customers without even using the business name or additional text.
What is the fixed sidebar layout?
The fixed sidebar is a permanent element that stays where it is while the rest of the page scrolls. A fixed sidebar layout is one that uses a fixed sidebar. This layout allows the navigation to be easily accessible from any point in the website. This type of layout is popular with organizations that have a lot of content and rely on hyperlinks in the fixed sidebar to transport the viewer to the other pages and maintain the initial list for selection (for example, websites of educational institutions that allow students to use the links in the fixed sidebar to investigate class descriptions without the need to backtrack to the list).
What is a top level domain?
The last part of the website address, after the period, which categorizes the group that is authorizing the website. You can look at the top-level domain name to identify what type of organization or person is publishing the website.
What are website navigation methods?
The most important navigation method is a navigation menu. It is an essential part of any website. Search cannot replace the navigation menu, but can add to the usability of a large website. Most websites now have a search function, but it is not as important as the navigation menu. A site map provides a nice overview of all the pages available on a website, but it is not as important as the navigation menu and the ability to search.
What are factors of a webpage?
There are some factors web designers consider to ensure their pages are consistently useful and appealing. These factors are audience, purpose, what would make the page visually appealing, how the page can be easy to use, and what content would be most useful.
What are different HTML headings?
To create headings on a web page, HTML offers six tags. Each tag causes the browser to display the contained heading text at a different size. <body> <h1>Large heading</h1> <h2>Smaller heading</h2> <h3>Smaller heading</h3> <h4>Smaller heading</h4> <h5>Smaller heading</h5> <h6>Smaller heading</h6> </body>
How do you mark up text?
To mark up text, an opening and a closing tag are used, with the marked-up text in between. For example, a paragraph is designated in HTML using the <p> tag as shown here: <p>Here is a paragraph. It has two sentences.<p>
What does HTML do for webpages
To provide web designers with an adequate range of options, HTML provides tags to enable the display and styling of: headings paragraphs words (font, color, size, emphasis) hyperlinks images providing key words to search engine
What is typeface?
Typeface means the design of the type collection or family. It is the letters, numbers, and symbols that make up a set of distinctive design types such as Calibri, Arial, and Times New Roman.
What is inline style?
Using an inline style might make sense if you need to style only a few tags in a very simple or temporary site. Designers use this method sparingly because it mixes content with presentation. In general, CSS is used to control styles without touching HTML structure to ensure that web pages work properly in multiple browsers.
What is WYSIWYG?
WYSIWYG ("what you see is what you get") editing tools make building sites easier by handling much of the markup for you. WYSIWYG tools allow you to draft web content as if you are looking at the rendered page in a web browser. The software generates the HTML in the background based on how you format text. For example, if you make a word bold in WYSIWYG view, the tool will add <strong></strong> tags around the word in the HTML file.
Advantages of WYSIWYG
WYSIWYG lets you focus more on the content and less on the HTML markup. You can apply styles to text using keyboard shortcuts or formatting buttons, as you would with a word processor. Sometimes you can drag and drop or copy and paste pieces of content, such as pictures, in WYSIWYG.
What is a website?
a connected group of pages on the web that together are considered one single object. They are usually maintained by one person or organization and are about a single topic or a few related ones.
What is a web page?
a document on the Internet made up of an HTML file and any related files for scripts and graphics
What is the internet?
a global system of connected computer networks that use certain technical standards to connect the web and make pages available for people to access
what is a sitemap?
a useful navigation tool is a site map, which is a single web page containing a list of hyperlinks, each representing a page in the website. The links can be organized alphabetically, or grouped into appropriate categories. A site map provides a unique overview of all the pages on a website at a single glance. This can be a useful feature for a large website. If a site map is used, a link named "site map" should be added to the main navigation menu.
Sometimes an HTML element must provide several pieces of information to a web browser before the browser can display the tagged content correctly. For example...
the empty element <img /> is used to point to an image file to display on a web page. Here the author needs to tell the browser: the image location (its folder and file name). the alternate text to display (or to read to someone using a screen reader) if the image happens to be missing.