1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

duplicate IDs

Discussion in 'HTML & Website Design' started by Garth Hagerman, Mar 1, 2019.

  1. #1
    I am updating an old site to, among other things, make it responsive. The site uses a sidebar for navigation. The navigation menu uses IDs to tell the site visitors where they are within the site (the current page's link is a different color). For smaller browser windows, the sidebar disappears and is replaced by navigation menus above and below the content. Here's the rub: since the IDs are doing the same thing, and since only one set of IDs is visible for any window size, it seems reasonable to use the same IDs for both the sidebar and the small screen navigation. But the code validator hates me for doing this. It sees the duplicate IDs and flags them. There's no Javascript in use here, all of the appearing and disappearing is done with CSS media queries.

    Is the validator being unreasonably picky, or should I make a new set of IDs for the small screen version?

    Here's a sample of the work in progress:
    https://realmendocino.com/trailmonth.php
     
    Garth Hagerman, Mar 1, 2019 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    Hi Garth.
    If you use those IDs just to tell people about current page then maybe you'd simply replace them with CLASS, correct?
     
    hdewantara, Mar 2, 2019 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    ID's are inherently UNIQUE, they exist to identify ONE thing on the page, and ONE thing only. That's why you should NEVER use the same ID more than once. There are REASONS you would identify elements with ID's:

    1) as a target for a internal hashlink. <a href="#test"> will scroll the page to whatever element has id="test" on it.

    2) as a target for various attribute to create semantic relationships, see the FOR attribute on a label, or the HEADERS attribute on a TD.

    For example:

    
    <input type="checkbox" id="toggle_mainMenu">
    <label for="toggle_mainMenu">Toggle</label>
    
    Code (markup):
    Clicking on "toggle" will toggle the checkbox because we used FOR to tie it to the ID.

    3) as a way of hooking a single element from JavaScript.

    That it can also be used as a CSS selector is a happy extra thrown on top, but not the real reason to use it instead of a CLASS.

    You want to use it more than once, and don't need any of the above three things, use a CLASS.

    Now, all that said the code for that page is horrifying gibberish... what makes your menu items "the start of a subsection of the H3 preceding them" -- aka what a H4 MEANS?!? That is semantic nonsense. How can you have a H4 when you don't even have H3, or H2, or even a H1? What's with all the DIV and pointless classes on what clearly seems to be a LIST of selections. We have tags for lists. What makes that picture of the park trails a mathematical or scientific FIGURE?

    It looks like you chose your HTML based on what font size you wanted, and that's NOT what H1..H6 mean or are even for! They exist to create a document structure which is why they are called "numbered headings" -- they indicate the START of a section of the page, not "fonts in different sizes". You don't even have content for them to be headings OF!

    Made all the more confusing by the nonsensical and pointless use of bleeding edge and ultimately redundantly pointless trash like HTML 5's SECTION and HEADER tags. You've got this bizzaroland mix of 1990's presentational markup methodology mish-mashed into HTML 5.

    ... and that's before we get into the even more confusing and outright broken layout caused by mixing and matching EM fonts with pixel metric paddings, max-widths, widths, and media queries. If you're going to use EM like a good little doobie, you should use it for all width declarations/triggers and probably your padding as well. That way it ALL scales to the user preference, instead of large-font users like myself stuck with enlarged fonts in containers too small to hold them!

    Of course the comments before the doctype possibly triggering quirks rendering, IE conditional around a stylesheet you wouldn't need if HTML were being used properly and the stupid pointless halfwitted garbage HTML 5 "structural" tags were skipped entirely (not a fan in case you couldn't tell), presentational images in the markup...

    Then there's your actual question where honestly, using classes or ID's that are always static in the code to track that sort of thing is just a waste of bandwidth, which is why I prefer putting class="current" on whatever menu item is the current one.

    Not exactly a shock it's wasting 20k of markup on 10k that's mostly plaintext, probably not even 16k's job!

    All that said, it's refreshing to see someone using P on actual paragraphs and the italic tag properly for a book or document title.

    The proper semantics for that page with all the issues I mention above fixed likely has little if any legitimate reason to be more than:

    
    <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8">
    <meta
    	name="viewport"
    	content="width=device-width,height=device-height,initial-scale=1"
    >
    <link
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    ><!-- HTML 5 valdiation will bitch about projection and TV, f*** e'm! -->
    <link
    	rel="shortcut icon"
    	href="favicon.ico"
    >
    <title>
    	Trail of the Season: Southern Humboldt Community Park - Bored Feet Press
    </title>
    <!-- remember, Page Title - Site Title, HYPHEN, not vertical break!!! -->
    </head><body>
    
    <div id="top">
    
    	<h1>Boreed Freet Press</h1>
    
    	<input type="checkbox" id="toggle_mainMenu" class="toggle">
    	<label for="toggle_mainMenu"></label>
    	<ul id="mainMenu">
    		<li class="current"><a href="index.php">Home Page</a></li>
    		<li><a href="books.php">Books &amp; Maps</a></li>
    		<li><a href="browse.php">Search/Browse</a></li>
    		<li>
    			<input type="checkbox" id="toggle_categories" class="toggle">
    			<label for="toggle_categories">Categories</label>
    			<ul>
    				<li><a href="topics/newstuff.php">New for 2019</a></li>
    				<li><a href="topics/specials.php">Sale Books</a></li>
    				<li><a href="topics/bestsellers.php">Best Sellers</a></li>
    				<li><a href="hip.php">Hip Pocket Guides</a></li>
    				<li><a href="hikingcct.php">Hiking the California<br>Coastal Trail</a></li>
    				<li><a href="morehiking.php">More Hiking, Climbing,<br> and Biking Books</a></li>
    				<li><a href="mappages/maps.php">Outdoor Recreation Maps</a></li>
    				<li><a href="travel.php">Travel &amp; Languages</a></li>
    				<li><a href="natpho.php">Nature &amp; Photography</a></li>
    				<li><a href="poetry.php">Food, Wine,<br>Fiction, Satire, &amp; Poetry</a></li>
    				<li><a href="history.php">Western History</a></li>
    				<li><a href="kids.php">Children's Books</a></li>
    				<li><a href="art.php">Fine Art</a></li>
    				<li><a href="health.php">Health</a></li>
    				<li><a href="tide.php">Calendars &amp;<br> Literary Playing Cards</a></li>
    			</ul>
    		</li>
    		<li><a href="trailmonth.php">Sample Trail</a></li>
    		<li><a href="updates.html">Trail Updates</a></li>
    		<li><a href="linx/links.php">Links</a></li>
    		<li><a href="contact.php">Contact Us</a></li>
    		<li><a href="order.php">Prices/Order Form</a></li>
    		<li><a href="cartstuff/seecart.php">View Cart</a></li>
    	</ul>
    
    	<div id="content">
    
    		<h2>
    			Trail of the Season: <br>
    			Southern Humboldt Community Park
    		</h2>
    		<p>
    			Every once in a while, we'll feature a sample hike from one of our hiking guide books. This sample trail listing is from: <i><a href="singles2/hiphum3.php">The Hiker&rsquo;s hip pocket Guide to the Humboldt/Del Norte Coast, 3rd Ed.</a></i>
    		</p>
    
    		<h3>Archived Trails of the Month:</h3>
    		<ul>
    			<li><a href="trailbigriv.php">Big River</a></li>
    			<li><a href="trailpomo.php">Pomo Canyon to Shell Beach</a></li>
    		</ul>
    
    		<h3>
    			Southern Humboldt Community Park<br>
    			<small>Garberville, CA</small>
    		</h3>
    		<dl>
    
    			<dt>DISTANCE:</dt>
    			<dd>
    				2-1/8 to 3-3/8 miles on three connecting loops.
    			</dd>
    
    			<dt>TERRRAIN:</dt>
    			<dd>
    				Mostly level grasslands and oak woodlands, with two optional wooded, steeper loops through mixed forest.
    			</dd>
    
    			<dt>ELEVATION GAIN/LOSS:</dt>
    			<dd>
    				120 feet+/120 feet- for main loop. Add 70 feet+/70 feet- for first forest loop, 100 feet+/100 feet- for New Forestry Loop.
    			</dd>
    
    			<dt>TIME:</dt>
    			<dd>
    				One or two hours.
    			</dd>
    
    			<dt>BEST TIME:</dt>
    			<dd>
    				Spring and fall. Also pleasant in winter between storms.
    			</dd>
    
    			<dt>WARNINGS:</dt>
    			<dd>
    				Watch for poison oak.
    			</dd>
    
    			<dt>CAUTIONS/NOTES:</dt>
    			<dd>
    				Do not block gate at trailhead. No smoking or fires. No dogs allowed.
    			</dd>
    
    			<dt>HOW TO GET THERE:</dt>
    			<dd>
    				Exit Highway 101 at Garberville/Sprowel Creek Road exit (MP.11.3 from north, MP. 10.9 from south). Go west on Sprowel Creek Road for 1.0 mile from Main Street (.9 mile from Freeway north) to park entrance on left. A second park entrance is .7 mile beyond the main entrance on the left side of Camp Kimtu Road.
    			</dd>
    
    		</dl>
    		<p>
    			This welcoming 430-acre community park nestles in a gentle valley in the often rugged South Fork Eel River canyon. Located just outside Garberville, the unique natural beauty of the park features grasslands, upland forests, prime farmland, a one mile stretch of the &ldquo;Wild and Scenic&rdquo; river complete with playground and swimming beach, native redwoods, and a 20-acre hilltop across the river. Local businessman Stephen Dazey led a drive to raise $650,000 to buy the parklands, part of a nineteenth century ranch. The park opened in 2000 with the Meadow Loop Trail opening in 2003. The forest trails have been added since then.
    		</p><p>
    			Native peoples of local Sinkyone and neighboring tribes, especially the Wailaki and Wiyot used the park&rsquo;s lands for centuries, harvesting the abundant acorns and other native plants and catching fish from the river. After the California Gold Rush, Euro-American settlers disrupted the native ways of life, developing farms and ranches and harvesting the timber. The 1960s and &lsquo;70s brought a new wave of settlers with their often countercultural ways. Today the park&rsquo;s restored habitats inspire deep appreciation and reverence for nature, and a chance to recreate in this lovely place.
    		</p><p>
    			Park near the kiosk across from the farm residence. Follow the main trail, an old ranch road, as it heads west-southwest past the historic ranch house, two small barns and abundant willows. Continue along the broad dirt track, passing through a ranch gate and past two more weathered barns. Near the latter barn, the ranch road turns right, leading to a nearby chemical toilet and the Garberville Community Farm beyond the trees. Take the narrower double track that continues west-southwest past pennyroyal and a variety of farm vehicles, including a couple of electric ones. You pass invasive Himalayan blackberries and a skate ramp on your right. Beyond those stand a natural windbreak of black oaks and bay laurels.
    		</p>
    
    		<img
    			src="https://realmendocino.com/pagepics/th_soHumCommunityPark-680.jpg"
    			alt="Map of Southern Humboldt Community Park"
    			class="plate"
    		>
    		<p>
    			You soon come to a junction where you can go either way. Our described hike turns right to follow the narrower path. You head northwest briefly, then merge with a narrow path from the main entrance. Veer left on the path that heads west through the grasslands. (Another trail veers right to explore the nearby woods, with madrones and bigleaf maples joining the oaks and bays.) After passing the Southern Humboldt Labyrinth on your left, continue west along the edge of grasslands and woods. Douglas firs join the mixed forest, but it is the large black oaks that are a defining characteristic of the park.
    		</p><p>
    			Cross a metal footbridge over a seasonal stream. Toyon grows beside the bridge. Two short cross-park trails head south-southeast on either side of the deep stream channel. You can take either of these to the south side of the park if you prefer a shorter walk. Three other side trails fork right to explore the nearby woodlands. Continue west-southwest on the trail beyond the bridge. At 1/2 mile you pass a side trail on the right, the end of the last two side trails back at the bridge. Look for California poppies in spring.
    		</p><p>
    			At 5/8 mile you reach the secondary parking area on Kimtu Road, with another kiosk and chemical toilet. On your left, a picnic table is in a pleasant, shady spot beneath black oaks and madrones. A second picnic table is in a sunnier spot near the kiosk. South Fork Eel River flows by just across Kimtu Road.
    		</p><p>
    			Your trail continues, soon climbing south-southeast along the park boundary. The adjacent land owner allows park visitors to use this corner of his land. You pass a rose bush on your left that looks like an old-fashioned garden variety, then more Himalayan blackberry.
    		</p><p>
    			Cross a metal bridge over a small seasonal stream at mile, coming onto the land of the obliging neighbor. In 75 feet, turn right onto the narrow side path into the nearby woods. Beneath Douglas firs, bays and madrones grows an immense antique grape vine. With a base eight inches in diameter and its long vines, the grape has most of its foliage high above near the top of the tall madrone nearby. This vine and another about 40 feet away, seem to love madrone and avoid nearby bays and firs.
    		</p><p>
    			Your side trail promptly rejoins the main path, passing narrow-leaved mule ears on your left. Your trail meanders in and out of the woodland. You come to a very large California buckeye, slouching like a teenager along the edge of the meadow. Honeysuckle and hedge nettle grow in shady corners of the grassland then native wood rose. Continue past irises and more buckeyes beneath black oaks and bays, with madrones nearby. Your track bends left and climbs to a pleasant vista across the park to surrounding ridges.
    		</p><p>
    			At 7/8 mile the trail bends left to head east past a rustic rest bench, promptly returning to park property. On your right you pass an old water trough and plum trees, growing along an old fence at this high point for the Meadow Loop. Honeysuckle, poison oak and blackberry, both Himalayan and California native, also abound. This area is prime wood nymph butterfly habitat.
    		</p><p>
    			Beyond one mile you come to a junction, with a rest bench just beyond. You can continue on Meadow Trail for a 2-mile loop. Our described hike turns right to explore the woodland trails on this wilder side of the park. You climb gradually southeast, following the fence line into woods of black oaks, bay laurels, buckeyes and young Douglas firs. In 500 feet, ignore the fork on the left. Continue climbing, passing through the fence line. At 1/8 mile hop over a gully as you roughly parallel the fence. Coyote brush and sword ferns join the understory.
    		</p><p>
    			At a fork before 1/4 mile, turn right to ascend into forest. (A left returns you to the place you left the Meadow Trail.) You quickly cross a small gully and enter a different ecological niche. California hazel, starflower, wild strawberry, twisted stalk, honeysuckle, polypody and sword ferns thrive beneath Douglas fir, madrone and bay. Then, having climbed to 315 feet in elevation, you descend past young bigleaf maples, wood rose, and lady ferns. Descend to the lower forest trail, then turn left to return to the Meadow Trail beyond 3/4 mile.
    		</p><p>
    			Head east, then north on the Meadow Trail, coming to the first of the cross-park trails beyond 1-1/8 miles. A sign on your right marks &quot;Educational Camp&quot; under large black oaks. Continue east on Meadow Trail, crossing a gully on a metal bridge (or a ford for equestrians). After meeting the second cross-park trail, find another rustic bench beside a sprawling bigleaf maple. Continue southeast along the ecotone, the boundary between meadow and forest. Across the meadow on your left, notice the immense ancient bay laurels, among the tallest in the park.
    		</p><p>
    			Around 1-3/8 miles, on your right you pass a signed old man&rsquo;s beard lichen (Usnea longissima) growing on a black oak above the gully you&rsquo;ve been following. Longissima is the longest, and among the rarest, of this family of lichens. It&rsquo;s relative Usnea barbata also grows in the park. Have you noticed how deep the gullies in the park are? Apparently they became so during the monstrous 1964 flood. When you reach another fence line, look left for Celebration Grove, a venue for events. Your trail returns to the forest.
    		</p><p>
    			You come to a T junction around 1-1/2 miles, with a rest bench nearby. You can turn left here to finish the Meadow Loop. Our described route turns right. In just 150 feet go left on the New Forestry Trail. (If you go straight you meet the end of the earlier forest loop.) Climb east for 125 feet, then turn right as New Forestry Trail climbs southeast along the edge of a gully, easily the steepest ascent of any trail in the park. A sign indicates that New Forestry Trail is a project of the Institute for Sustainable Forestry, a local group. The trail tops out just beyond at about 400 feet, where Douglas firs grow to two feet in diameter, along with oaks and bays.
    		</p><p>
    			At 1/4 mile you cross a gully that is more natural than the flood-scoured lower gullies. Descend to cross a rustic bridge over an even larger gully before 3/8 mile. This watercourse is narrow and fairly well vegetated here. Descend to a junction with the main trail. (The New Forestry Loop is mile if you return to the point at which you started it.)
    		</p><p>
    			Our described route turns right to follow Meadow Trail north-northeast beneath forest. Ignore a maze of side trails unless you know where you&rsquo;re going. Stay on the broad trail as it descends gently north. You come to a park gate, usually closed unless maintenance is being done, at 1-3/4 miles, with another gate on adjacent private property just beyond. Go 200 feet, crossing a gully and nearing the private gate, then go left to head northwest.
    		</p><p>
    			Follow Meadow Trail as it passes coast live oak and rounds Pepperwood Meadow, where the birds often sing and human music sometimes happens. Go north across a bridge over a gully around 1-7/8 miles. Your trail winds left and right, passing through a fence line, then beelines north across the base of a seasonal wet meadow. A big steel water tank sits on the hill at the top of the meadow. You cross one more gully, then angle left to return to the main parking area and kiosk at 2-1/8 miles.
    		</p>
    	<!-- #content --></div>
    
    	<div id="footer>
    		<h2>&copy; Bored Feet Press</h2>
    		Post Office Box 1832<br>
    		Mendocino, CA 95460<br>
    		888-336-6199<br>
    		<hr>
    		<address>
    			Web site by
    			<a href="https://garthhagerman.com/">Garth Hagerman</a>
    		</address>
    		<a href="https://fb.me/boredfeet">
    			<img
    				src="grafs/find_us_on_facebook_badge.gif"
    				width="144" height="44"
    				alt="find us on facebook"
    				class="plate"
    			>
    		</a>
    	<!-- #footer --></div>
    
    <!-- #top --></div>
    
    </body></html>
    
    Code (markup):
    Giving it an actual logical document structure with the proper use of numbered headings, eliminated the need for HTML 5's dumbass SECTION/MAIN/FOOTER trash, removing all the endless times you basically repeat yourself with the same bloody menu for no good reason (no, mobile layouts are NOT a good reason to do it!), and EVERYTHING else you are doing belonging either controlled server-side (like moving that .current class around) or in your external stylesheet.
     
    deathshadow, Mar 2, 2019 IP
  4. Garth Hagerman

    Garth Hagerman Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    I already have a class for navigation buttons. The IDs just indicate which specific navigation button's page we're on.
     
    Garth Hagerman, Mar 2, 2019 IP
  5. Garth Hagerman

    Garth Hagerman Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    shadow-
    Thanks for the detailed critique. I shall read it a few times, digest, and figure out which parts to adopt. There's a lot of useful stuff there. That page is very much a work in progress; it's absolutely positively not a final product. The reason the code looks like a mish-mash of markup from different eras is that's exactly what it is. This was one of my very first sites, from 1998. It had my very first database duct-taped onto it in the early 2000s. I've been holding it together with bailing wire ever since. Bored Feet's business is not profitable enough to afford the total rebuild the site sorely needs. I'm trying to bring the site into the late twenty-teens on a very tight budget. So I'm trying to keep the chunks of code which work, adapt it to a responsive grid, and fix the I-can't-believe-I-was-ever-that-stupids which permeate every aspect of the site's design.
     
    Garth Hagerman, Mar 2, 2019 IP
  6. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #6
    Umm, you do know that an element e.g. (a navigation button) with 2 or more class names is perfectlly valid, don't you?

    Example:
    
    <a class="navlink current-page" href="trailmonth.php">Sample Trail</a>
    
    HTML:
     
    hdewantara, Mar 3, 2019 IP
  7. Garth Hagerman

    Garth Hagerman Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #7
    Actually, it had never occurred to me that one selector could have two classes. Hmmm... something else to ruminate on.
     
    Garth Hagerman, Mar 4, 2019 IP
  8. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #8
    cool ;)
     
    hdewantara, Mar 4, 2019 IP