#semantic html

[thecommoncoder]

Semantic HTML: What It Is and Why It Matters!

🚨 NEW VIDEO ALERT! 🚨

In today's video, we'll introduce an important concept in web development known as semantics. Semantic HTML helps provide proper meaning to your markup, while also making your website more accessible, improving your SEO, and keeping your code clean and organized. Enjoy! 🎉

#coding #html #semantichtml #webdevelopment #cleancode

https://youtu.be/Pf0LC6Rx9dg?si=sNtraatCLbZvzUfk

[bkthemes]

Does Clean Code Improve SEO? A Web Designer’s Perspective

[et_pb_section fb_built=”1″ _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_row _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.27.4″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}”…

[first-techie]

(via Semantic HTML | Navigating the Digital Realm)

[nyyyxmidnight]

What @accessibleaesthetics said, yes. This is why I said I could not in good conscience recommend this method, and one should certainly not reach for it everywhere all the time. This kind of weird hacky things is not, fundamentally, what ARIA is for.

The first rule of ARIA use is "If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so."

Hiya! I have a technical/formatting question about Ao3. Is there a way to add alt-text to...well...actual text? In one of my WIPs, there's a few numerical codes that contain hints about what's really going on. I want to keep these as copy-pastable text so readers can run them through an online decoder or something if they want to know what they say, but I also don't want readers who use screenreaders to have to sit through several interminable strings of numbers. Is there a way I can add alt-text so they hear something more succinct? Thank you for the kindness you show and for how much you help others. I hope you have a nice week. ^^

Someone who's better at HTML and CSS than I am might be able to do what you want, but I'm not aware of a way to create copy-pastable text that a screenreader won't read and provide it with an alt description that the screenreader will read.

What I've done in the past is create an image of the relevant code and then use the image alt text feature to describe it succinctly in a way that won't be absolutely mindnumbing to hear a screenreader read out.

If you want to provide the copy/paste version as well, you could do so in an end note perhaps? Or you could use the end note to guide people to the comments section and put the copy/paste version there.

Anyone else have any thoughts on this one?

[racke7]

Exam hit me with two concept that I've literally never heard of (or at least never been explained to me).

"semantic html" -> the <> with things like "img" and other clearly-defined content to them.

"dependency injection" -> a method that receives objects, instead of creating them from scratch (aka, literally how all of our programming is done).

Thankfully, they only amount to 15% of the exam-result, so hopefully I'll still pass?

[io-android]

major site layout update: I figured out how to make a responsive collapse w/o bootstrap🎉

I'll likely not roll out with animations since it's purely cosmetic, and I feel too inexperienced with them to include it in the initial update (if I do it'll probably be way later)

[mycorrhizastar]

My March newsletter is here! No I'm not fooling!

Got a snazzy new look going :)

[edent]

What programming language is in this <code> block?

I’m a little bit obsessed with the idea of Semantic markup. I want the words that I write to be understood my humans *and* machines. Imagine this piece of code: `print( “Hello, world!” )` Is that code example written in Python? C++? Basic? Go? Perhaps you’re familiar enough with every programming language to tell – but most people aren’t. Wouldn’t it be nice to give an indication of *what*…

[html-tute]

HTML Semantic Elements

HTML Semantic Elements are those elements that not only define the structure of a webpage but also provide meaning to the content they encapsulate. These elements help both browsers and search engines understand the content better, improving accessibility and SEO.

Common HTML Semantic Elements:

<header>:

Represents the introductory content or a set of navigational links.

Usually contains the logo, site title, and main navigation.

<header> <h1>My Website</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header>

<nav>:

Represents a section of the webpage intended for navigation links.

Typically contains a list of links.

<nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav>

<main>:

Represents the main content of the document.

Only one <main> element should be used per page.

<main> <h2>Main Content</h2> <p>This is the main content of the page.</p> </main>

<section>:

Defines sections in a document, such as chapters, headers, footers, or any thematic grouping of content.

Typically used to divide the webpage into sections that make sense contextually.

<section> <h2>About Us</h2> <p>Information about our company.</p> </section>

<article>:

Represents a self-contained piece of content that can be independently distributed or reused.

Used for blog posts, news articles, etc.

<article> <h2>Blog Post Title</h2> <p>Content of the blog post.</p> </article>

<aside>:

Represents content that is tangentially related to the content around it.

Often used for sidebars, pull quotes, or related links.

<aside> <h3>Related Posts</h3> <ul> <li><a href="#post1">Post 1</a></li> <li><a href="#post2">Post 2</a></li> </ul> </aside>

<footer>:

Represents the footer of a document or section.

Typically contains copyright information, links to privacy policies, or contact information.

<footer> <p>&copy; 2024 My Website. All rights reserved.</p> </footer>

<figure> and <figcaption>:

<figure> is used to encapsulate media such as images, illustrations, or diagrams.

<figcaption> provides a caption for the <figure>.

<figure> <img src="image.jpg" alt="An example image"> <figcaption>This is a caption for the image.</figcaption> </figure>

<time>:

Represents a specific time or date.

Often used in articles, events, or any content where time is relevant.

<time datetime="2024-08-07">August 7, 2024</time>

Why Use Semantic Elements?

Accessibility: Assistive technologies, like screen readers, can better understand and navigate your content.

SEO: Search engines can index your content more effectively, improving your site’s search rankings.

Maintainability: Semantic elements make your HTML more readable and organized, making it easier for developers to understand.

Using these elements in your blog will help make your content more structured, accessible, and search engine-friendly.

Read More ➡️

[anocana]

turing completeness is deeply overrated

"the brain is turing complete" as an argument for the brain being a computer is both 1. false in a literal sense and 2. useless in the sense it's meant; by that definition, the earth is also a computer, but if someone went around saying "the earth is a computer" they'd be a crank

people will cite turing completeness as a requirement for something to be a programming language (usually bc they're mad about html), but within the kind of languages they mean, it's basically a convenience feature. it's a very good convenience feature, since termination checkers mostly suck and people don't want to write proofs about the behavior of their code, but almost nothing worth doing truly requires it. i'm pretty sure you could in theory do >99% of software in a termination-checked (thus turing-incomplete) language with a decent i/o model (which is outside the scope of a turing machine anyway)

[stellophiliac]

you should make a website!

"my favorite social media site is shutting down!"

"the CEO of the site i use just committed another atrocity!"

"i want a webspace that's all my own!"

if any of these sound like you (and if you're on tumblr, i know at least one applies) you should make your own website!

why make a website?

incredibly customizable

you can put whatever you want on it

it's, well, your own! like a house you build with your own hands

things you'll need

a computer. you can maybe get away with doing this on a mobile device, but i have zero experience there

a code editor. i like VScodium, which is a de-microsoft-ed version of VScode.

a will to learn ;)

site hosting

neocities. everyone knows neocities. at this point i do feel like it's become a bit too centralized, but it's a good option nonetheless. do note that there are filetype restrictions for free users, but that shouldn't be a huge issue for most. what may be an issue, though, is that there's a content security policy that prevents sites made after jan 1st, 2024 to use outside scripts. also, you have to pay to use your own domain

nekoweb. similar to neocities, but there's no filetype restrictions or a content security policy. some differences are outlined in the FAQ (thinking about moving here... i am a traitor...) i'm not sure if domain support is free or paid.

github pages or codeberg pages. you'll need an understanding of git for this

pages.gay: run by besties.house, uses git

teacake: free hosting is currently closed, but paid hosting starts at 2 bucks a month.

leprd.space: i know next to nothing about this.

a web server. don't recommend this if you don't know computer stuff but it is an option (you'll likely have to provide your own domain though)

gripes & solutions (?)

i'm not comfortable maintaining pages in pure HTML / templating with JS sucks!

with a static site generator, you can write pages in markdown and they'll be converted into HTML and (if you'd like) be put into a template of your choosing. my personal choice is 11ty but there are tons of options!

static site generators can be a bit of a learning curve (and you will have to write some html for templating) but if you're making a lot of pages or blogging regularly it's something to consider

there are starters for 11ty online but i might make a more beginner-proofed starter and/or guide in the future? don't count on it

i don't want to write/maintain CSS

simpleCSS is a tiny CSS file you can use to make semantic HTML ("naked" HTML) look nice. it's got decent customization options too. it's not particularly fancy or opinionated, but it's a good starting point if you need something

i don't know what to put on my website!

small list of ideas:

weblog

art/writing/music gallery

movie/show/book tracker

place to store bookmarks/links

scary! i'm scared!

my askbox/messages/e-mail inbox/etc. are open to anyone who'd like to ask for help!

[thetransintransgenic]

irradiate-space Replied to your post“... speaking of AI sex, I haven't made progress on...”

Where'd you get stuck?

I didn't I just put it down *checks modified-date* a year ago next month, and then didn't pick it up again.

... speaking of AI sex, I haven't made progress on punching up that one webnovel into a decent-looking .epub in AGES.

[prokopetz]

Hi, Mr Prokopetz, I'm a big fan. Apologies if you've answered this before, but I was wondering what software you use to create the pdf and epub layouts of your ttrpgs, and whether you'd recommend it to a hobbyist who wants to try putting together something more professional than a gdoc for their own ttrpg?

My workflow is unfortunately not terribly accessible unless you have a fair amount of technical know-how.

In brief, I write all of my games in Notepad++ as HTML documents, taking care to use only the subset of HTML5 tags which are supported by most popular EPUB readers. I then use Calibre (or, more, precisely, the command-line utility that comes with Calibre, though you can get mostly the same results via the GUI) to bundle the HTML document as an EPUB3 file. I typically distribute both the HTML and EPUB versions (the former in a zipfile with all of the fonts and images and such) because web browsers tend to have much better screen-reader support than EPUB apps do.

The PDF, meanwhile, is generated from the same master HTML document using CSS paged media extensions – the layout is all generated automatically based on rules specified in a big, gnarly CSS file, and is never touched by human hands. There are a number of software packages which can do this sort of CSS-driven HTML-to-PDF conversion, some of them free or open source; I use a commercial product called Prince because, to the best of my knowledge, it's the only such software which has out-of-the-box support for PDF/UA semantic tagging (i.e., the stuff you need to do in order to make your PDFs screen-reader friendly), but you have more options if you're willing to tag your PDFs manually. (I am not.)

As for whether I'd recommend doing it this way? Like I said, unless you're a proper gearhead, not really; it's super efficient once you get it all set up – the only version of the game I actually maintain is the master HTML document, and generating updated versions of all the other formats is a one-click affair – but it's really only feasible for me because I already knew how to all that workflow automation stuff for unrelated reasons. I can't imagine teaching yourself all that from scratch just to write elfgames!

[first-techie]

(via Semantic HTML: Boosting Your Website's Search Rankings)

[study-diaries]

Day 7 [Semantics In HTML]

Introduction To HTML

Day 2 [Multimedia Elements In HTML]

Day 3 [Table in HTML]

Day 4 [Link Tag In HTML]

Day 5 [Lists In HTML]

Day 6 [Forms In HTML]

Code:

Line By Line Explanation:

Semantic Tags in HTML give clear meaning to the code. These are tags like:

<header>: Used for the title of the page.

<nav>: Contains navigation links of the website.

<main>: The main part of the page.

<section>: A group of content that is similar.

<article>: A group of content that is an independent piece.

<aside>: Extra info, like side notes.

<footer>: The bottom of the page that contains the copy rights and additional info.

Navigation Tag:

The navigation tag must be within an unordered list tag. And each item of that list must contain the link tag that should have the URL of that specific page.

Comments In HTML:

It is a note in your code that the browser ignores.

It’s just for you to read.

You can use it to explain your code or temporarily hide some code.

Syntax Of A Comment:

<!-- This Is A Comment -- >

Output Of The Code:

Notes: The arrows and the words in red are something I included. It is not included in the code!

______________

Hope This Helps :)

[ipomoea-ae]

I… I can explain everything!

A free 1-page game of cross-border bickering, for 2+ people

The Duchy of Clarmonda has only one Customs Office, but ever-changing laws.

Are chickpeas imports forbidden? It could be allowed next week, while alpaca yarn gets banned! And now, only two pairs of socks can transit duty-free!

In this game, you will role-play a dialogue between the customs officer from a small country and a traveller.

The Traveller wishes to go over the border with their luggage. The Officer cannot let them, but the Traveller finds a way!

Get the game on itch.io

If anyone plays this, let me know how it went! Would love to hear about any peculiar regulations that may come up ^^ (or any feedback, really!)

Playtests have involved : out-of-date tourist guides — “our team isn't the Chainmail-Clad-Lads any more, but the Chainmail-Clad-Squad” —moral concerns about mirrors — “this country has a vanity problem” — unpractical clothing — “serial strangler on the loose, please refrain from wearing a scarf”…

Available as a C-fold pamphlet for print, a linear paged version for digital use, and a text-only HTML file with semantic markup.