#details and summary tag in html

[izicodes]

Basics of HTML5: Let's build a webpage!

I'm a huge advocate for learning HTML5 as your first coding language (remember, it's not a programming language)! HTML5 is a great and easy coding language to get you into the feel of coding, especially for complete complete beginners!

I see a lot of people on Tumblr wanting to get into just creating their own websites but don't know how to start - coding is a new thing to them! So, I'm here to help with the language I know like it's the back of my hand!

And I am also an advocate of building projects in order to learn anything in coding/programming! Thus, what better way to learn the basics of HTML5 than to actually build a simple webpage? Let's get started~!

What is HTML5?

HTML, which stands for Hypertext Markup Language, is a special coding language that is used to create webpages. With HTML, you can tell a web browser, like Google Chrome or Safari, what to display on a webpage, such as text, images, and videos. And 'HTML5' is just the latest version of HTML!

HTML tags are special words or symbols that you use to create webpages. You use these tags to tell the web browser what content to display on a webpage, like headings, paragraphs, images, links, and more. Tags come in pairs (most of the time) so you'll have an opening tag and a closing tag. An example of the syntax:

The Simple Webpage

As I mentioned, we will be making a simple webpage for a person called David - see, he needs a portfolio webpage to start off with, and we're going to help me (as well as learning HTML5, of course).

Here is the code we will be using:

Pretty code, I know but also a bit confusing - let's get into understanding the code by grouping them into chunks! But just a heads up, the code includes these tags:

!DOCTYPE html (mmh it's more of a declaration really)

html, head, body

title

h1, h2, h3

p, a

li, ul, ol

These are some of the common tags used in all webpages on the internet! Okay, let's look at the code finally~!

The basic structure of every HTML page

Every HTML file looks like this - it has to have all of these tags!

The first line, !DOCTYPE html tag, tells the web browser which version of HTML is being used.

The code is contained within html tags, which enclose the entire webpage.

The head tags contain information about the webpage, such as the title and links to other resources.

The body tags contain the main and visible content of the webpage, such as text, images, and videos.

Together, this code provides the basic structure for an HTML webpage, with the head tags containing metadata and the body tags containing the actual content.

In the head tags

The title tags enclose the title of the webpage. In this example, the title is "My Programming Blog".

The title appears in the title bar of the web browser and is often used by search engines and social media sites to display the name of the webpage.

In the body tags - Headings and paragraphs

The h1 tags create a main and biggest heading, which in this case is "Welcome to My Programming Blog!" - you can only have one h1 tag on a webpage.

The h2 tags create subheadings, which in this case include "Latest Post", "About Me", and "My Projects" - you can have multiple h2 to h6 tags on a page.

The h3 tags create a sub-subheading under h2 tags, which in this case is "How I Improved My Coding Skills".

The p tags create paragraphs of text that provide more detail about the blog's content and purpose, including a summary of the latest blog post and information about the author and their projects.

In the body tags - lists and links

To start any list, you need to either start with ul tags or ol (ordered (numbered)) tags

The ul tags create an unordered list of items.

The li tags create list items within the unordered list.

Each list item includes a hyperlink created using the 'a' tags, with the text of the link being the name of a programming project.

The href attribute within each 'a' tag specifies the URL where the project code can be found on GitHub.

Attributes go inside the opening tags' arrows '<' and '>'.

The End Result

Boom - she's gorgeous, I know! A basic, simple webpage! We did it! You can see the page live + the code used here: [LINK]. Play around with the code, change things, experiment, break things, fix them - do what you need to learn further!

And that includes some online resources to help!

LINK 1 | LINK 2 | LINK 3

And some resources/posts I have shared about HTML

LINK 1 | LINK 2 | LINK 3

What next?

Learn CSS3! The page looks basic and looks like what pages were like when the internet was invented! You need colour, fancy fonts and layouts! CSS helps with that, as it is a styling sheet! Be sure to do some research but I also share resources on my blog under my #resources tag!

Thank you for reading and best of luck learning coding/programming! Remember, this isn't the only way to get into coding! People even recommend languages like Python to be beginners' first language, but I say that HTML5 should be the first coding language and then Python is your first programming language - don't know the difference? I made a post about it here!!

But definitely for people going into Web Development, HTML5 all the way! I don't think you can avoid learning HTML5 with Web Development (not 100% sure though...)!

Anyhoo, have a nice day/night! 👋🏾💻💕

[smut-wars-exchange]

[Public question, unless you've already answered and iI just didn't see]

I've seen a few people doing dropdowns so longer dnws don't take up too much space lengthwise. Do you have a link on how to do that? The AO3 page on html basics doesn't say how.

Masterpost | Ask | Rules | AO3 | Tagset | Dreamwidth | Discord | Signup

Hello,

You can use the <details> tag for this, along with <summary>:

<details> <summary>Cool Title</summary> Dropdown text! </details>

Which will look like this:

It's personally one of my favorite tricks :)

[boinin]

sorry i couldn't find out how to ask on your other blog.

that book binding you posted is gorgeous btw !!

I noticed that in one of the photos you included the disclaimer that you also edited it. I just had a question about how you formatted the text.

one of my biggest gripes with AO3 is text formatting (i often feel like i'm reading a legal document vs a novel/story) . Did you change how it is formatted on AO3 compared to printed?

I feel like i'm in the 0.5% that hate AO3 formatting but i thought i might as well ask in case you have any tips for that. >,>

(also how do you decide on the page size, do you just choose a standard size for all your projects? or do you vary it depending on what you are binding?)

thanks so much for taking the time to answer and for sharing your projects :) !!!!!!!!!!!

hey anon! I have asks turned off for the sideblog, but happy to answer here. Thanks very much!

I'm taking this opportunity to info-dump and link a lot of resources. I think they're useful for people new to either typesetting or bookbinding, but not all are directly related to your queries. That said, hope this is of use!

one of my biggest gripes with AO3 is text formatting (i often feel like i'm reading a legal document vs a novel/story) . Did you change how it is formatted on AO3 compared to printed?

I do a fair bit of editing when I'm binding a fic; typesetting is often the longest part of the process. Your mileage will vary depending on your experience with using word processor software, particularly the paragraph style and page style settings. Another factor is how simple/complicated you want your typeset to look. Replicating a published novel in format is difficult but learnable for a complete beginner.

I'm not equipped to give a full tutorial on how to typeset, but I'll point you towards some useful resources for ficbinding then talk about my own process.

ArmouredSuperHeavy has a tutorial on how to make Ao3's HTML downloads into a printable book in Microsoft Word. I use LibreOffice Writer myself, so this adaptation of the same tutorial is what I follow. Both are very helpful to reference as you're learning the typesetting ropes.

Personally, I don't mess around with HTML. I find it easiest to start by doing a Ctrl+A copy of the Entire Work fic view on Ao3 then pasting that into my word processor. This video tutorial by Beautifully Bound runs through how to do this in Microsoft Word using an AO3 fic as an example, including the associated steps needed to make the fic look novel-like. This is probably the best tutorial to address your gripe with AO3 formatting. Other than that, I'd recommend looking into videos or tutorials about typesetting novels for print. Same idea, and you may get more hits than searching for fanbind/ficbind typesetting tutorials.

More under the cut! Once I start yapping, it's hard to shut me up 🤷‍♀️

As a point of comparison, here's one of my fics on Ao3 and the corresponding typeset side by side:

Beautifully Bound explains this in far better detail than I will, but off the top of my head, the steps involved:

making a new document and setting the default page size to whatever size I want the book's pages to be (A5 or A6 usually). You can also set the margins at this point, taking account of your printer settings.

CTRL+A and copying the entire work's text on AO3 then pasting it into the document.

removing all hyperlinks and AO3 frontmatter, things like the author tags, summary, notes, etc as well as any website text that got copied over alongside the fic.

(optional) running a spell check and ensuring grammar usage is consistent. For me that's substituting em dashes for hyphens between clauses, enforcing curly double quotation marks for dialogue, etc. LibreOffice Writer automates a lot of this with customisable settings, via Tools -> Auto-Correct. Here's also where to make sure character names are all spelled right, convert the text to or from US to UK English, etc.

picking out fonts for the body text, headers, page numbers, etc. This is where you'll want to use paragraph style settings. Page style settings also comes in clutch if, for example, you'd like different headers on alternating pages. I like having the author on the right, the fic title on the left.

setting the body text first line indent to whatever makes sense visually). This in particular helps make the fic feel more like a novel. You can also play around with line spacing and space between paragraphs at this stage. For this A6 typeset, I had a 0.75cm first line indent, 1.15 line spacing, and 0.15 spacing between paragraphs.

(optional) formatting the first line of the work to use small capitals and to add a drop caps to the first letter of the first word. Again, this is a convention in publishing which add a novel-like feeling to a printed fanwork.

Inserting page numbers, adding images, coming up with how I wanted the "copyright" page to look—optional for the most part, but these are details that make a fic appear more like a novel.

For multi-chapter works, there's extra work in formatting chapter titles as headings so that they're referenced correctly in the automatic table of contents word processors can generate.

Once you have a typeset you're happy with, and if you're considering printing and binding it as a book, then you'll need to look into how to create and print signatures. Personally, this is something I had to actually try (and mess up a bunch of times) before I got to grips with it. Understanding how both your printer and your PDF reader work, particularly printer margins and booklet print settings, is key.

I won't go into as much detail on this, but if it's something you have an interest in, I'd recommend starting with DAS Bookbinding's tutorial. DAS has tutorials for everything bookbinding related so when in doubt, check his channel! Plenty of other YouTubers also have good videos on making signatures.

This resource is extremely useful once you've got your head around how to print signatures manually, so here's a link for anyone in that space: GitHub Bookbinding Imposer. Essentially, this does the signature creation for you, removing the need for booklet print settings in your PDF reader.

also how do you decide on the page size, do you just choose a standard size for all your projects? or do you vary it depending on what you are binding?

I have access to both A4 and A5 sized paper and my printer can handle printing on either size. In bookbinding, normally two pages are printed per side of the paper (which are then folded in half as part of a signature). That is, when I print on A4 paper, it's to make an A5 sized book. Printing on A5 paper will yield an A6 sized book.

Before I begin typesetting, I'll usually know what paper I plan to use, so the typeset will be one size down from the paper. So far, I've made softcover pamphlets at A6 size and casebound books in A5. No real method of choice for me, it's whatever I feel most suits the project.

---

If you made it this far anon, thanks for reading! Here's links to a few general resources if bookbinding is something you'd like to explore more:

DAS Bookbinding (YouTube, bookbinding in all forms)

Sea Lemon DIY (YouTube, bookbinding and other crafts)

bitter melon bindery (YouTube, bookbinding, particularly beginner friendly!)

Jess Less (YouTube, demonstrations of fanbinding and re-binding existing novels)

Papercraft Panda (blog, lots of detailed tutorial on bookbinding)

Renegade Bookbinding Guild (collective and website, loads of fanbinding-specific resources from their members and they have a helpful Discord).

[mylittleredgirl]

as i sign up for the rarepair exchange (signups open until may 11th!), i'm having my usual crisis about what to put in the optional details box on the sign-up page vs. whether to have a separate letter i link to in my sign-up.

personally i like seeing likes/prompts in the details box rather than just DNWs (i'm unlikely to want to write treats based on what someone doesn't like, you know?), but i also get self-conscious about making people scroll past my thoughts.

if you don't participate in exchanges this poll won't make sense, but if you want to get an idea, here's the existing rarepair requests page (though lots of people, like me, still have placeholder text instead of full requests).

if you didn't know about the collapsible details feature, it's on the list of allowed html tags on ao3!! it creates a readmore on any ao3 page (and it carries over to the auto ao3 app people use to sort challenge requests):

<details><summary>put the text here that people can click on, e.g. click here for more prompts</summary>

your long list of thoughts and emoji bullet points can go here, and then you close it up with:

</details>

you can then continue to type stuff after </details> that will NOT be hidden, and can use multiple <details> sections in a row.

[hd-hurtcomfort-fest]

Pain: ON

Creator: anon Pairing(s): Harry Potter/Draco Malfoy, Harry Potter/Ginny Weasley, Luna Lovegood/Harry Potter, Harry Potter/Other(s) Rating: M Word count: 17.2k

Warnings/Tags: Creator Chose Not To Use Archive Warnings, Hurt/Comfort, Emotional Hurt/Comfort, Angst and Hurt/Comfort, Unhappy Ending, Alternate Universe, Royal Prince Harry Potter, Kissing, Rough Kissing, Smut, Mild Smut, Mild Language, Mild Sexual Content, Fluff, Tickling, Tragedy, Depressed Harry Potter, Crying, Bottom Harry Potter, Top Draco Malfoy, POV Harry Potter, Angst, Fake Character Death, Implied/Referenced Sex, Foot Massage, Cuddling & Snuggling, slight stalking, Tyrant Draco Malfoy, prolonged sadness, Vomiting, Time Loop, Detailed Clothing Descriptions

Summary: Harry James Potter was the prince of Golden Heart Kingdom in a recently created dating sim that quickly rose to popularity. It had a wide variety of love interests and the interesting antagonist that would never be made dateable by the misogynistic and homophobic developers. Harry had been the perfect protagonist, gold-hearted and heroic. He hated the tyrant, Draco Malfoy, and loved the ladies he was set up with. Then, one day, after a slip-up during an update, he realised just what his life was actually reduced to: pain and suffering.

Author's note: Hello! I had promised myself that I wouldn't participate in another fest this year yet here we are! I have a few things I want to mention before the beginning of this fic.

First of all, I want to thank my two beta readers. One of them helped me a lot with SPaG mistakes and the other with getting into the head of a depressed person. This fic wouldn't have been possible with either of them, so I appreciate their help with this project.

Second of all, there is some art in the fic. I haven't tagged it since it isn't art in the way most people think about it in a fic. The 'art' is just the pop-up messages throughout the fic that I didn't know how to programme with html. I had the choice to learn how to draw or learn how to programme, and I chose art XD

Third of all, my interpretation of my prompt is pretty trippy so, as a friendly warning, please don't read this while high :)

Finally, let me present the prompt so you know what you should expect:

Harry Potter is the main character of a dating sim. He’s dated all of the dateable characters available, but he’s developed feelings for the antagonist of the Game. One blond prat by the name of Draco Malfoy. The more Harry tries to get to know Malfoy better, the harder the Game tries to prevent it, or at least doesn’t allow much progress to happen between them. Harry fell in love with the quiet Malfoy that no one else sees. The one that Malfoy would never show to our beloved protagonist.

That is all. Don't let me keep you away from the fic any longer. Enjoy!

***FIC PAIRING***

Be still my beating heart. Hurt/Comfort || T || 18.4k

*banner art by @basiatlu

[wipbigbang]

Round 2 Of Artists Claims For The Regular WIPBB Are Open! Round 2 lasts until July 31st! You may claim 3 fics this round!

This is one of the fics open for claiming...

The Witcher: Blood Origin #144 Title: my head's not yours (it's mine) Pairing/Characters: Fjall Stoneheart, Eile | The Lark. Fjall Stoneheart/Eile | The Lark. Rating: Explicit | E Warnings/Tags: Graphic Violence, Major Character Death, Non-con/Rape consent issues and resulting sexual violence as a major theme. not depicted in graphic detail but extremely present. canon-typical violence, death, and torture in medical experimentation territory. canonical major character death implied but not explored. Summary: a character study of fjall stoneheart resulting from textual analysis of the witcher: blood origin! mostly canon-compliant and focused on the consent issues between fjall and merwyn as well as his shifting opinion of her with regards to his connection to eile. very introspective, extending from pre-canon to near the end of show canon.

The list of remaining fics and the link to sign up are below!

[saide-hossain]

Let's understand HTML

Cover these topics to complete your HTML journey.

HTML (HyperText Markup Language) is the standard language used to create web pages. Here's a comprehensive list of key topics in HTML:

1. Basics of HTML

Introduction to HTML

HTML Document Structure

HTML Tags and Elements

HTML Attributes

HTML Comments

HTML Doctype

2. HTML Text Formatting

Headings (<h1> to <h6>)

Paragraphs (<p>)

Line Breaks (<br>)

Horizontal Lines (<hr>)

Bold Text (<b>, <strong>)

Italic Text (<i>, <em>)

Underlined Text (<u>)

Superscript (<sup>) and Subscript (<sub>)

3. HTML Links

Hyperlinks (<a>)

Target Attribute

Creating Email Links

4. HTML Lists

Ordered Lists (<ol>)

Unordered Lists (<ul>)

Description Lists (<dl>)

Nesting Lists

5. HTML Tables

Table (<table>)

Table Rows (<tr>)

Table Data (<td>)

Table Headings (<th>)

Table Caption (<caption>)

Merging Cells (rowspan, colspan)

Table Borders and Styling

6. HTML Forms

Form (<form>)

Input Types (<input>)

Text Fields (<input type="text">)

Password Fields (<input type="password">)

Radio Buttons (<input type="radio">)

Checkboxes (<input type="checkbox">)

Drop-down Lists (<select>)

Textarea (<textarea>)

Buttons (<button>, <input type="submit">)

Labels (<label>)

Form Action and Method Attributes

7. HTML Media

Images (<img>)

Image Maps

Audio (<audio>)

Video (<video>)

Embedding Media (<embed>)

Object Element (<object>)

Iframes (<iframe>)

8. HTML Semantic Elements

Header (<header>)

Footer (<footer>)

Article (<article>)

Section (<section>)

Aside (<aside>)

Nav (<nav>)

Main (<main>)

Figure (<figure>), Figcaption (<figcaption>)

9. HTML5 New Elements

Canvas (<canvas>)

SVG (<svg>)

Data Attributes

Output Element (<output>)

Progress (<progress>)

Meter (<meter>)

Details (<details>)

Summary (<summary>)

10. HTML Graphics

Scalable Vector Graphics (SVG)

Canvas

Inline SVG

Path Element

11. HTML APIs

Geolocation API

Drag and Drop API

Web Storage API (localStorage and sessionStorage)

Web Workers

History API

12. HTML Entities

Character Entities

Symbol Entities

13. HTML Meta Information

Meta Tags (<meta>)

Setting Character Set (<meta charset="UTF-8">)

Responsive Web Design Meta Tag

SEO-related Meta Tags

14. HTML Best Practices

Accessibility (ARIA roles and attributes)

Semantic HTML

SEO (Search Engine Optimization) Basics

Mobile-Friendly HTML

15. HTML Integration with CSS and JavaScript

Linking CSS (<link>, <style>)

Adding JavaScript (<script>)

Inline CSS and JavaScript

External CSS and JavaScript Files

16. Advanced HTML Concepts

HTML Templates (<template>)

Custom Data Attributes (data-*)

HTML Imports (Deprecated in favor of JavaScript modules)

Web Components

These topics cover the breadth of HTML and will give you a strong foundation for web development.

Full course link for free: https://shorturl.at/igVyr

[memorizingthedigitsofpi]

I watch a fair bit of D&D but I've only played once, like 20 years ago. And yet, I can't help wanting to write an audience-participation style fic where the reader can roll to see what happens to their character and I let them know the DC and what happens if they pass/fail

(yes, this is because I realized that AO3 supports the details and summary tags in html)

[sugareey-makes-stuff]

This is definitely a long time coming, but I finally wrote a text only fic for Sterek, complete with a stylized AND plain text view for reading! Also my first long fic that I've written since...I don't even know when (aka it's NOT a drabble or ficlet!!). This is also belated from July, but for reasons you can read more about below the cut. Inspired by @yearoftheotpevent's July prompt "stars," as well as sniperjade's Masturbation Midsummer Bingo 2023, using the square "I can't anymore," and Summer of Cum 2023 prompts "creampie," "come marking," "precome," "come swallowing," "coming untouched," and "coming in pants" (yeah, there's definitely a spicy theme here :P).

Title: Feel You Breathing (<- on AO3) Rating: Explicit WC: 8.4k Tags: Texting/Sexting, Established Relationship, UST, Porn with Feelings, Porn With Plot, Fantasizing, Teasing, Banter, Filthy, Dirty Talk, Masturbation, Idiots in Love, Writer Derek Hale, Bartender and Graduate Student Stiles Stilinski, Business Trip, Flight Delays, Coming In Pants, Coming Untouched, Nipple Play, Light Dom/sub, Bad Pick-Up Lines, Humor, Shopping, Sex Toys, Kink Exploration, Werewolf Mates, Anchors, Love Confessions, Pet Names, Romantic Angst, Stiles AND Derek are Little Shits, POV Alternating

Summary: Derek: So, you need a distraction. Stiles: Maybe Stiles: It’d be better if you were here to help me with that. Stiles: ;D [Or: Sexy things start late one night when Derek gets a text from Stiles and escalate from there. A few secrets are revealed along the way.]

Some of my lovely Sterek friends know I've been dabbling in and out of writing text fics since last year (2022). Easier said than done 1000%, I'm going to tell you that right now. It only took me 3 tries to get it right! (And yes, it means my other 2 WIPs need to be reworked, le sigh.) It's one thing to write a text fic, but it's a completely different beast to style the damned thing with AO3 skins while making it as legible and accessible as possible. I thankfully know how to code in CSS and HTML, but it took me quite a long time to create a custom skin template that I liked and could reuse while getting the look and feel just right for our idiotic boys and the overall Teen Wolf world. Texting and sexting is legit an art. There are so many ways to approach how to write a text because each person does that differently. There's also intention required when using emojis, figuring out how someone would react to things, and hell, even playing around with timestamps and timezones is important. A text fic isn't just about words. All the tiny details add up and make a new experience. I think I took a full week to QA this whole fic because I wanted the aesthetic to look good, and it was worth it! It was nice to make something for myself, which let me write dialogue and banter and a lot of fun things I normally wouldn't had this been a different kind of fic. Super grateful for having a Write-A-Thon sprint weekend, which motivated me to finish the bulk of this baby up. And when I think about it now, this labor of love was originally supposed to be an experiment for me to play around and learn more about coding intricacies. It was supposed to be a short Porn without Plot thingie (but uhhh, it's definitely Porn with Plot and Feelings because that's the way it is). 1-2k words somehow became 8k+ words. No regrets though. It has been a long time since I've felt good about writing something this long and doing something different than the norm. It has been such a blast coming up with all the texts in this fic, because they're humorous and spicy with the usual banter and sarcasm we love between Derek and Stiles. But hey, there's some romantic angst too (they might be texting and using words, but they could do better, of course). Anyway, I hope you give this a read when you have a chance. Enjoy!

[kamari333]

i learned a new html trick and went back to my bookmarks on AO3 to use it.

You can use the <details> tag to make a block of text optional with a toggle, and inside it use the <summary> tag to define that details label (links to W3Schools -- my go-to for coding help)

Tangentially related, I am once again reminded that the Simple Series by @jellyfish-swims-through-gold and @tkwolf45 is amazing and filled me with so many feelings ❤️❤️❤️ It's a dead dove Ink/Error/Geno/Reaper poly series, and I will recommend it to anyone who can handle the tags and warnings attached to it (read the tags and be responsible).

'My List' has now been condensed in my bookmarks, but no html can contain the feelings in my heart. Thank you again you wonderful writers that i have so much respect for.

[rondracofest]

Ron/Draco Fest 2023: Submission Info

SUBMISSIONS ARE DUE ON FEBRUARY 15, 2023. POSTING WILL BEGIN ON MARCH 1, 2023 (RON'S 43RD BDAY!).

Submission Info

The claiming post can be found here. Claiming is available until February 14, 2023.

All participants must be over the age of 18.

There are no minimum or maximum word requirements for fic. Art needs to show a comparable amount of work and be of a decent standard. Everything must be betaed, proof-read, checked, and edited.

Posting will be anonymous, so please don't give the game away by posting anywhere else, or replying to comments, or hinting on your socials until after reveals. Also, because this is an anonymous fest, the piece you submit must be a complete, stand-alone work and can't be based on any of your other works, prequels, sequels, etc.

All submissions will be hosted on AO3, at the Ron/Draco Fest collection. Feel free to check it out, but please only post your submissions there yourself if you are 100% sure you know how. One mistake can make the difference between your fic being posted before its time - or revealing your pseud too early, which would unfortunately disqualify you from further participation - so if you find yourself unsure of how to do this in any way, please feel free to send everything to the mod email, and I will take care of it.

Headers with a link back to AO3 will be posted here on Tumblr.

Regardless of whether or not you choose to post your submission yourself on the AO3 collection, you are required to send the following header info to the mod account at rdfestmod@gmail.com. In the subject line of your email, please enter your AO3 username, whether your submission is fic, art, or both, and your prompt number. Please also let me know whether or not you have chosen to post your submission to the collection yourself or if you are sending it to me (and of course attach the gdocs or Word file to said email), and include your AO3 username only in the space for Author/Artist in the header.

Please use the header below in your email:

<b>Title:</b> <b>Author/Artist:</b> <b>Rating:</b> <b>Prompt:</b> <b>Word Count/Medium:</b> <b>Warning(s)/Content:</b> <small><b>Disclaimer:</b> Harry Potter characters are the property of J.K. Rowling and Bloomsbury/Scholastic. No profit is being made, and no copyright infringement is intended.</small> <b>Summary:</b> <b>Notes:</b>

If your fic requires any html coding - such as italics or bold text - YOU are responsible for making sure that code is in your document. Your mod will NOT be adding any of that in for you. Whether or not the code is included, your submission will be posted as is - so if you want it in there, please make sure to double check before posting/sending in your entry. In addition, I, as the mod, reserve the right to send back your entry for further editing if I feel it is needed.

And finally, you are required to add the mod account as a co-creator when submitting your work to the AO3 collection. The mod account is rdfestmod. This is for general admin purposes ONLY, and will never be misused on my part as a mod. For a more detailed explanation, please see our announcement post from the 2021 round, and always feel free to reach out to me at rdfestmod@gmail.com if you have any questions or concerns.

Resources

If you don’t have a beta, I always recommend asking in any of the various fanfic writers' groups out there! In keeping with the stress free style of this fest, your beta is not necessarily required to be someone official in fandom; if you'd be more comfortable having a friend or family member look everything over, you are welcome to have them do so!

phoenixacid’s Basic HTML Guide

hd_writers’ handy guide to

placing HTML tags in a Word Document

And please utilize potterwords for all the correct spellings that you might need for creatures, characters, or anything else for your creations.

Your mod, @fangqueen​​

[xuanwuoo]

Google SEO

Google SEO is the process of optimizing your website to rank higher in Google’s search engine results pages (SERPs). The higher your website ranks on Google, the more traffic it will receive, which can lead to increased leads, sales, and revenue for your business. There are many different factors that contribute to a website’s ranking on Google, including on-page optimization, off-page optimization, technical SEO, and more. In this guide, we will explore each of these factors in detail and provide tips and best practices for improving your website’s SEO.

Understanding Google’s Ranking Algorithm

Google’s ranking algorithm is a complex set of rules and algorithms that determine which websites should be shown at the top of the search engine results pages (SERPs) for a given search query. The algorithm takes into account hundreds of different factors, including the relevance and quality of the content on a website, the website’s authority and trustworthiness, the user experience on the website, and many others. Understanding how Google’s ranking algorithm works is essential for developing an effective SEO strategy.

Keyword Research and Analysis

Keyword research and analysis is the process of identifying the keywords and phrases that people use to search for products or services related to your business. By targeting these keywords in your website’s content, you can increase your website’s visibility and attract more targeted traffic. In this section, we will discuss how to conduct keyword research and analysis, and how to use this information to optimize your website’s content.

On-Page Optimization

On-page optimization refers to the process of optimizing the content and HTML source code of your website’s pages to improve its relevance and visibility for specific keywords. This includes optimizing title tags, meta descriptions, header tags, content, images, and internal linking. In this section, we will provide tips and best practices for on-page optimization.

Title Tags

Title tags are HTML elements that specify the title of a web page. They are one of the most important on-page ranking factors, as they tell Google what the page is about. In this section, we will discuss how to optimize title tags for SEO.

Meta Descriptions

Meta descriptions are HTML elements that provide a brief summary of the content on a web page. While they do not directly impact a website’s ranking, they can influence whether users click through to your website from the search engine results pages. In this section, we will discuss how to optimize meta descriptions for SEO.

Header Tags

Header tags are HTML elements that indicate the hierarchy of headings and subheadings on a web page. They help Google understand the structure and organization of the content on your page. In this section, we will discuss how to use header tags for SEO.

Content Optimization

Content optimization involves creating high-quality, informative, and engaging content that targets specific keywords and topics. In this section, we will provide tips for optimizing your website’s content for SEO.

Image Optimization

Image optimization involves optimizing the size, file format, and alt tags of images on your website to improve its visibility on Google. In this section, we will discuss how to optimize images for SEO.

Internal Linking

Internal linking involves linking to other pages on your website from within your content. It helps Google understand the structure and organization of your website, and can improve the user experience for visitors. In this section, we will provide tips for internal linking for SEO.

Off-Page Optimization

Off-page optimization refers to the actions taken outside of your website to improve its visibility and ranking on Google. This includes link building, social media marketing, and other external factors. In this section, we will discuss how to improve your website’s off-page optimization for SEO.

Link Building

Link building involves acquiring high-quality links from other websites to your own. Google uses the number and quality of links pointing to a website as a signal of its authority and trustworthiness. In this section, we will provide tips for link building for SEO.

Social Media Marketing

Social media marketing involves promoting your website’s content on social media platforms such as Facebook, Twitter, and LinkedIn. This can help drive traffic to your website and increase its visibility on Google. In this section, we will discuss how to use social media for SEO.

Technical SEO

Technical SEO refers to the technical aspects of website optimization that can affect its visibility and ranking on Google. This includes website speed optimization, mobile responsiveness, SSL certificate, and structured data markup. In this section, we will provide tips for improving your website’s technical SEO.

Website Speed Optimization

Website speed is a critical factor in user experience and can affect a website’s ranking on Google. In this section, we will provide tips for optimizing your website’s speed for SEO.

Mobile Responsiveness

Mobile responsiveness refers to the ability of a website to adapt to different screen sizes and devices. With the increasing use of mobile devices for internet browsing, having a mobile-responsive website is essential for SEO. In this section, we will discuss how to optimize your website for mobile responsiveness.

SSL Certificate

An SSL certificate is a security certificate that encrypts data between a website and its visitors. Google considers websites with SSL certificates to be more secure and trustworthy, and this can positively impact a website’s ranking on Google. In this section, we will discuss how to get an SSL certificate for your website.

Structured Data Markup

Structured data markup involves adding additional metadata to your website’s HTML code to help search engines understand the content on your pages. This can help your website appear in rich snippets and other enhanced search results on Google. In this section, we will discuss how to implement structured data markup for SEO.

Local SEO

Local SEO refers to the process of optimizing your website for local search queries, such as “best coffee shops in San Francisco.” This includes optimizing your website’s Google My Business listing and local listings and directories. In this section, we will provide tips for improving your website’s local SEO.

Google My Business

Google My Business is a free tool provided by Google that allows businesses to manage their online presence on Google, including their business information, reviews, and photos. Optimizing your Google My Business listing is essential for improving your website’s local SEO. In this section, we will provide tips for optimizing your Google My Business listing.

Local Listings and Directories

Local listings and directories are websites that list local businesses in specific geographic areas. These listings can help improve your website’s visibility and ranking on Google for local search queries. In this section, we will provide tips for optimizing your local listings and directories for SEO.

Measuring and Tracking SEO Performance

Measuring and tracking your website’s SEO performance is essential for understanding how your website is performing on Google and identifying areas for improvement. In this section, we will discuss how to use tools such as Google Analytics and Google Search Console to measure and track your website’s SEO performance.

Google Analytics

Google Analytics is a free web analytics tool provided by Google that allows you to track and analyze your website’s traffic, user behavior, and other metrics. In this section, we will discuss how to use Google Analytics for SEO.

Google Search Console

Google Search Console is a free tool provided by Google that allows you to monitor and maintain your website’s presence on Google. It provides valuable information about your website’s visibility and ranking on Google, as well as insights into how users are interacting with your website. In this section, we will discuss how to use Google Search Console for SEO.

Advanced SEO Techniques

In addition to the basics of SEO, there are many advanced techniques that you can use to improve your website’s visibility and ranking on Google. In this section, we will discuss some of the most effective advanced SEO techniques, including schema markup, voice search optimization, featured snippets, video SEO, and artificial intelligence and machine learning in SEO.

Schema Markup

Schema markup involves adding additional metadata to your website’s HTML code to help search engines understand the content on your pages. This can help your website appear in rich snippets and other enhanced search results on Google. In this section, we will discuss how to implement schema markup for SEO.

Voice Search Optimization

With the increasing use of voice assistants such as Siri and Alexa, optimizing your website for voice search is becoming increasingly important for SEO. In this section, we will provide tips for optimizing your website for voice search.

Featured Snippets

Featured snippets are snippets of content that are displayed at the top of Google’s search engine results pages for specific search queries. Optimizing your website for featured snippets can help increase your website’s visibility and traffic. In this section, we will discuss how to optimize your website for featured snippets.

Video SEO

Video SEO involves optimizing the video content on your website to improve its visibility and ranking on Google. In this section, we will provide tips for optimizing your website’s video content for SEO.

Artificial Intelligence and Machine Learning in SEO

Artificial intelligence and machine learning are increasingly being used in SEO to improve the relevance and accuracy of search results. In this section, we will discuss how artificial intelligence and machine learning are being used in SEO and how you can incorporate these techniques into your own SEO strategy.

Conclusion

Google SEO is a complex and ever-changing field, but by following the tips and best practices outlined in this guide, you can improve your website’s visibility and ranking on Google. Whether you are a business owner, marketer, or website owner, having a strong SEO strategy is essential for succeeding in today’s digital landscape.

[html-tute]

HTML Best Practices

Following best practices in HTML development ensures your websites are accessible, user-friendly, search-engine-optimized, and mobile-responsive. Below are key areas to focus on.

1. Accessibility (ARIA Roles and Attributes)

Accessibility refers to designing web content that is usable by everyone, including people with disabilities. ARIA (Accessible Rich Internet Applications) roles and attributes help improve accessibility by providing additional information to assistive technologies like screen readers.

ARIA Roles:

Roles define what a particular element does in the context of a web page. Common roles include:

role="navigation": Identifies a navigation section.

role="banner": Identifies the header section of the page.

role="main": Denotes the main content of the page.

role="button": Specifies an element that acts as a button.

role="alert": Defines a message with important, and usually time-sensitive, information.

Example:

<nav role="navigation"> <!-- Navigation links --> </nav>

ARIA Attributes:

Attributes provide additional context or control how assistive technologies interpret and interact with elements.

Common attributes include:

aria-label: Provides a label for an element.

aria-hidden: Hides elements from screen readers.

aria-live: Indicates the importance and type of updates in dynamic content.

Example:

<button aria-label="Close Menu">X</button> <div aria-live="polite">Content updates here...</div>

Best Practices:

Use ARIA roles and attributes only when necessary; rely on native HTML elements and attributes first.

Ensure all interactive elements are accessible via keyboard (e.g., using tabindex).

Provide text alternatives for non-text content, like images (alt attributes).

2. Semantic HTML

Semantic HTML uses HTML elements that convey meaning about the content inside them, helping both browsers and developers understand the structure of a webpage. It also improves accessibility and SEO.

Common Semantic Elements:

<header>: Defines introductory content or a set of navigation links.

<nav>: Represents a section of a page that links to other pages or sections.

<main>: Specifies the main content of the document.

<article>: Represents a self-contained piece of content.

<section>: Defines a section of content, typically with a heading.

<footer>: Contains footer content like contact info or copyright details.

<aside>: Contains content indirectly related to the main content, like sidebars.

Example:

<header> <h1>Website Title</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> </ul> </nav> </header> <main> <article> <h2>Article Title</h2> <p>This is a paragraph inside an article.</p> </article> <aside> <h3>Related Links</h3> <ul> <li><a href="#related">Related Article 1</a></li> </ul> </aside> </main> <footer> <p>&copy; 2024 Your Company Name</p> </footer>

Best Practices:

Use semantic elements to structure your content logically.

Avoid using non-semantic elements like <div> or <span> when a semantic element is appropriate.

Ensure every page has a single <main> element and it is properly structured.

3. SEO (Search Engine Optimization) Basics

SEO involves optimizing your web pages so they rank higher in search engine results, increasing visibility and traffic.

Key HTML Elements for SEO:

Title Tag:

Appears in the browser tab and search engine results as the clickable headline.

Example:

<title>Best Practices for HTML Development</title>

Meta Description:

Provides a summary of the page content, often displayed in search results.

Example:

<meta name="description" content="Learn HTML best practices for accessibility, semantic HTML, SEO, and mobile-friendliness.">

Headings (H1-H6):

Use headings to structure content. The <h1> tag should be used for the main heading, with <h2> to <h6> used for subheadings.

Example:

<h1>HTML Best Practices</h1> <h2>Accessibility</h2> <h3>ARIA Roles and Attributes</h3>

Alt Text for Images:

Provide descriptive alt text for images to describe their content to search engines and assistive technologies.

Example:

<img src="best-practices.png" alt="Diagram showing HTML best practices">

Internal Linking:

Use descriptive anchor text for links within your content to improve navigation and SEO.

Example:

<a href="/learn-more-about-seo">Learn more about SEO best practices</a>

Best Practices:

Ensure each page has a unique and descriptive title and meta description.

Use keywords naturally in your content, headings, and image alt text.

Create a clear site structure with organized headings and internal links.

4. Mobile-Friendly HTML

Mobile-friendly HTML ensures your web pages are responsive and usable on all devices, including smartphones and tablets.

Responsive Design:

Use the viewport meta tag to control layout on mobile browsers.

Example:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Fluid Layouts:

Use percentage-based widths or CSS Grid and Flexbox for layouts that adapt to different screen sizes.

Example:

<div style="display: flex; flex-wrap: wrap;"> <div style="flex: 1 1 50%;">Content A</div> <div style="flex: 1 1 50%;">Content B</div> </div>

Responsive Images:

Use CSS or the srcset attribute to serve different image sizes based on screen resolution.

Example:

<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" alt="Responsive image">

Touch-Friendly Elements:

Ensure buttons and links are large enough to be tapped easily on touchscreens.

Example:

<button style="padding: 10px 20px; font-size: 16px;">Tap Me</button>

Best Practices:

Test your design on various devices and screen sizes.

Minimize the use of fixed-width elements and large media files.

Optimize page load speed for mobile users by minimizing CSS, JavaScript, and images.

Read Me…

[sunalimerchant]

Top Skills to Look for in a Google Analytics Consultant

In the digital age, data is king. Businesses rely on accurate data to make informed decisions, optimize their marketing strategies, and improve overall performance. Google Analytics is one of the most powerful tools available for tracking and analyzing website traffic, user behavior, and conversions. However, to truly harness the potential of Google Analytics, many businesses turn to specialists. A Google Analytics consultant can provide the expertise needed to interpret complex data and turn it into actionable insights. But what makes a great Google Analytics consultant? Here are the top skills to look for when hiring one.

1. In-Depth Knowledge of Google Analytics

The most fundamental skill a Google Analytics consultant must have is an in-depth understanding of the Google Analytics platform. This includes not only the basic functionalities, such as tracking page views, sessions, and bounce rates, but also advanced features like setting up custom dimensions, event tracking, and configuring goals. A proficient consultant should be able to navigate the platform with ease, set up advanced tracking, and customize reports to meet the specific needs of your business.

Additionally, familiarity with Google Analytics 4 (GA4), the latest version of Google’s analytics platform, is essential. GA4 offers new features and a different data model compared to Universal Analytics, so a top consultant should be up-to-date with these changes and able to leverage them effectively.

2. Strong Data Analysis and Interpretation Skills

Having access to vast amounts of data is one thing; being able to analyze and interpret it correctly is another. A Google Analytics consultant must possess strong data analysis skills to make sense of the data collected. This includes understanding key metrics, identifying trends, and recognizing patterns that could indicate potential issues or opportunities.

The consultant should be able to differentiate between vanity metrics (such as page views) and actionable metrics (such as conversion rates), helping businesses focus on what truly matters. Moreover, they should be adept at interpreting the data in a way that aligns with your business objectives, providing insights that lead to informed decision-making.

3. Technical Expertise

Google Analytics implementation often requires a level of technical expertise, particularly when it comes to setting up tracking codes, configuring custom events, and integrating Google Analytics with other platforms like Google Tag Manager, Google Ads, and various content management systems (CMS).

A skilled consultant should be comfortable with these technical aspects, including proficiency in HTML, JavaScript, and understanding of how tracking pixels and cookies work. This technical knowledge ensures that the data collected is accurate and comprehensive, which is crucial for effective analysis.

4. Experience with Custom Dashboards and Reporting

One of the most valuable features of Google Analytics is the ability to create custom dashboards and reports tailored to your specific business needs. A top Google Analytics consultant should have experience in building these dashboards, allowing you to visualize the data that matters most to your business quickly.

Whether it’s a high-level executive summary for senior management or a detailed breakdown for your marketing team, a good consultant can create reports that are clear, insightful, and actionable. This customization ensures that every stakeholder in your business has access to the information they need to make informed decisions.

5. Problem-Solving and Critical Thinking Skills

Google Analytics data can sometimes reveal unexpected results or anomalies that need investigation. A competent consultant should have strong problem-solving skills to identify the root cause of any issues and recommend appropriate solutions. This might involve troubleshooting tracking issues, fixing data discrepancies, or optimizing the tracking setup to ensure accurate data collection.

Critical thinking is also essential when interpreting the data. A skilled consultant can look beyond the surface-level metrics to understand the underlying factors driving the data. This ability to think critically allows them to provide deeper insights and more strategic recommendations.

6. Communication and Collaboration Skills

Finally, a Google Analytics consultant must be an effective communicator. It’s not enough to analyze data; the consultant must also be able to explain their findings and recommendations clearly and concisely to stakeholders who may not have a technical background. They should be able to present data in a way that is easy to understand and relevant to your business goals.

Additionally, collaboration skills are crucial. A good consultant should work closely with your marketing, sales, and IT teams to ensure that Google Analytics is integrated smoothly into your overall business strategy. They should be able to collaborate effectively to implement changes, share insights, and drive continuous improvement.

Conclusion

Hiring a Google Analytics consultant can provide your business with the expertise needed to fully leverage the power of data. By ensuring that your consultant has a strong foundation in Google Analytics, technical expertise, data analysis skills, problem-solving abilities, and excellent communication, you’ll be well-equipped to turn data into actionable insights that drive your business forward. With the right consultant on board, you can unlock the full potential of Google Analytics and gain a competitive edge in the digital marketplace.

[beatrice-otter]

22, 40, 73!

For the record, I really prefer when people quote the meme, because I do not always manage to remember that I need to open it in a tab so that I can go through and reference it and figure out what they're asking. It's all good this time, because I did remember to open it in a new tab and it's this one, but for future reference!

22. describe your writing process from scratch to finish.

That varies depending on the story. Let's go with a fairly common writing process when I'm writing fic for exchanges, which I do a lot of because if I don't have a deadline I rarely actually ... finish anything.

My first step is reading through their signup to see what we matched on. If I'm lucky, they'll have given prompts, at least one of which will resonate with me. (Lists of tropes they like are pretty much useless to me; I have never once gotten inspired by a list of tropes.) If they haven't given any prompts, or haven't given any that I groove with, I will let things percolate for a while, going back to re-read the signup.

When I have an idea--and it's usually pretty vague at this point--I copy the stuff from the signup sheet into a blank document and delete the stuff I don't need (DNWs I would never write, prompts I'm not interested in, that sort of thing). With the deadline in bold at the very top. This way I have it all in one place and it's easy to check things. Then I start writing the story, mostly based on vibes at this point.

Usually, once I get actually started writing, my hindbrain will engage and give me stuff to write. Often times in the form of things that have to happen near the middle/end of the story. I will write a skeleton form of those--usually a brief summary of any scene that comes to me--down at the bottom of the document in italics, in the order things need to happen in the story. Once I know where I'm aiming at, I can usually get there with minimal problems. As I get to stuff in my summary/outline, I delete it because it's no longer necessary.

When there's stuff I need to research or decide--names of OCs, canon details I've forgotten, rl stuff I don't know off the top of my head--I put that in brackets and move on, so I don't get stuck. So instead of trying to figure out a name, I just write [CHARACTER1] and then when I'm done with the story I can take the time to pick a name without it derailing me from writing, and then do a replace-all.

When I'm done with the story and have gone back and filled in everything set aside with brackets, I send it off to betas if I can. There's rarely any major changes needed, but sometimes there will be fandom specific stuff (pronouns in TGE fics my beloathed), and also, by this point I usually hate the fic and/or think it is the worst fic anyone's ever written, so I need the reassurance that it's actually fine. Also, I have a problem with endings. As in, my natural tendency is to stop without wrapping things up very well, so I can never tell "is this a decent ending, or does it need something else to tie it together."

Then once I've gone through and made the changes suggested by my beta, I save the fic as a .txt file and do an advanced find-and-replace in Word to put in the html codes and copy-paste it into the AO3 Work Text box (HTML, not rich text). Here's a tutorial on doing html code by find-and-replace, it works with most word processing software except google docs.

Then comes the agonizing part, choosing a title. And usually it stops me cold and I spend hours going through poetry websites and quote websites and hitting refresh on a couple of title generators until I come up with something that I don't hate with the passion of a thousand burning suns. (Sometimes I give up and go with something I hate.)

Then I tag the fic, using this checklist to make sure I don't miss anything important.

Then I hit post!

40. best piece of feedback you’ve ever gotten.

If you mean feedback as in "writing advice" I have no idea. If you mean feedback as in "comment left on a fic" the one I remember most clearly the joy of receiving is this one.

73. how do you visualize scenes? do you see it like a movie in your head, or do the words just flow?

I do not visualize anything, like ever. That is not how my brain works.

I hear the scene--the dialogue--and will pace back and forth saying each character's dialogue in turn. Or lie in bed telling the story to myself, mostly in the form of dialogue.

When I started writing, one of the things that was hardest for me was to learn how to put in the visual things that other people need--scene descriptions, facial expressions and body language, you name it. A very early beta once told me that she felt like the characters were disembodied voices in a featureless white space, and this would not work for most people. They were right.